javascript - 如何将arcto转换为贝塞尔曲线？

Question

2 个函数(HTML5 Canvas):

• arcTo(x1, y1, x2, y2, 半径);
• arcTo(x1, y1, x2, y2, rx, ry, 旋转);

如何转换为贝塞尔(或二次)曲线？

谢谢。

Answer 1

谢谢=)。

var from = [200,200],
    to   = [400,300],
    tan  = [300,300], // tangent
    rad  = 50; // radius

var line = [
    from,
    computeVec(tan[0], tan[1], -tan[0]*2, -tan[1]*2, rad)
];

var quad = [
    tan,
    computeVec(tan[0], tan[1], to[0], to[1], rad)
];

ctx.moveTo(line[0][0], line[0][1]);
ctx.lineTo(line[1][0], line[1][1]);
ctx.bezierCurveTo(quad[0][0], quad[0][1], quad[0][0], quad[0][1], quad[1][0], quad[1][1]);

function computeVec(tanx, tany, x, y, rad){
    x -= tanx;
    y -= tany;
    var hypotenuse = Math.sqrt(x * x + y * y),
        proportion = rad / hypotenuse;
    return [
        tanx + (x * proportion),
        tany + (y * proportion)
    ];
}