Перетащите объекты на холст

Question

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

Answer 1

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

Вы можете создавать перетаскиваемые изображения следующим образом:

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

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

EDIT

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

Еще одна вещь, которую вы, возможно, захотите проверить, это easeljs в стиле AS3 ... mouseEvents, перетаскивание и т. Д.

Answer 2

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

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

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

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

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

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

• http://developer.yahoo.com/yui/examples/dragdrop/dd-region.html
• http://www.redsquirrel.com/dave/work/interactivecanvas/
• http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html

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

Answer 3

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

Вот ссылка html5canvastutorials

Answer 4

Canvas и jCanvas

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

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

РисованиеСтрелка между двумя элементами.

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

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

JP

Answer 5

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

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