svg路径画圆的特性：(rx ry x-axis-rotation large-arc-flag sweep-flag x y)。
rx，ry: 是椭圆的两个半轴的长度。
x-axis-rotation: 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。
large-arc-flag: 是标记绘制大弧(1)还是小弧(0)部分。
sweep-flag: 是标记向顺时针(1)还是逆时针(0)方向绘制。
x，y: 是圆弧终点的坐标。
已知两点和半径求弧路径。
/*
两点加半径生成圆弧的路径
sweepFlag: 1顺时针(从左到右)，0逆时针(从右到左)
*/
function getArcPath(p1, p2, r, sweepFlag = 1) {
let L = Math.abs(p1[0] - p2[0])
let rotateL = -(p1[1] - p2[1])
if (sweepFlag === 0) L = -L
return `a${r},${r} 0 0,${sweepFlag} ${L},${rotateL}` // 对比圆的特性
}
已知圆上两点和半径求弧长。
/*
p1: 圆上的坐标点[x,y]
p2: 圆上的坐标点[x,y]
r: 半径
*/
function getArcLeng(p1, p2, r) {
// p1 p2 的距离
let pLeng = Math.sqrt(Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2))
// 正弦值 一半
let sinValue = (pLeng/2)/r
// 反正弦 得到度数*2
let asin = Math.asin(sinValue)*180/Math.PI*2
let leng = Math.PI*r*asin/180
return leng
}
已知圆上的y轴半径和圆心求相交的x轴坐标。
/*
y: y坐标
r: 半径
mindPoint: 圆心坐标
*/
function getArcX(y, r, mindPoint) {
// x = Math.sqrt(r² - (y - b)²) + a
let arcMindX = Math.sqrt(Math.pow(r,2) - Math.pow(y - mindPoint[1],2)) + mindPoint[0]
return {
leftPoint: arcMindX - 2*(arcMindX - mindPoint[0]),
rightPoint: arcMindX
}
}
已知圆上的x轴半径和圆心求y轴坐标。
/*
x: x坐标
r: 半径
mindPoint: 圆心坐标
*/
function getArcY(x, r, mindPoint) {
// (x - a)² + (y - b)² = r² //弧坐标公式 (a,b)圆心坐标
// y = Math.sqrt(r² - (x - a)²) + b
let arcMindY = Math.sqrt(Math.pow(r,2) - Math.pow(x - mindPoint[0],2)) + mindPoint[1]
return arcMindY - 2*(arcMindY - mindPoint[1])
}
