SVG.js 库 - 无法使用 draw.path 绘制曲线

Question

我正在使用 SVG.js 库在 JavaScript 中绘制曲线。为此，我使用了以下代码

var x1 = parseInt(left_bulb[i]) + 4;
               var y1 = parseInt(top_bulb[i]) + 16
               var x2 = parseInt(left_bulb[i]) + 4;
               var y2 = parseInt(top_bulb[i]) + 16
               var x3 = parseInt(left_bulb[i]) + 16 - 1;
               var y3 = parseInt(top_bulb[i]);
               var x4 = parseInt(left_bulb[i]) + 16 + 4;
               var y4 = parseInt(top_bulb[i]) + 16 - 1;
    draw.path('M x1,y1 C x2,y2 x3,y3 x4,y4').stroke({width:3, color:"#000000"});

下面的 draw.path() 代码工作正常。当给出直接数字但不适用于 x1、y1...等变量时，此函数工作正常。你能告诉我如何让它与给定的变量一起工作吗？它没有给出上面代码的曲线。

var path = draw.path('M100,200 C100,100 400,100 400,200 H 500 V 400 Z')
            .stroke({width:9, color:"#f23"})
            .fill('orange')

Answer 1

您需要评估参数。目前您只是创建一个包含字符 x1、y1 等的字符串。

var x1 = parseInt(left_bulb[i]) + 4;
var y1 = parseInt(top_bulb[i]) + 16
var x2 = parseInt(left_bulb[i]) + 4;
var y2 = parseInt(top_bulb[i]) + 16
var x3 = parseInt(left_bulb[i]) + 16 - 1;
var y3 = parseInt(top_bulb[i]);
var x4 = parseInt(left_bulb[i]) + 16 + 4;
var y4 = parseInt(top_bulb[i]) + 16 - 1;
draw.path('M ' + x1 + ',' + y1 + ' C ' + x2 + ',' + y2 + ' ' + x3 + ',' + y3 + ' ' + x4 + ',' + y4).stroke({width:3, color:"#000000"});

SVG.js 库 - 无法使用 draw.path 绘制曲线

SVG.js library - could not draw a curve using draw.path

javascript

svg

svg.js