有没有办法用 EaselJS 显示无限画布?我已经阅读了使用 Javascript 或 JQuery 执行此操作的方法,但是有什么方法可以使用 EaselJS 进行管理吗?
Thanks!
您可以使用 JavaScript/jQuery 拖放画布本身 - 但 EaselJS 内容有一个内置的拖放模型。查看示例文件夹中的 DragAndDrop 示例。
主要步骤是:
- 监听 mousedown 事件某物。您应该在任何显示对象上使用内置的 EaselJS 事件。您不能使用舞台事件“stagemousedown”,因为它不会公开您需要的拖动事件,并且 Canvas 上的 DOM 事件不会有任何帮助。
- 事件处理程序包含的鼠标事件将调度其他拖放事件。添加“mousemove”和“mouseup”的侦听器。
- 响应鼠标移动事件以移动画布上的内容。
我拼凑了一个小钉子来展示这一点。http://jsfiddle.net/lannymcnie/jKuyy/1/ 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;
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)