無限畫布與EaselJS

Question

有沒有什麼方法可以用EaselJS顯示無限畫布？我已經閱讀了使用Javascript或JQuery來完成它的方法，但有什麼方法可以用EaselJS來管理它嗎？

謝謝！

Answer 1

您可以使用JavaScript/jQuery拖放畫布本身 - 但在EaselJS內容上有一個內置的拖放模型。查看示例文件夾中的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) 
} 

希望它能幫助！

編輯：EaselJS的下一個版本（0.7.0+，自2013年8月起在GitHub上提供）具有全新的拖放模型，甚至更易於使用。 新的冒泡事件模型讓你只需在任何物體上附加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; 
});