拖动HTML5画布中的任意形状

Drag any shape in Canvas of HTML5

本文关键字：任意形 布中 HTML5 拖动      更新时间：2023-09-26

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

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

或

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

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

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

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

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

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

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

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/动能给你最好、最简单的方式。现在，您可以简单地在for循环中添加多个svg和事件侦听器。

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

}

相关文章：