0

我正在使用 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
});

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

4

1 回答 1

0

您的复杂路径存在问题

问题是复杂的路径（如您的示例）需要大量计算以确定内部对象是否已逃逸到路径之外。

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

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

替代

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

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

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

我确实为您提供了另一种选择。

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

您可以使用本机画布的 context.isPointInPath(corner1X,corner1Y) 检查 4 个角。

此解决方案将要求您：

  • 维护一个单独的屏幕外 html 画布。
  • 在屏幕外的画布上绘制复杂的路径。
  • 使用 context.isPointInPath 测试矩形的 4 个角。
于 2013-11-08T06:05:26.847 回答