如何从像素画布HTML5中找到关联的多边形

我正在开发一个HTML5画布应用程序。我现在可以找到坐标和十六进制值的任何点，我点击画布上。 假设我正在单击一个有填充多边形的区域（我知道多边形的颜色）。是否有任何方法或算法返回绘制多边形的封闭坐标？？？

解决方案 将多边形点存储在对象或数组中，并使用画布方法：

var boolean = context.isPointInPath(x, y);

通过将点存储为对象/数组，您只需在集合中迭代以重新构建每个多边形的路径，然后调用上述方法（无需重新绘制多边形以进行检查）

如果你有一个命中，那么你知道它是哪个对象，因为它将是当前的。您可以在这些对象上存储其他元数据，例如颜色

例子 您可以创建一个简单的类来存储坐标和颜色（可以根据需要扩展的基本对象）：

然后定义一些要点：

/// object collection
var myPolygons = [];

/// add polygons to it
myPolygons.push( new Polygon([[10,10], [30,30], [70,70]], 'black') );
myPolygons.push( new Polygon([[50,40], [70,80], [30,30]], 'red') );

渲染多边形

然后渲染多边形：

for(var i = 0, p, points; p = myPolygons[i]; i++) {

     points = p.points;

     ctx.beginPath();
     ctx.moveTo(points[0][0], points[0][1]);

     for(var t = 1; t < points.length; t++) {
         ctx.lineTo(points[t][0], points[t][1]);
     }
     ctx.closePath();

     ctx.fillStyle = p.color;
     ctx.fill();
}

结论 通常，这将比迭代位图数组（这也是一个非常好的解决方案）更快。这主要是因为检查是在编译代码内部完成的

将来，我们可以自己构建路径对象，这样我们就可以传递一个已经保存了所有路径信息的路径对象，而不是重新构建它，这意味着更高的速度。

解决方案 将多边形点存储在对象或数组中，并使用画布方法：

var boolean = context.isPointInPath(x, y);

通过将点存储为对象/数组，您只需在集合中迭代以重新构建每个多边形的路径，然后调用上述方法（无需重新绘制多边形以进行检查）

如果你有一个命中，那么你知道它是哪个对象，因为它将是当前的。您可以在这些对象上存储其他元数据，例如颜色

例子 您可以创建一个简单的类来存储坐标和颜色（可以根据需要扩展的基本对象）：

然后定义一些要点：

/// object collection
var myPolygons = [];

/// add polygons to it
myPolygons.push( new Polygon([[10,10], [30,30], [70,70]], 'black') );
myPolygons.push( new Polygon([[50,40], [70,80], [30,30]], 'red') );

渲染多边形

然后渲染多边形：

for(var i = 0, p, points; p = myPolygons[i]; i++) {

     points = p.points;

     ctx.beginPath();
     ctx.moveTo(points[0][0], points[0][1]);

     for(var t = 1; t < points.length; t++) {
         ctx.lineTo(points[t][0], points[t][1]);
     }
     ctx.closePath();

     ctx.fillStyle = p.color;
     ctx.fill();
}

结论 通常，这将比迭代位图数组（这也是一个非常好的解决方案）更快。这主要是因为检查是在编译代码内部完成的

在未来，我们将可以自己构建路径对象，通过它，我们可以简单地传递一个已经保存了所有路径信息的路径对象，而不是重新构建它，这意味着更高的速度