通过圆形缠结点，绘图弧形以圆形缠结点与已知半径2d的缠结点

Question

很难解释这个问题。但我会尽力而为。 首先我做了2行，一行包含一个起点和一个终点，像这样

line = {
   startPoint{x: , y:}
   endPoint{x: , y:}
}

然后我在画布上绘制两条线，形成这样的三角形的角。

我现在将线条彼此分开，长度为 Radius*2，如下所示

那么我现在如何使用两个端点作为切点来绘制圆弧，如下所示

我需要使用 arc 还是可以使用 arcto 来做到这一点？如果是弧线；然后我如何给它开始绘图和结束点，以便它像上图中的图像所示那样绘制它。感谢您的宝贵时间，任何输入都会有所帮助。再次抱歉对问题的错误描述

• 更新 - 看来我没有完全解释我的问题。所以这里有一点更新。使用此处给出的示例。我最终得到一个椭圆形的圆圈。我想要得到的是线条之间的圆形。

Answer 1

是的，你可以使用arcTo()：

• 使用moveTo() 设置您的第一行起点
• 然后将两条线之间的交点作为第一对
• 然后是第二行的终点（您称之为“起点线 2”）最后一对。
• 提供半径
• 要实际绘制最后一条线（仅用于与arcTo() 一起计算），请为弧线中的最后一个点对添加lineTo()，描边/填充。

如果您想将线条分开但不知道交点，则必须先将线条插值超出其原始长度，然后才能manually calculate（请参阅该答案中的getIntersection()）。

var ctx = document.querySelector("canvas").getContext("2d");

ctx.moveTo(0, 0);                 // start point
ctx.arcTo(50, 150, 100, 0, 20);   // intersection, outpoint, radius
ctx.lineTo(100, 0);               // line from arc-end to outpoint

ctx.translate(130, 0);
ctx.moveTo(0, 0);                 // start point
ctx.arcTo(50, 150, 80, 50, 8);   // intersection, outpoint, radius
ctx.lineTo(80, 50);               // line from arc-end to outpoint

ctx.stroke();

<canvas></canvas>

如果在不知道交点的情况下将它们分开，如何延长线以找到交点：

function extendLine(line, scale) {
  var sx = line.startPoint.x,
      sy = line.startPoint.y,
      ex = line.endPoint.x,
      ey = line.endPoint.y;

   return {
     startPoint: {x: sx, y: sy},
     endPoint: {
       x: sx + (ex - sx) * scale,
       y: sy + (ey - sy) * scale
     }
   }
}

比例可能是一个荒谬的值，因为我们需要确保在非常陡峭的角度线会在某个地方相交。不影响计算速度。

然后使用两条线（确保第二条线从第一条线的端点继续，这意味着您可能必须反转坐标 - 如果您想动态执行此操作，您可以测量每个点的距离第二行到第一行的终点，最短的距离首先作为起点）：

然后执行步骤是：

var line1 = ...,
    line2 = ...,
    line1tmp = extendLine(line1, 10000),
    line2tmp = extendLine(line2, 10000),
    ipoint = getIntersection(line1, line2); // see link above

// define the line + arcTo
ctx.moveTo(line1.startPoint.x, line1.startPoint.y);
ctx.arcTo(ipoint.x, ipoint.y, 
          line2.endPoint.x, line2.endPoint.y,
          Math.abs(line2.startPoint.x - line1.endPoint.x) / 2);
ctx.lineTo(line2.endPoint.x, line2.endPoint.y);
ctx.stroke();

Answer 2

给定在一个公共点相交的 2 条线段，您可以使用三次贝塞尔曲线对它们应用圆角交点：

方法如下...

• 给定一个点 p1 和从 p1 延伸到 p0 (P10) 和从 p1 延伸到 p2 (P12) 的线段：

  var p0={x:50,y:50};
  var p1={x:100,y:150};
  var p2={x:250,y:100};
  

• 计算 P10 和 P12 上的点，它们是从公共点 (p1) 回到各自起点 (p0 和 p2) 的指定百分比：

  var lerp=function(a,b,x){ return(a+x*(b-a)); };
  var dx,dy,length;
  var offsetPct=0.15;
  
  // calc a point on P10 that is 15% of the way from p1 to p0
  dx=p1.x-p0.x;
  dy=p1.y-p0.y;
  p00={ x:lerp(p1.x,p0.x,offsetPct), y:lerp(p1.y,p0.y,offsetPct) }
  
  // calc a point on P12 that is 15% of the way from p1 to p2
  dx=p1.x-p2.x;
  dy=p1.y-p2.y;
  p22={ x:lerp(p1.x,p2.x,offsetPct), y:lerp(p1.y,p2.y,offsetPct) }
  

• 然后您可以使用缩短的线段和三次贝塞尔曲线绘制圆形交点：

示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var p0={x:50,y:50};
var p1={x:100,y:150};
var p2={x:150,y:50};


roundedIntersection(p0,p1,p2,0.15);


function roundedIntersection(p0,p1,p2,offsetPct){

  var lerp=function(a,b,x){ return(a+x*(b-a)); };
  var dx,dy,length;
  dx=p1.x-p0.x;
  dy=p1.y-p0.y;
  p00={ x:lerp(p1.x,p0.x,offsetPct), y:lerp(p1.y,p0.y,offsetPct) }
  dx=p1.x-p2.x;
  dy=p1.y-p2.y;
  p22={ x:lerp(p1.x,p2.x,offsetPct), y:lerp(p1.y,p2.y,offsetPct) }

  ctx.beginPath();
  ctx.moveTo(p0.x,p0.y);
  ctx.lineTo(p00.x,p00.y);
  ctx.bezierCurveTo( p1.x,p1.y,  p1.x,p1.y  ,p22.x,p22.y);
  ctx.lineTo(p2.x,p2.y);
  ctx.stroke();

  dot(p0.x,p0.y);
  dot(p1.x,p1.y);
  dot(p2.x,p2.y);
  dot(p00.x,p00.y);
  dot(p22.x,p22.y);

  function dot(x,y){
    ctx.beginPath();
    ctx.arc(x,y,2,0,Math.PI*2);
    ctx.closePath();
    ctx.fill();
  }

}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>