在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

回答

相關問題