使用EaselJS的无限画布

Question

有没有办法用EaselJS显示无限的画布？我读过使用Javascript或JQuery的方法，但是有没有办法用EaselJS来管理它呢？

谢谢!

Answer 1

您可以使用JavaScript/jQuery拖放画布本身--但是在EaselJS内容上有一个内置的拖放模型。查看examples文件夹中的DragAndDrop示例。

主要步骤如下：

• 侦听某个事物上的mousedown事件。您应该对任何显示对象使用内置的EaselJS事件。你不能使用stage事件"stagemousedown"，因为它不会暴露你需要的拖拽事件，而且画布上的DOM事件也不会有任何帮助。
• 事件处理程序包含的鼠标事件将调度额外的拖放事件。为鼠标移动事件添加"mousemove“的侦听器和"mouseup".
• Respond，以便在画布上移动内容。

我拼凑了一个小钉子来展示这个。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中推出)有一个全新的拖放模型，使用起来更容易。新的冒泡事件模型允许你只需在任何对象上附加按下和按下事件，就可以在任何人按下一个对象，然后进行拖动操作时获取事件。

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;
});