Draw circle svg orthogonal projections

问题

I need to get the svg path of a circle projected in a orthogonal space. Example

What I want to do is create a function(in js) that has the following parameters:

the position of the circle
the radius
and what panel is the circle parallel to
axes inclination

This is the function I use to create a simple circle (without perspective)

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";
}

I don't want to approximate the circle creating thousands of points and projecting them all, I want to have a path the accurately describes the projected circle

What can I do?

回答1:

I'm pulling something from an unpublished project and hope it makes sense for you.

Suppose you have two tupples of three points, describing two triangles, find the transform matrix between the two. - They could describe the square enclosing a circle, like this:

Generate the transformation matrix from two point lists:

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 });
}

Now, if you have an absolute arc command described as an object arc

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

the transformation could be applied like this:

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
    };
};

来源：https://stackoverflow.com/questions/48252112/draw-circle-svg-orthogonal-projections

标签

javascript

svg

geometry

orthogonal