svg路徑畫圓的特性：(rx ry x-axis-rotation large-arc-flag sweep-flag x y)。
rx前计，ry: 是橢圓的兩個半軸的長度胞谭。
x-axis-rotation: 是橢圓相對于坐標(biāo)系的旋轉(zhuǎn)角度，角度數(shù)而非弧度數(shù)男杈。
large-arc-flag: 是標(biāo)記繪制大弧(1)還是小弧(0)部分丈屹。
sweep-flag: 是標(biāo)記向順時針(1)還是逆時針(0)方向繪制。
x伶棒，y: 是圓弧終點(diǎn)的坐標(biāo)旺垒。
已知兩點(diǎn)和半徑求弧路徑。
/*
兩點(diǎn)加半徑生成圓弧的路徑
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}` // 對比圓的特性
}
已知圓上兩點(diǎn)和半徑求弧長先蒋。
/*
p1: 圓上的坐標(biāo)點(diǎn)[x,y]
p2: 圓上的坐標(biāo)點(diǎn)[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
// 反正弦 得到度數(shù)*2
let asin = Math.asin(sinValue)*180/Math.PI*2
let leng = Math.PI*r*asin/180
return leng
}
已知圓上的y軸半徑和圓心求相交的x軸坐標(biāo)。
/*
y: y坐標(biāo)
r: 半徑
mindPoint: 圓心坐標(biāo)
*/
function getArcX(y, r, mindPoint) {
// x = Math.sqrt(r2 - (y - b)2) + 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軸坐標(biāo)宛渐。
/*
x: x坐標(biāo)
r: 半徑
mindPoint: 圓心坐標(biāo)
*/
function getArcY(x, r, mindPoint) {
// (x - a)2 + (y - b)2 = r2 //弧坐標(biāo)公式 (a,b)圓心坐標(biāo)
// y = Math.sqrt(r2 - (x - a)2) + b
let arcMindY = Math.sqrt(Math.pow(r,2) - Math.pow(x - mindPoint[0],2)) + mindPoint[1]
return arcMindY - 2*(arcMindY - mindPoint[1])
}
