Перетаскивание объектов в canvas

Im ищет простой в использовании метод присвоения поведения перетаскивания нескольким объектам (изображениям, фигурам и т. д.) В canvas. Кто-нибудь имеет хороший способ или знает какие-либо библиотеки для перетаскивания объектов? Спасибо

14
canvas drag draggable html5

5 ответов

создание собственных событий мыши требует небольшой работы-в идеале вы должны либо создать, либо использовать какую-то мини-библиотеку. Я думаю создать что-то подобное в ближайшем будущем. В любом случае, я создал демо - версию перетаскивания на jsFiddle, показывающую, как перетаскивать изображения -можно посмотреть здесь.

вы можете создавать перетаскиваемые изображения, такие как:

var myImage = new DragImage(sourcePath, x, y);

Дайте мне знать, если у вас есть какие-либо вопросы об этом. Надеюсь на это. помогает.

редактировать

произошла ошибка при перетаскивании нескольких изображений. вот новая версия.

еще одна вещь, которую вы можете проверить, это easeljs это своего рода в стиле AS3... события mouseevent перетаскивание и т. д...

18

HTML Canvas-в отличие от SVG или HTML-использует не сохраняется (или немедленно) графический API. Это означает, что когда вы рисуете что-то (например, изображение) на холсте, никакого знания об этой вещи не остается. Единственное, что осталось, это пиксели на холсте, смешанные со всеми предыдущими пикселями. Вы не можете перетащить подмножество пикселей; во-первых, пиксели, которые были " под " них ушли. Что вам нужно сделать, это:

  1. трек mousedown событие и посмотрите, находится ли он в "правильном" месте для перетаскивания. (Вам нужно будет отслеживать, какие изображения / объекты находятся там и выполнять обнаружение попадания мыши.)
  2. когда пользователь перетаскивает мышь, перерисуйте весь холст с нуля, рисуя изображение в новом месте каждый раз на основе смещения между текущим местоположением мыши и начальным местоположением mousedown.

некоторые альтернативы, которые я мог бы предложить:

  • SVG
  • чистый HTML-код
  • несколько слоистых холстов и перетащите один прозрачный холст на другой.

HTML Canvas хорош для многих вещей. Взаимодействие пользователя с" элементами", которые кажутся отличными (но не являются), не является одной из этих вещей.

обновление: вот несколько примеров, показывающих перетаскивание холст:

однако ни один из них не создал отдельную библиотеку для отслеживания ваших фигур.

13

KineticJS - одна из таких библиотек Javascript, которую можно использовать исключительно для анимации

вот ссылка html5canvastutorials

4

холст и jCanvas

вы определенно захотите проверить jCanvas. Это супер чистая обертка для холста, которая открывает много дверей без добавления сложности кода. Это превращает такие вещи в легкий ветерок.

например, вот небольшая песочница чего-то близкого к тому, что вы ищете, с перетаскиванием и перерисовкой, встроенной прямо в:

рисование стрелки между двумя Элементы.

Drawing an arrow

Я рискнул сделать все с DIVs и jQuery, но он всегда не хватало интерактивности и качества.

надеюсь, что это поможет другим, как я.

JP

2

когда вы создаете новые объекты, будь то окна, карты, фигуры или изображения, которые можно перетаскивать, вы можете хранить их в массиве "объекты в настоящее время не выбраны". Когда вы нажимаете на них или выбираете их или начинаете перетаскивать, вы можете удалить их из массива "объекты не выбраны". Таким образом, вы можете управлять тем, что может перемещаться в случае определенного события mousedown или mousemove, проверяя, не выбран ли он. Если он выбран, он не будет находиться в массиве "не выбран" и вы можете перемещать указатель мыши по другим фигурам при перетаскивании фигур без их перетаскивания.

создание массивов объектов, которые вы хотите перетащить и помогает с иерархией. Canvas рисует пиксели, принадлежащие последнему переднему объекту. Поэтому, если объекты находятся в массиве, вы просто переключаете их экземпляр, как в элементе в массиве, скажем, из objectArray[20] в objectArray[4] , Когда вы перебираете массив и рисуете объекты, хранящиеся в элементах массива, вы можете изменить видны ли другие объекты сверху или позади других объектов.

1