javascript - 绘制圆svg正交投影

Question

我需要获取在正交空间中投影的圆的 svg 路径。 Example

我想要做的是创建一个具有以下参数的函数(在js中):

1. 圆的位置

2. 半径

3. 圆平行于哪个面板

4. 轴倾 Angular

这是我用来创建一个简单圆圈的函数(没有透视)

function getPath(cx,cy,r){
  return "M" + cx + "," + cy + "m" + (-r) + ",0a" + r + "," + r + " 0 1,0 " + (r * 2) + ",0a" + r + "," + r + " 0 1,0 " + (-r * 2) + ",0";
}

我不想近似圆创建数千个点并将它们全部投影，我想要一条准确描述投影圆的路径

我能做什么？

Answer 1

我正在从一个未发布的项目中提取一些内容，希望它对您有意义。

假设您有两个三点元组，描述两个三 Angular 形，请找到两者之间的变换矩阵。 - 他们可以描述包围圆的正方形，如下所示:

从两个点列表生成变换矩阵:

var source = [s0, s1, s2]; // each point as coordinates {x, y}
var target = [t0, t1, t2];

function generate (source, target) {
    var transform = [
        {
            a: 1, b: 0, c: 0, d: 1,
            e: target[2].x,
            f: target[2].y
        },
        {
            a: 1, b: 0, c: 0, d: 1,
            e: -source[2].x,
            f: -source[2].y
        }
    ];
    source.forEach(point => {x: point.x - source[2].x, y:  point.y - source[2].y});
    target.forEach(point => {x: point.x - source[2].x, y:  point.y - source[2].y});

    var div = source[0].x * source[1].y - source[1].x * source[0].y;
    var matrix = {
        a: (target[0].x * source[1].y - target[1].x * source[0].y) / div,
        b: (target[0].y * source[1].y - target[1].y * source[0].y) / div,
        c: (target[1].x * source[0].x - target[0].x * source[1].x) / div,
        d: (target[1].y * source[0].x - target[0].y * source[1].x) / div,
        e: 0,
        f: 0
    };
    transform.splice(1, 0, matrix);

    return transform.reduce(function (m1, m2) {
        return {
            a: m1.a * m2.a + m1.c * m2.b,
            b: m1.b * m2.a + m1.d * m2.b,
            c: m1.a * m2.c + m1.c * m2.d,
            d: m1.b * m2.c + m1.d * m2.d,
            e: m1.a * m2.e + m1.c * m2.f + m1.e,
            f: m1.b * m2.e + m1.d * m2.f + m1.f
        }
    }, { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
}

现在，如果您有一个被描述为对象arc的absolute arc命令

{ rx, ry, rotation, large, sweep, x, y }

可以像这样应用转换:

function arc_transform (transform, arc) {
    var co = Math.cos(arc.rotation/180*Math.PI),
        si = Math.sin(arc.rotation/180*Math.PI);
    var m = [
        arc.rx * (transform.a * co + transform.c * si),
        arc.rx * (transform.b * co + transform.d * si),
        arc.ry * (transform.c * co - transform.a * si),
        arc.ry * (transform.d * co - transform.b * si),
    ];
    var A = (m[0] * m[0]) + (m[2] * m[2]),
        B = 2 * (m[0] * m[1] + m[2] * m[3]),
        C = (m[1] * m[1]) + (m[3] * m[3]),
        K = Math.sqrt((A - C) * (A - C) + B * B);

    if ((transform.a * transform.d) - (transform.b * transform.c) < 0) {
        arc.sweep = !arc.sweep;
    }

    return {
        rx:  Math.sqrt(0.5 * (A + C + K)),
        ry:  Math.sqrt(0.5 * Math.max(0, A + C - K)),
        rotation: Math.abs((A - C) / B) < 1e-6 ? 90 : Math.atan2(B, A - C)*90/Math.PI,
        large: arc.large,
        sweep: arc.sweep,
        x: transform.a * arc.x + transform.c * arc.y + transform.e,
        y: transform.b * arc.x + transform.d * arc.y + transform.f
    };
};