Перетаскивание в холсте mozilla

Question

Я хочу реализовать панель рисования (аналогичная, но меньшая версия для того, что visio дает для блок-схем) в холсте mozilla.

Есть ли поддержка для этого?

Я до сих пор использовал jQuery для создания прямоугольников и перемещения их вокруг. Хотя это легко здесь ... Создание линий (связей между объектами) - настоящая боль. Я использую грубый способ цветного пикселя в пикселях в javascript, и он не выглядит хорошим и масштабируемым, а также мне нужно построить множество функций, чтобы соединения подключались к множеству объектов и т. Д.

Кто-нибудь знает если полотно и функции, доступные там, облегчат мне жизнь.

Любые указания на то, что является лучшим решением в этом случае. (Я надеюсь, что это не апплет)

Заранее спасибо.

Answer 1

Пожалуйста, перейдите по этой ссылке: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

LMK, если это помогает!

Следующие шаги могут помочь:
1. Создать и добавить холст в DOM:
var myCanvas = document.createElement('canvas'); document.body.appendChild(myCanvas);
2. Установите ширина-высота холста:
myCanvas.width=200; myCanvas.height=200;
3. Получить контекст холста и начать рисовать на нем:
var gc = myCanvas.getContext('2d');
4. Код нарисовать прямоугольник:
gc.strokeRect(50,50,50,50);
5. После этого добавьте mousehandlers (мо usedown, mousemove, mouseup)/touchhandlers (touchdown, touchmove, touchup) на холсте и обрабатывать движение соответственно.

Answer 2

Да, вы можете использовать холст для этого. Рисование простых форм и масштабирование их довольно просто.

Но если вам нужно отредактировать фигуры после того, как вы их нарисовали, вам придется инвестировать еще одну работу. Холст рисует так называемый «немедленный режим», а это значит, что он не знает, что вы нарисовали сразу после того, как вы его нарисовали. Он не отслеживает окрашенные фигуры. Если вам это нужно, вам придется реализовать это самостоятельно.

Я сделал это с помощью функции isPointInPath(), которая может быть использована для проверки, если пользователь нажимает на определенную точку. Я отслеживаю свои окрашенные объекты с помощью MVC-Pattern (Model-View-Controller), чтобы я мог узнать, на какую фигуру нажали.

Другой альтернативой может быть fabrics.js, который должен быть очень близок к тому, что вам нужно.

Answer 3

Любой из этих JQuery плагинов отлично подходят для рисования панелей:

jCanvas Для нанесения каких-либо простых и даже сложных форм

sketch.js для рисования в целом.

Они оба реагируют и совместимы.