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

希望它有所帮助！

编辑：NEXT版本的EaselJS（自2013年8月开始在GitHub中提供的0.7.0+）拥有一个更易于使用的全新拖放模型。 新的冒泡事件模型允许您在任何对象上附加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;
});

EaselJS无限帆布

1 个答案: