d3.js画圆弧和圆的坐标、弧长计算方法

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])
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容