1

3点を通る2本の線を引き、2点目に丸みを帯びた角を描きたい。ここで問題があります。2本の線の間の角度が90度未満の場合、point1とpoint2を通る線に追加の線が追加されます。ただし、角度が90度以上であれば、問題ありません。

これは、以下のスニペットで確認できます。

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();
}
<canvas id='canvas' style="width:600px; height:600px; margin: 0 auto; background-color: yellow; "; />

4

2 に答える 2

0

エラーが見つからなかったので、もう一度始めましたhttp://jsfiddle.net/yUkK3/6/を参照してください

P1 と P3 の順序を間違えない限り、問題なく動作するようです。（フィドルの最後の例）なぜそれが起こるのかを見ることができますが、まだ修正に取り組んでいません。

うまくいかないときの解説。

P2 を原点として、P1 から P2 が x 軸に沿って P1 が正になるように P1 を回転させ、P3.y が負になると描画に失敗します。

お役に立てれば

編集 上記の順序の問題を整理しました。 http://jsfiddle.net/yUkK3/7/

于 2012-04-07T17:56:41.187 に答える