无限画布与EaselJS [英] Infinite canvas with EaselJS

问题描述

有什么方法可以用EaselJS显示无限画布？我已经阅读了使用Javascript或JQuery的方法，但是有什么方法可以用EaselJS来管理它。

谢谢！

解决方案

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

主要步骤如下：

• 在 >某物。您应该对任何显示对象使用内置的EaselJS事件。您不能使用阶段事件stagemousedown，因为它不会公开您需要的拖动事件，并且Canvas上的DOM事件将不会有任何帮助。


• 事件处理程序包含的鼠标事件将调度拖放的其他事件。添加mousemove和mouseup的监听器。


• 响应鼠标移动事件以在画布上移动内容。

我扔了一个小穗来显示这个。
http://jsfiddle.net/lannymcnie/jKuyy/1/ p>

它绘制了一堆内容，然后你可以拖动它。红色框是听到鼠标事件，但它只是移动一个大容器与所有的内容。

这里是亮点：

  dragBox.addEventListener（mousedown，startDrag）; //对象监听鼠标按下
 
函数startDrag（event）{
 //获取偏移量（此处未显示，请参阅fiddle）
 event.addEventListener（mousemove，doDrag ）; 
} 
 function doDrag（event）{
 //使用event.stageX和event.stageY（新鼠标坐标）重新定位内容
} 
  
 
 
 
希望它有帮助！
 
 
 
 编辑：NEXT版本的EaselJS （0.7.0+，自2013年8月起在GitHub上推出）具有全新的拖放模型，更易于使用。 
新的冒泡事件模型让您只需将pressmove和pressup事件
  dragBox.on（pressmove， function（event）{
 //注意``on'方法自动将范围设置为调度对象
 //除非你传递一个作用域参数
 this.x = event.stageX ; 
 this.y = event.stageY; 
}）; 
  
 
Is there any way to display an infinite canvas with EaselJS? I have read the ways to do it with Javascript or JQuery, but is there any way to manage it with EaselJS?

Thanks!
解决方案
You can drag/drop the canvas itself using JavaScript/jQuery - but there is a built-in drag-and-drop model on EaselJS content. Check out the DragAndDrop samples in the examples folder. 

The main steps are:


Listen for a mousedown event on something. You should use the built-in EaselJS events on any display object. You can't use the stage event "stagemousedown", because it doesn't expose the drag events you need, and the DOM events on Canvas won't be of any help.
The mouse event that the event handler contains will dispatche additional events for drag and drop. Add listeners for "mousemove", and "mouseup".
Respond to the mouse move event to move content on the canvas.


I threw together a little spike to show this. 
http://jsfiddle.net/lannymcnie/jKuyy/1/

It draws a bunch of content, and then you can drag it around. The red box is what listens to the mouse events, but it then just moves a big container with all the content.

Here are the highlights:
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)
}
Hope it helps!

Edit: The NEXT version of EaselJS (0.7.0+, available in GitHub since August, 2013) has a brand new drag and drop model that's even easier to use.
The new bubbling event model lets you just attach pressmove and pressup events on any object to get events any time someone presses an object, then makes a dragging action.
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！