在html5画布上出乎意料的结果arcTo

当我想绘制通过三点的线条，并在第二个点上做圆角时。然后会出现问题，如果两条线之间的角度小于90度，则会通过点1和点2在线上追加一些额外的线。如果角度大于等于90度，那就没问题。在html5画布上出乎意料的结果arcTo

您可以在小提琴看到：http://jsfiddle.net/qiu8310/8cFZG/2/

这里是JavaScript代码和结果：

 

    
    "use strict"; 
     function Point(x, y){ 
     this.x = x ? x : 0; 
     this.y = y ? y : 0; 
     } 
    var ctx, 
     canvas = document.getElementById('canvas'); 
    canvas.width = 600; 
    canvas.height = 600; 

    ctx = canvas.getContext('2d'); 
    ctx.lineWidth = 2; 

    draw(ctx, new Point(50,10), new Point(20, 300), new Point(100, 320)); 
    draw(ctx, new Point(200,10), new Point(200, 300), new Point(300, 20)); 

    function draw(ctx, p1, p2, p3){ 
    var k1,k2, k, len, r=8; 
    k1 = Math.atan2(p2.y - p1.y, p2.x - p1.x); 
    k2 = Math.atan2(p3.y - p2.y, p3.x - p2.x); 
    k = (k1-k2)/2; 
    len = Math.abs(r/Math.tan(k)); // the distance between point of tangency and p2 
    ctx.moveTo(p1.x, p1.y); 
    ctx.lineTo(p2.x - len*Math.cos(k1), p2.y - len*Math.sin(k1)); // lineTo the point of tangency 
    ctx.arcTo(p2.x, p2.y, p2.x + len*Math.cos(k2), p2.y + len*Math.sin(k2), r); // then arc 
    ctx.lineTo(p3.x, p3.y); // till p3 
    ctx.stroke(); 
    }

来源

2012-04-07 qiu8310

您在距离P2的'len'距离处正确地停止了您的行，但是您试图直接将'arcTo'绘制到'p2.x，p2.y'。你应该改为 – Phrogz 2012-04-07 14:06:18

我找不到你的错误，以便开始再次看到http://jsfiddle.net/yUkK3/6/

似乎除非P1和P3按错误顺序排列才能正常工作。（小提琴上的最后一个例子）可以看出它为什么会发生，但尚未纠正。

何时出错的说明。

以P2为原点，旋转P1，使P1到P2位于x轴，P1为正值，则P3.y为负值时绘图失败。

希望这有助于

编辑现在已经整理出上述顺序问题。 http://jsfiddle.net/yUkK3/7/

来源

2012-04-07 17:56:41 jing3142

非常感谢你，我发现我的问题，这是因为Math.atan2，当角度大于90度时它会返回一个负角度，所以它会影响我的夹角'k'，所以我修改它像这样：http://jsfiddle.net/qiu8310/8cFZG/6/ – qiu8310 2012-04-10 08:36:32

在html5画布上出乎意料的结果arcTo

回答

相关问题