HTML5의 캔버스에있는 모든 도형을 드래그

Question

HTML5에서 무언가를 그리기 위해 javascript를 사용하여 실험하고 있습니다.
그리고 모양이 대화식이 될 수 있기를 바랍니다.
저는 현재 마우스의 위치를 ​​셰이프 (모든 모양, 아마도 불규칙한 모양)에 떨어 뜨릴 지 여부를 계산할 수 있다는 것을 알고 있습니다.
하지만 너무 사소합니다.
일부 convinience에서이 calc를 수행 할 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 */ 
    } 
}); 

또한 event inspector demo을 살펴보십시오.

Answer 2

당신은 모든 기능을 직접 구현해야합니다. 그렇지 않으면 라이브러리를 사용해야합니다.

라이브러리를 사용하지 않으려는 경우 이동 가능한 모양을 만들 때 few tutorials으로 작성했습니다.

저는 SVG를보고 여러분의 필요에 더 잘 맞는지 보길 강력히 권장합니다. 이벤트 리스너와 히트 테스트가 내장 된 복잡한 경로는 이미 SVG에 있습니다.

Answer 3

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/ 키네틱이 당신에게 가장 쉽고 쉬운 방법을 제공합니다. 이제 for 루프에 여러 svg 및 이벤트 리스너를 추가 할 수 있습니다.

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

}