javascript - 无法使用 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() 函数，您将能够通过鼠标创建折线。对于演示转到此 link .

问题:现在您看到通过添加draw() 我们可以创建所有svg elements通过鼠标点击。通过使用相同的策略，我想做自由手绘。我正在为它使用 path svg 元素，但它对我不起作用。

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

上面一行给出了这个错误:

如果 svg.draw.js 支持矩形 (draw.rect())、折线 (draw.polyline()) 等，那么为什么不支持路径呢？我想创建类似 this 的东西, 但这个免费的手绘片段在 d3.js 我想用 svg.draw.js 来做。任何帮助将不胜感激。

Answer 1

正如您提到的使用此库，您只能通过鼠标绘制线条、矩形或圆形等。 svg.draw.js 没有类似Draw.path()的东西。