EaselJS 的无限画布答案

【问题标题】：Infinite canvas with EaselJSEaselJS 的无限画布
【发布时间】：2013-03-29 19:12:59
【问题描述】：

有没有办法用 EaselJS 显示一个无限的画布？我已经阅读了使用 Javascript 或 JQuery 的方法，但是有什么方法可以使用 EaselJS 进行管理吗？

谢谢！

【问题讨论】：

“无限画布”是什么意思？如果您指的是舞台的大小 - 这取决于设备（大约 6k-8k 像素） - 但舞台上物体的位置几乎是无限的。 - 不确定你是不是这个意思。
@olsn 我怀疑 OP 意味着在画布绘图命令上使用转换，以便可见内容看起来“永远”在任何方向上连续滚动。
没错，@Phrogz，这就是我要找的。我看到了：stackoverflow.com/questions/7218645/… 但我想我不能让画布可拖动，可以吗？我尝试过类似 stage.onPress 的方法，但没有成功。
@Cod1ngFree 不，您不能使画布的内容可拖动（毕竟它们只是像素），但您可以跟踪鼠标和use the mouse position to adjust the context transform，在鼠标移动时重新绘制画布.

标签： canvas easeljs

【解决方案1】：

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

主要步骤是：

监听 something 上的 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 的 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;
});

【讨论】：