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"});