Бесконечное полотно с EaselJS

Question

Есть ли способ отображения бесконечного холста с помощью EaselJS? Я прочитал способы сделать это с помощью Javascript или JQuery, но есть ли способ управлять им с помощью EaselJS?

Спасибо!

Answer 1

Вы можете перетащить сам холст с помощью JavaScript/jQuery, но есть встроенная модель перетаскивания на контент EaselJS. Проверьте образцы DragAndDrop в папке примеров.

Основные шаги:

• Прослушайте событие MouseDown на что-то. Вы должны использовать встроенные события EaselJS на любом экранном объекте. Вы не можете использовать сценарное событие «stagemousedown», потому что оно не отображает требуемые события перетаскивания, а события DOM на Canvas не помогут.
• Событие мыши, которое содержит обработчик событий, будет включать дополнительные события для перетаскивания. Добавьте слушателей для «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 (0.7.0+, доступна в GitHub с августа 2013 года) имеет новую модель перетаскивания, которая еще проще в использовании. Новая модель событий пузырьков позволяет просто прикрепить события нажатия и нажатия на любом объекте, чтобы получать события в любое время, когда кто-то нажимает на объект, а затем выполняет перетаскивание.

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