2012-09-22 7 views
0

두 캔버스가 있다고 생각하십시오. 캔버스에있는 도형을 드래그하여 다른 캔버스에 놓고 싶습니다. 가능할 수 있습니까?HTML5 캔버스에서 다른 모양으로 도형을 드래그 앤 드롭

내 질문을 이해해 주셔서 감사합니다.

+0

프레임 워크를 사용하고 있습니까? 순수한 캔버스를 사용하면 모양에 대한 개념이 없으므로 성가 시게됩니다 (pixsls 만 해당). – pimvdb

+0

프레임 워크에 대해 잘 모릅니다. 만약 당신이 위대한 것이라고 제안 할 수 있다면. 감사합니다 – Mubeen

+0

[KineticJS] (http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/)는 꽤 간단합니다. 그러나 두 캔버스간에 끌기를 지원하는지 잘 모르겠습니다. . – pimvdb

답변

0

확실히 가능합니다. 그것은 특히 쉽지는 않을 것입니다. 기본 아이디어를 드리겠습니다.

  1. 원본 모양 경계를 찾아내는 것이 좋습니다.
  2. 픽셀 데이터를 가져 와서 이전 캔버스 요소 위에 새로운 캔버스 요소를 생성하는 데 사용합니다. 드래그를 처리 할 때이 값을 사용합니다.
  3. 이 임시 캔버스에 대한 드래그 논리를 구현합니다.
  4. 대상 캔버스에서 "드롭"을 감지하고 범위가 지정된 위치를 찾습니다. 대상 픽셀 데이터를 드래그 가능한 데이터로 바꿉니다.
  5. 드래그 가능한 캔버스를 제거하십시오.

이 정보가 도움이되기를 바랍니다.

0

귀하의 질문을 이해하지 못했을 수도 있지만 그 상황에 따라 모양을 그리지 않을 수 있습니까?

예 :

context1.drawImage(...); 
context2.drawImage(...); 

는 단순히 컨텍스트를 변경?

0

DOM 프록시 객체를 사용하여 마우스 이벤트를 포착하고 캔버스를 오버레이하는 것이 가장 쉬운 방법입니다. 질문의 코드가 라이브러리 사용을 고려 매우 복잡하기 때문에 :

캔버스에 캔버스에서 http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

은 아직도 당신이 사용 사례는 매우 드문 경우로, youself을 알아 내기 위해해야 ​​할 일이고 당신은 애니메이션을 할 필요가 끌기가 캔버스에 있지 않을 때의 객체입니다. 확실히 가능하지만 극단적 인 복합체.

관련 문제