SVG.JS 畫弧線

需求描述：

使用svg.js，繪制一個弧線。下圖綠色弧線。

 

准備工作：

1、了解SVG Path中的A指令

詳細文檔，請戳這里

給定x半徑、y半徑后，經過指定的兩點，可以有2個橢圓，因此兩點間有2條弧線，一條大弧線，一條小弧線。

所以，A指令的參數設置如下：

絕對坐標

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

相對坐標

a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

 

參數說明：

• rx x半徑
• ry y半徑
• x-axis-rotation x軸旋轉角度
• large-arc-flag 1,表示大角弧度，大於180度；0,表示小角弧度，小於180度。
• sweep-flag 1,表示從起點到終點繞中心順時針方向；0,表示逆時針方向。
• x 弧線終點x坐標
• y 弧線終點y坐標

DEMO

 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
 <path d="M100 0 A100 100 0 0 1 200 100 " stroke="lime" stroke-width="3" fill-opacity="0.5" />
 <path d="M100 100 A100 100 0 1 1 200 200 " stroke="lime" stroke-width="3" fill-opacity="0.5" />    
 </svg>

 2、問題分析

要實現圖中的弧線，需要計算path的d屬性，需要確定的元素有：起始點（startX, startY），rx，ry，終止點（x, y）

在本例中，起始點是確定的

startX = 300

startY = 27.27

rx = ry = 272.73

 

那么，如何計算終止點的坐標？

x= startX + sin(d);

y= startY + cos(d);

逆時針方向則應該是減去。

 

但是，需要注意的是，在js中Math.sin()參數是弧度，而不是角度。而弧度

arc = deg * 2Math.PI / 360

 

在本例中，角度不會超過180度，所以都是小弧線，large-arc-flag=0.

最終代碼：

drawAWACurve: function () {
            
            var AWA = +this.model.get('AWA');
            
            var sweepFlag = AWA >= 0 ? 1 : 0; //1 順時針，0逆時針
            var deg = Math.abs(AWA);

            var startX = 300; var startY = 27.27;
            var r = 272.73;
            var x = 0, y = 0; //終點坐標

            // 計算終點的坐標 deg是角度,Math.sin(arc) arc = 2Math.PI / 360
            var arc = Math.sin(2 * Math.PI / 360 * deg);
            if (sweepFlag == 1) {
                x = startX + r * Math.sin(2 * Math.PI / 360 * deg);
                y = startY + r - r * Math.cos(2 * Math.PI / 360 * deg);
            } else {
                x = startX - r * Math.sin(2 * Math.PI / 360 * deg);
                y = startY + r - r * Math.cos(2 * Math.PI / 360 * deg);
            }

            var d = 'M' + startX + ' ' + startY + ' A' + r + ' ' + r + ' 0 0 ' + sweepFlag + ' ' + x + ' ' + y + ' ';
            var id = this.config.panelId + '_AWACurve';
            var pathNode = SVG.get('#' + id);
            if (!pathNode) { return; }
            var color = sweepFlag == 1 ? 'lime' : 'red';

            pathNode.attr({ 'd': d });
           
            pathNode.animate(700, '<>').attr({ 'stroke': color });

        },