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()的内容。