522662_zh-TW

liliconcom

使用 SVG 路徑字符串製作貝塞爾曲線

我有兩個以相同方式構造的 SVG 路徑。

 

a = "M 10 60 C 20 80 40 80 50 60";
b = "M 0 -150 C 82.8 -150 150 -82.8 150 0";

'a' 的快速繪圖顯示以下弧線

 

New Window( "JMP 8PFU Layout Example",
 Graph Box(
  frameSize( 500, 500 ), 
  xScale(-175,175),
  yScale(-175,175),
  penColor("blue");
  penSize(2);
  path(a, 0);
 );
);

但是，當我嘗試繪製“b”時出現錯誤

 

DisplayBox[EvalContextBox]
argument value is invalid in access or evaluation of 'Path' , Bad Argument( b ), Path/*###*/(b, 0)

New Window( "JMP 8PFU Layout Example",
 Graph Box(
  frameSize( 500, 500 ), 
  xScale(-175,175),
  yScale(-175,175),
  penColor("blue");
  penSize(2);
  path(combined, 0);
 );
);

如果我在曲線中添加一個“閉合”字符“z”，它會繪製線段，將“線”返回到原點。 這行得通，但不是我想要的——我只想要弧線。

 

b = "M 0 -150 C 82.8 -150 150 -82.8 150 0 z";

我的終極目標是結合 4 條弧線來近似一個圓

 

tr = "M 0  150 C  82.8  150  150  82.8  150 0 z";
br = "M 0 -150 C  82.8 -150  150 -82.8  150 0 z";
bl = "M 0 -150 C -82.8 -150 -150 -82.8 -150 0 z";
tl = "M 0  150 C -82.8  150 -150  82.8 -150 0 z";

combined = "M 0  150 C  82.8  150  150  82.8  150 0 z M 0 -150 C  82.8 -150  150 -82.8  150 0 z M 0 -150 C -82.8 -150 -150 -82.8 -150 0 z M 0  150 C -82.8  150 -150  82.8 -150 0 z";

New Window( "JMP 8PFU Layout Example",
 Graph Box(
  frameSize( 500, 500 ), 
  xScale(-175,175),
  yScale(-175,175),
  penColor("blue");
  penSize(2);
  path(combined, 0);
 );
);

 

同樣，當我刪除“z”字符時，我得到了同樣的錯誤。

 

 

為了完整起見，我在網絡瀏覽器中嘗試了這個組合字符串，刪除了“z”字符並正確呈現

 

< svg視圖框= “-175 -175 350 350”風格= “邊框：綠色實心；” >

<小路ID = “Wrf_Edge”中風= “黑色的”充滿= “沒有任何”筆劃寬度= “1” d = "M 0 150 C 82.8 150 150 82.8 150 0 M 0 -150 C 82.8 -150 150 -82.8 150 0 M 0 -150 C -82.8 -150 -150 -82.8 -150 0 M 0 150 C -82.8 150 -150 82.8 -150 0" />

svg >

 

 

 

 

 

其他