Перетащите в Mozilla холст

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

jCanvas Для рисования любых простых и даже сложных фигур

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

Они оба отзывчивы и совместимы.

Answer 3

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

ЛМК, если это поможет!

Следующие шаги могут помочь:
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. После этого добавьте обработчики мыши (mousedown, mousemove, mouseup) / touchhandlers (touchdown, touchmove, touchup) на холст и обработайте движение соответствующим образом.