Перетащите любую фигуру в Canvas HTML5

Question

Я экспериментирую с использованием JavaScript для рисования чего-либо в HTML5.
И я хочу, чтобы фигура была интерактивной.
Я знаю, что могу вычислить текущее положение мыши независимо от того, попадаю ли она в форму (любую форму, может быть неправильной формы) с помощью javascript.
Но это слишком тривиально.
Это какой-то api или lib, чтобы сделать это calc для удобства.
Например, просто.

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/ кинетика дает вам лучший и самый простой способ.Теперь вы можете просто добавить несколько svgs и прослушивателей событий в цикл for.

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

}

Answer 3

Вы должны реализовать все эти функции самостоятельно или использовать библиотеку.

Если вы не хотите использовать библиотеку, я написал несколько руководств по созданию подвижных фигур.

Я бы настоятельно рекомендовал взглянуть на SVG и посмотреть, будет ли это лучше соответствовать вашим потребностям. Сложные пути, в которые встроены прослушиватели событий и тестирование попаданий, уже есть в SVG.