在 HTML5 的 Canvas 中拖动任意形状答案

【问题标题】：Drag any shape in Canvas of HTML5在 HTML5 的 Canvas 中拖动任意形状
【发布时间】：2012-03-30 14:46:47
【问题描述】：

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

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

或

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您必须自己实现所有这些功能，或者使用库。

如果您不想使用库，我已经写了一个 few tutorials 关于制作可移动的形状。

我强烈建议您看看 SVG，看看它是否能更好地满足您的需求。 SVG 中已经存在具有内置事件侦听器和命中测试的复杂路径。

【讨论】：

你的教程不是我需要的。
不完全一样，但概念是一样的。您必须跟踪有关要制作的形状的所有信息，并自己进行命中测试或使用库。没有干净的内置方式。对你来说可能更好的是 SVG，其中很多都是内置的。

【解决方案3】：

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

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

}

【讨论】：