canvas - 使用 EaselJS 的无限 Canvas

Question

有没有办法用 EaselJS 显示无限 Canvas ？我已经阅读了使用 Javascript 或 JQuery 执行此操作的方法，但是有什么方法可以使用 EaselJS 进行管理吗？

谢谢!

Answer 1

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

主要步骤是:

监听某物的 mousedown 事件。您应该在任何显示对象上使用内置的 EaselJS 事件。您不能使用舞台事件“stagemousedown”，因为它不会公开您需要的拖动事件，并且 Canvas 上的 DOM 事件也没有任何帮助。

事件处理程序包含的鼠标事件将调度额外的拖放事件。为“mousemove”和“mouseup”添加监听器。

响应鼠标移动事件以移动 Canvas 上的内容。

我拼凑了一个小尖刺来展示这一点。
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 的 NEXT 版本(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;
});