javascript – 缩放多边形,使边缘匹配

我正在使用一个 JavaScript画布的项目,需要能够将光标捕捉到距离多边形一定距离.我已经可以捕捉到多边形本身,但是我需要将光标放在更远处.

据我所知,最好的方法是缩放多边形并捕捉到这一点,但是当我缩放多边形时,旧多边形的边缘与新多边形的边缘之间的距离并不总是匹配向上.

这里是一个问题的例子：

编辑：灰色表示原始多边形,如果我正确缩放多边形,则红色是我得到的,绿色是我要完成的

我已经尝试将多边形翻译成原点并乘以比例因子,但似乎不能将每个边缘缩小特定距离.

解决方法

我可以使用 JSTS库( JTS的JavaScript端口)提供解决方案.图书馆有多边形的充气/放气(抵消)的方法.

如果要获得具有不同类型边缘的膨胀多边形,可以设置帽和连接样式.你唯一需要做的就是将你的多边形坐标转换为一个非常简单的JSTS坐标：

函数vectorCoordinates2JTS(多边形){
var coordinates = [];
for(var i = 0; i< polygon.length; i){
coordinates.push(new jsts.geom.Coordinate(polygon [i] .x,polygon [i] .y));
}
返回坐标;
}

一旦你转换了坐标,你可以膨胀你的多边形：

function inflatepolygon(poly,spacing) {
  var geoInput = vectorCoordinates2JTS(poly);
  geoInput.push(geoInput[0]);

  var geometryFactory = new jsts.geom.GeometryFactory();

  var shell = geometryFactory.createpolygon(geoInput);
  var polygon = shell.buffer(spacing);
  //try with different cap style
  //var polygon = shell.buffer(spacing,jsts.operation.buffer.BufferParameters.CAP_FLAT);

  var inflatedCoordinates = [];
  var oCoordinates;
  oCoordinates = polygon.shell.points.coordinates;

  for (i = 0; i < oCoordinates.length; i++) {
    var oItem;
    oItem = oCoordinates[i];
    inflatedCoordinates.push(new Vector2(Math.ceil(oItem.x),Math.ceil(oItem.y)));
  }
  return inflatedCoordinates;
}

随着我在jsFiddle发布的代码,你会得到这样的东西：

附加信息：
我通常使用这种类型的充气/放气(稍加更改)来设置在地图上绘制的多边形上的半径边界(使用单张或Google地图).您只需将lat,lng对转换为JSTS坐标,其他所有内容都相同.例：

javascript – 缩放多边形,使边缘匹配

解决方法

相关文章