在HTML5的Canvas中拖动任何形状

Question

我正在尝试使用JavaScript在HTML5中绘制内容。
而且我希望形状可以互动。
我知道我可以通过javascript计算当前鼠标的pos是否落入形状（任何形状，可能是不规则形状）。
但这太琐碎了。
是否有一些api或lib可以方便地执行此计算。
就像，例如。

var anyshape = new Shape();
anyshape.addEventListen('mousemove', onMouseMove);

要么

var anyshape = new Shape();
anyshape.onMouseMove = function(){};

Answer 1

Fabric.js提供了开箱即用的形状拖动功能。 还支持事件侦听和检测单击/悬停/等对象。

var myShape = /* any shape */;
canvas.observe('mouse:down', function(e) {
  if (e.memo.target === myShape) {
    /* mouse down on myShape */
  }
});

还可以查看事件检查器演示 。

Answer 2

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/动能为您提供了最佳，最简单的方法。 现在，您可以简单地在for循环中添加多个svg和事件监听器。

for{
create shape code
add event listener
console log - kinetic rocks

}

Answer 3

您必须自己实现所有这些功能，否则请使用一个库。

如果您不想使用库，我已经写了一些有关制作可移动形状的教程 。

我强烈建议您查看SVG，看看它是否更适合您的需求。 内置了事件侦听器和命中测试的复杂路径已经在SVG中存在。