Question

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

我想要做的是创建一个具有以下参数的函数（在js中）：

圈子的位置
半径
和哪个面板是平行于
轴倾斜

这是我用来创建一个简单圆圈（没有透视）的功能

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

我从一个未发表的项目中抽出一些东西，并希望它对你有意义。

假设您有两个三点的tupples，描述两个三角形，找到两者之间的变换矩阵。 - 他们可以描述围成一个圆圈的正方形，如下所示：

从两个点列表生成转换矩阵：

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命令描述为对象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
    };
};

绘制圆形svg正交投影

1 个答案: