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

2、问题分析

要实现图中的弧线，需要计算path的d属性，需要确定的元素有：起始点（startX, startY），rx，ry，终止点（x, y）

在本例中，起始点是确定的

startX =

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