1

我想画两条穿过三个点的线，并在第二点做一个圆角。在这里我有一个问题。如果两条线之间的夹角小于 90 度，则会在通过点 1 和点 2 的线上附加一条额外的线。如果角度大于或等于 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使P1到P2沿x轴，P1为正，P3.y为负时，绘制失败。

希望这可以帮助

编辑现在已经解决了上述顺序问题。 http://jsfiddle.net/yUkK3/7/

于 2012-04-07T17:56:41.187 回答
0

Math.atan2当角度大于 90 度时将返回负角度，这对角度有错误的影响k。k1要解决此问题，请在计算后添加以下代码k2：

kk1 = k1<0 ? k1+Math.PI : k1;
kk2 = k2<0 ? k2+Math.PI : k2;
k = (kk1-kk2)/2;

这是完整的工作代码：

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, kk1,kk2;

  k1 = Math.atan2(p2.y - p1.y, p2.x - p1.x);
  k2 = Math.atan2(p3.y - p2.y, p3.x - p2.x);
  kk1 = k1<0 ? k1+Math.PI : k1;
  kk2 = k2<0 ? k2+Math.PI : k2;
  k = (kk1-kk2)/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; "; />

于 2019-09-16T18:26:36.567 回答