【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

SVG Path - 弧形

Path 提供指令 A 以支援弧線的描繪,弧線透過楕圓形定義,可以想像成特定楕圓形上的某個曲段線條,以下的圖形是以指令 A 描繪的弧線。



這個輸出圖形中,藍色弧線由 path 標籤中的 A 指令描繪而成,為了方便說明,標示淺藍色線條的楕圓形作為描繪弧線的參考,紅色圓圈表示弧線的起始座標位置,黃色圓圈則是弧線的結束座標位置,這兩個座標位置可以指定為楕圓框線上的任何位置。 

除了起始與結束座標,我們需要描繪弧線的參考楕圓形,其中的 x 半徑以及 y 半徑。以下是輸出楕圓形以及弧線設定配置:

<svg style="background-color:#ecf0fc;" width="600" height="250">
    <ellipse cx="300" cy="150" rx="100" ry="50" 
             fill="none" stroke="#c6d2f6" stroke-width="16" />
    <path d="
             M 300,100
             A 100,50 0,0,1 400,150 
            " fill="none" stroke="#4169e1" stroke-width="4" />

    <circle cx="300" cy="100" r="6" stroke="red" stroke-width="1" fill="none" />
    <circle cx="400" cy="150" r="6" stroke="yellow" stroke-width="1" fill="none" />
</svg>

在 path 標籤中,M 首先移至弧線開始的座標點 (300,250) ,輸出結果中紅色圓圈標示的位置,接下來 path 標籤中,指令 A 後續有七個參數,從第一個開始, 100 是楕圓形的 x 半徑 rx ,相當於 ellipse 標籤中的 rx 屬性, 50 是 y 半徑相當於 ry ,接下來的三個參數稍後作說明,而 400 與 150 則是弧線終點座標,也就是黃色圓圈標示的位置。

到目前為止討論的內容,為了方便理解,僅表示了楕圓形與弧線的構成觀念,事實上只有四組資訊(楕圓形 x,y 半徑,起始座標與終點座標),可能描繪出的楕圓形非常多,想要明確的定義出想要的弧線,還需要 A 指令中的三組參數,以下是 A 指令的定義:

A rx,ry, x-axis-rotation, large-arc-flag, sweep-flag, x,y

前兩個參數 rx 與 rx ,以及最後兩個參數 x 與 y ,已針對原理作過說明,而第三個參數 x-axis-rotation 是楕圓形旋轉的角度,透過旋轉,我們可以得到更多的弧線,不過這在一般的弧線描繪上比較少用,先將將其定義為 0 即可。在不考慮旋轉角度將其設為 0 的情形下,前述範例提供的四組資訊,包含 x 半徑以及 y 半徑,曲線起始座標與終點座標,事實上可能構成形四種弧線,如下圖:

在不考慮旋轉角度將 x-axis-rotation 設為 0 的情形下,前述範例提供的四組資訊,包含 x 半徑以及 y 半徑,曲線起始座標與終點座標,事實上可能構成四種弧線,以不同的顏色標示以利辨識,如下圖:



這四種弧線組合成兩種可能的楕圓形,而指定 large-arc-flag 與 sweep-flag 兩組參數,可以決定要描繪的曲線段。

large-arc-flag 的值可能是 0 或 1 ,表示要描繪大弧或小弧, 0 是小弧而 1 是大弧。

sweep-flag 的值可能是 0 或 1 , 0 會從起始座標逆時針移動至終點座標, 1 則是以順時針方向移動。

<path d="M300,100 A100,50 0 0,1 400,150"
      fill="none" stroke="#e14169" stroke-width="6" />

以上是前述配置的 path ,其中第四組參數是 0 表示小弧,第五組參數 1 表示順時針方向。



在輸出結果中,我們看到弧線從紅色圓圈標示的起始點開始,小弧以順時針方向描繪至黃色圓圈終點。

<path d="M 300,100 A 100,50 0 0,0 400,150"
      fill="none" stroke="#e4169e1" stroke-width="6" />

修改其中的第五組參數,將其調整為 0 ,得到以下的輸出結果;



這一次描繪的是曲線是以逆時鐘方向,從紅色圓圈描繪至黃色圓圈終點。

以下是另外一組可能的弧線配置:



這是將第四個參數設為 1 ,第五個參數設為 0 的輸出結果,如下式:

<path d="M 300,100 A 100,50 0 1,0 400,150"
      fill="none" stroke="#69e141" stroke-width="6" />

最後這一組可能的輸出,則是順時鐘方向的大弧:



此輸出必須第四個以及第五個參數均設為 1 。

<path d="M 300,100 A 100,50 0 1,1 400,150"
      fill="none" stroke="#e1b941" stroke-width="6" />

我們可以利用弧線的技巧來描繪圓餅圖,構成圓餅圖必須是正圓形弧線,因此只要將前兩個表示 x,y 半徑的參數值設定為相同即可。以下為利用弧線描繪的模擬圓餅圖。



來看其中配置的程式碼,為了簡化說明,其中預先配置一組 circle 作為底圖:

<svg style="background-color:#ecf0fc;" width="460" height="300">

    <circle cx="150"  cy="150" r="100" fill="#4169e1"  />
    <path d="M150,50  A 100,100 0 0 1 236.6,100  L150,150 " fill="#e14169"  />
    <path d="M236.6,100  A 100,100 0 0 1 250,150  L150,150 " fill="#69e141"  />

</svg>

根據circle 中的屬性設定,圓心座標為 (150,150) ,而半徑則是 100 ,不描繪框線以指定的 fill 屬性顏色圖形。

接下來的 path 移動至圓心正上方框線的座標點(150,50),延著圓框線以順時針方向,利用 A 指令描繪一條弧線至 (236.6,100) ,再以 L 描繪一條直線至圓心座標(150,150),透過 fill 屬性封閉圖形呈現比例區塊。

第一組 path 則先移動至前一個 path 的終點 (236.6,100) ,然後建立另外一個比例區塊,原理相同。

這是最簡單的圓餅圖模擬配置,要特別注意,在真正的實作上,並不建議直接以 path 實作統計圖表,在複雜的數據呈現上會相當麻煩,這裏僅作 SVG 功能示範,後續在真正的實作上,我們將進一步導入 D3 進行相同的實作。



沒有留言: