무한 캔버스와 EaselJS

Question

EaselJS로 무한 캔버스를 표시 할 수있는 방법이 있습니까? Javascript 나 JQuery로 그것을 수행하는 방법을 읽었지 만, EaselJS로 그것을 관리 할 수있는 방법이 있습니까?

감사합니다.

Answer 1

JavaScript/jQuery를 사용하여 캔버스 자체를 드래그/드롭 할 수 있지만, EaselJS 콘텐츠에는 드래그 앤 드롭 모델이 내장되어 있습니다. examples 폴더의 DragAndDrop 샘플을 확인하십시오.

주요 단계는 다음과 같습니다

• 는 뭔가에 mouseDown 이벤트를 수신합니다. 모든 표시 객체에 내장 된 EaselJS 이벤트를 사용해야합니다. 스테이지 이벤트 "stagemousedown"을 사용할 수 없습니다. 필요한 드래그 이벤트를 노출시키지 않기 때문에 Canvas의 DOM 이벤트는 도움이되지 않습니다.
• 이벤트 핸들러에 포함 된 마우스 이벤트는 드래그 앤 드롭에 대한 추가 이벤트를 디스패치합니다. "mousemove"및 "mouseup"에 대한 리스너를 추가하십시오.
• 마우스 이동 이벤트에 응답하여 캔버스에서 내용을 이동합니다.

나는 이것을 보여주기 위해 약간의 스파이크를 던졌다. http://jsfiddle.net/lannymcnie/jKuyy/1/

콘텐츠 묶음을 끌어다 놓은 다음 드래그 할 수 있습니다. 빨간색 상자는 마우스 이벤트를 수신하지만 모든 내용이 포함 된 큰 컨테이너를 이동합니다.

dragBox.addEventListener("mousedown", startDrag); // Object listens to mouse press 

function startDrag(event) { 
    // Get offset (not shown here, see fiddle) 
    event.addEventListener("mousemove", doDrag); 
} 
function doDrag(event) { 
    // Reposition content using event.stageX and event.stageY (the new mouse coordinates) 
} 

는 희망이 도움이 :

다음은 하이라이트!

편집 : 2013 년 8 월 이후 GitHub에서 사용할 수있는 EaselJS (0.7.0+)의 NEXT 버전은 더욱 쉽게 사용할 수있는 새로운 드래그 앤 드롭 모델을 제공합니다. 새로운 버블 링 이벤트 모델은 누군가가 오브젝트를 누를 때마다 이벤트를 얻기 위해 모든 오브젝트에서 pressmove 및 pressup 이벤트를 첨부 한 다음 드래그 조치를 수행합니다.

dragBox.on("pressmove", function(event) { 
    // Note that the `on` method automatically sets the scope to the dispatching object 
    // Unless you pass a scope argument. 
    this.x = event.stageX; 
    this.y = event.stageY; 
});