您想使用橢圓Arc命令。不幸的是，這需要你指定起點(diǎn)和終點(diǎn)的笛卡爾坐標(biāo)(x，y)而不是你擁有的極坐標(biāo)(半徑，角度)，所以你必須做一些數(shù)學(xué)運(yùn)算。這是一個應(yīng)該工作的JavaScript函數(shù)(雖然我還沒有測試過)，我希望它是相當(dāng)不言自明的：function?polarToCartesian(centerX,?centerY,?radius,?angleInDegrees)?{

var?angleInRadians?=?angleInDegrees?*?Math.PI?/?180.0;

var?x?=?centerX?+?radius?*?Math.cos(angleInRadians);

var?y?=?centerY?+?radius?*?Math.sin(angleInRadians);

return?[x,y];}

哪個角度對應(yīng)于哪個時鐘位置將取決于坐標(biāo)系;?只需交換和/或否定sin / cos術(shù)語。

arc命令具有以下參數(shù)：rx,?ry,?x-axis-rotation,?large-arc-flag,?sweep-flag,?x,?y

第一個例子：

rx=?ry= 25且x-axis-rotation= 0，因?yàn)槟阆胍粋€圓而不是一個橢圓。您可以使用上面的函數(shù)分別計(jì)算起始坐標(biāo)(您應(yīng)該過去M)和結(jié)束坐標(biāo)(x，y)，分別得出(200,175)和約(182.322,217.678)。到目前為止，鑒于這些限制，實(shí)際上可以繪制四個弧，因此兩個標(biāo)志選擇其中一個。我猜你可能想要large-arc-flag在減小角度的方向上繪制一個小弧(意思是= 0)(意思是sweep-flag= 0)。總之，SVG路徑是：M?200?175?A?25?25?0?0?0?182.322?217.678

對于第二個示例(假設(shè)您指的是相同的方向，因此是一個大弧)，SVG路徑是：M?200?175?A?25?25?0?1?0?217.678?217.678

我再次測試過這些。

(編輯2016-06-01)如果像@clocksmith一樣，您想知道他們?yōu)槭裁催x擇這個API，請查看實(shí)施說明。他們描述了兩種可能的弧參數(shù)化，“端點(diǎn)參數(shù)化”(他們選擇的那個)和“中心參數(shù)化”(這就像問題所用的那樣)。在“端點(diǎn)參數(shù)化”的描述中，他們說：端點(diǎn)參數(shù)化的一個優(yōu)點(diǎn)是它允許一致的路徑語法，其中所有路徑命令都以新的“當(dāng)前點(diǎn)”的坐標(biāo)結(jié)束。

所以基本上它是弧的副作用被視為更大路徑的一部分而不是它們自己的獨(dú)立對象。我想如果你的SVG渲染器不完整，它可以跳過它不知道如何渲染的任何路徑組件，只要它知道它們采用了多少個參數(shù)。或者它可以實(shí)現(xiàn)具有許多組件的路徑的不同塊的并行渲染。或許他們這樣做是為了確保舍入錯誤不會沿著復(fù)雜路徑的長度積累。

實(shí)現(xiàn)說明對于原始問題也很有用，因?yàn)樗鼈冇懈嗟臄?shù)學(xué)偽代碼用于在兩個參數(shù)化之間進(jìn)行轉(zhuǎn)換(我在第一次寫這個答案時沒有意識到)。

總結(jié)

以上是生活随笔為你收集整理的path弧形参数 svg_如何计算圆弧（圆弧）的SVG路径的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。