Перетаскивать объекты в холст
Я ищу простой в использовании метод назначения поведения перетаскивания нескольким объектам (изображениям, фигурам и т.д.) в холсте. Кто-нибудь имеет хороший способ или знает какие-либо библиотеки для перетаскивания объектов? Благодаря
Ответы
Ответ 1
Создание собственных событий мыши требует небольшой работы - в идеале вы должны либо создавать, либо использовать какую-то мини-библиотеку. Я думаю о создании чего-то подобного в ближайшем будущем. Во всяком случае, я создал демонстрацию drag and drop на jsFiddle, показывающую, как перетаскивать изображения - вы можете просмотреть его здесь.
Вы можете создавать перетаскиваемые изображения следующим образом:
var myImage = new DragImage(sourcePath, x, y);
Сообщите мне, если у вас есть какие-либо вопросы по этому поводу. Надеюсь, что это поможет.
ИЗМЕНИТЬ
При перетаскивании нескольких изображений произошла ошибка. Вот новая версия.
Еще одна вещь, которую вы, возможно, захотите проверить, - easeljs, она похожа на стиль AS3... mouseEvents перетаскивание и т.д.
Ответ 2
HTML Canvas - в отличие от SVG или HTML - использует не-сохраненный (или немедленный) графический API. Это означает, что когда вы рисуете что-то (например, изображение) на полотне, никаких знаний об этом не осталось. Осталось только пиксели на холсте, смешанные со всеми предыдущими пикселями. Вы не можете перетаскивать подмножество пикселей; во-первых, исчезли пиксели, которые были "под". Что вам нужно сделать:
- Отслеживать событие
mousedown и посмотреть, находится ли он в правильном месте для перетаскивания. (Вам нужно будет следить за тем, какие изображения/объекты есть и выполнять обнаружение попадания мыши.)
- Когда пользователь перетаскивает мышь, перерисовывайте весь холст с нуля, каждый раз рисуя изображение в новом месте на основе смещения между текущим местоположением мыши и начальным местоположением мыши.
Некоторые альтернативы, которые я мог бы предложить:
- SVG
- Чистый HTML
- Многослойные холсты и перетащите один прозрачный холст поверх другого.
HTML Canvas хорош для многих вещей. Пользовательское взаимодействие с "элементами", которые кажутся разными (но не являются), не является одной из этих вещей.
Обновить. Вот несколько примеров, показывающих перетаскивание на холст:
Однако ни одна из них не создала отдельную библиотеку для отслеживания ваших фигур для вас.
Ответ 3
KineticJS - одна из таких Javascript-библиотек, которую вы можете использовать исключительно для анимаций
Вот ссылка html5canvastutorials
Ответ 4
Вы определенно захотите проверить jCanvas. Это супер чистая обертка для Canvas, которая открывает много дверей без добавления сложности кода. Это делает такие вещи ветерок.
Например, здесь небольшая песочница чего-то близкого к тому, что вам нужно, с перетаскиванием и перерисовкой, построенной прямо в:
![Drawing an arrow]()
Я отважился по пути делать все с DIV и jQuery, но он всегда не соответствовал интерактивности и качеству.
Надеюсь, что это помогает другим, как и я.
В JP
Ответ 5
Когда вы создаете новые объекты, будь то окна, карты, фигуры или изображения, которые можно перетаскивать, вы можете хранить их в массиве "объектов, которые в настоящее время не выбраны". Когда вы нажимаете на них или выбираете их или начинаете перетаскивать их, вы можете удалить их из массива "объектов, которые не выбраны". Таким образом, вы можете контролировать, что может двигаться в случае события mousedown или mousemove, проверяя, не выбран ли он. Если он выбран, он не будет находиться в массиве "не выбран", и вы можете переместить указатель мыши на другие фигуры, перетаскивая фигуры без их перетаскивания.
Создание массивов объектов, которые вы хотели бы перетащить, также помогает с иерархией. Холст берет пиксели, принадлежащие первому объекту, последнему. Поэтому, если объекты находятся в массиве, вы просто переключаете свой экземпляр, как в элементе массива, от объекта objectArray [20] до objectArray [4], когда вы перебираете массив и рисуете объекты, хранящиеся в элементах массива, вы можете изменить, объекты видны сверху или позади других объектов.
