Не могу нарисовать путь, используя svg.draw.js

Question

Я делаю очень простой инструмент проектирования, используя svg.js и svg.draw.js, в котором пользователь делает простой дизайн, используя линии, полилинии, прямоугольники и рисование от руки. svg.draw.js - это расширение svg.js, которое позволяет рисовать элементы с помощью мыши.

Теперь давайте посмотрим на очень простой пример. Если мы хотим создать любую фигуру (например, полилинию), используя svg.js, мы просто делаем это так:

var draw = SVG('drawing').size(300, 300)
draw.polyline('0,0 100,50 50,100').fill('none').stroke({color:'blue'})

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js"></script>
<div id="drawing">
</div>

Чтобы нарисовать эту полилинию мышью, я использовал svg.draw.js. Это очень просто, нам нужно только включить функцию draw() этого расширения в конце приведенного выше фрагмента. Также нам не нужно указывать аргументы в функции draw.polyline().

var draw = SVG('drawing').size(300, 300);
draw.polyline().fill('none').stroke({color:'blue'}).draw()

Включив библиотеку svg.draw.js и функцию draw() в конце, вы сможете создавать полилинию с помощью мыши. Для демонстрации перейдите по этой ссылке.

ПРОБЛЕМА: Теперь вы видите это, добавив draw() мы можем создать все элементы svg щелчком мыши. Используя ту же тактику, я хочу рисовать свободной рукой. Я использую элемент пути svg для него, но он не работает для меня.

draw.path().stroke({color:'blue'}).draw()

Выше строка дает эту ошибку:

Если svg.draw.js поддерживает прямоугольники (draw.rect()), полилинии (draw.polyline()) итд тогда почему не дорожки? Я хочу создать что-то вроде этого, но этот фрагмент рисунка свободной руки находится в d3.js, и я хочу сделать это с помощью svg.draw.js. Любая помощь будет высоко ценится.

Answer 1

Вы можете только рисовать линии, прямоугольник или круг и т. Д. С помощью мыши, как вы упоминали, используя эту библиотеку. svg.draw.js ничего подобного Draw.path(),