Question

我正在使用KineticJS来创建应用程序。问题是我需要将dragBoundFunc应用于多边形内的图像，以便用户无法将图像移到外面。多边形可以是任何形状，例如：

var polygon = new Kinetic.Polygon({
    points: [-5, 0, 75, 0, 70, 10, 70, 60, 60, 90, 61, 92, 64, 96, 66, 100, 67, 105, 67, 110, 67, 113, 66, 117, 64, 120, 63, 122, 61, 124, 58, 127, 55, 129, 53, 130, 50, 130, 20, 130, 17, 130, 15, 129, 12, 127, 9, 124, 7, 122, 6, 120, 4, 117, 3, 113, 3, 110, 3, 105, 4, 100, 6, 96, 9, 92, 10, 90, 0, 60, 0, 10],
    fill: 'none',
    stroke: '#000',
    strokeWidth: 0,
    name: 'polygon',
    draggable: false
});

如果图像在多边形内部，要检查的算法是什么？或者解决问题的更好方法是什么？

Answer 1

您的复杂路径存在问题

问题在于复杂路径（如您的示例）需要进行大量计算才能确定内部对象是否已从路径外转义。

请记住，必须在每次mousemove事件中完成这些计算。 Mousemove事件每秒可以触发数十次。

我对KineticJS有一些经验，我相信复杂路径中的边界对象会失败，因为在将对象拖到路径之外之前无法完成计算。

替代

作为替代方案（如果您设计许可），您可以在复杂路径周围创建一个边界矩形，并使用该边界矩形来包含内部对象。

同样，您可以在复杂路径周围创建一个边界圆，并使用该边界圆来包含内部对象。

可以快速检查矩形和圆形边界区域，以便在对象逃逸之前包含该对象。

我还有其他选择。

由于您的内部对象是一个矩形，您可以检查矩形的所有四个角是否都在复杂路径中。如果所有4个角都在路径内，则您的矩形可能，但不一定在复杂路径中。

您可以使用本机画布的context.isPointInPath（corner1X，corner1Y）来检查4个角。

此解决方案需要您：

维护单独的屏幕外html画布。
在屏幕外画布上绘制复杂路径。
使用context.isPointInPath测试矩形的4个角。

KineticJS在多边形内部拖动

1 个答案: