javascript - 在 JavaScript Canvas 中绘制圆弧起点、半径和终点

Question

我需要绘制一个具有起点、半径和终点的圆弧。

我在 JavaScript 中使用 HTML5 Canvas 圆弧函数(x、y、半径、startAngle、endAngle、逆时针)。

context.arc (x，y，半径，起始 Angular ，结束 Angular ，逆时针)

有:

var initialPoint = { x: 20, y: 40 };
var radius = 40;
var finalPoint = { x: 180, y: 40 };

预期结果:

请帮忙

Answer 1

您必须做一些数学运算才能找到与您的 3 个约束相匹配的圆心:
• 与initialPoints 相交
• 与finalPoint 相交
• 已提供半径

请注意，可能没有结果:如果点之间的距离是彼此半径两倍的距离，则没有圆可以匹配。
如果点距离 < 2 * 半径，实际上我们有两个 个结果，我不知道您希望用户如何选择。

数学使用了一些属性:
• 圆心位于垂直于p1、p2 的线上。
• pm，(p1, p2) 的中点也是(c1, c2) 的中点。
• 三 Angular 形(p1, pm, c1) 和(p1, pm, c2) 的 Angular 为90° pm(法语称为“三 Angular 矩形”，英语称为donno)。

这是一个屏幕截图，其中两个可能的弧线为绿色/红色:

http://jsbin.com/jutidigepeta/1/edit?js,output

var initialPoint = { x: 100, y: 160 };
var radius = 90;
var finalPoint = { x: 240, y: 190 };

var centers = findCenters(radius,initialPoint, finalPoint );

核心功能:

//
function findCenters(r, p1, p2) {
  // pm is middle point of (p1, p2)
  var pm = { x : 0.5 * (p1.x + p2.x) , y: 0.5*(p1.y+p2.y) } ;
  drawPoint(pm, 'PM (middle)');
  // compute leading vector of the perpendicular to p1 p2 == C1C2 line
  var perpABdx= - ( p2.y - p1.y );
  var perpABdy = p2.x - p1.x;
  // normalize vector
  var norm = Math.sqrt(sq(perpABdx) + sq(perpABdy));
  perpABdx/=norm;
  perpABdy/=norm;
  // compute distance from pm to p1
  var dpmp1 = Math.sqrt(sq(pm.x-p1.x) + sq(pm.y-p1.y));
  // sin of the angle between { circle center,  middle , p1 } 
  var sin = dpmp1 / r ;
  // is such a circle possible ?
  if (sin<-1 || sin >1) return null; // no, return null
  // yes, compute the two centers
  var cos = Math.sqrt(1-sq(sin));   // build cos out of sin
  var d = r*cos;
  var res1 = { x : pm.x + perpABdx*d, y: pm.y + perpABdy*d };
  var res2 = { x : pm.x - perpABdx*d, y: pm.y - perpABdy*d };
  return { c1 : res1, c2 : res2} ;  
}

实用程序:

function sq(x) { return x*x ; }

function drawPoint(p, name) {
  ctx.fillRect(p.x - 1,p.y - 1,2, 2);
  ctx.textAlign = 'center';
  ctx.fillText(name, p.x, p.y+10);
}

function drawCircle(c, r) {
  ctx.beginPath();
  ctx.arc(c.x, c.y, r, 0, 6.28);
  ctx.strokeStyle='#000';
  ctx.stroke();
}

function drawCircleArc(c, r, p1, p2, col) {
  var ang1 = Math.atan2(p1.y-c.y, p1.x-c.x);
  var ang2 = Math.atan2(p2.y-c.y, p2.x-c.x);
  ctx.beginPath();
  var clockwise = ( ang1 > ang2);
  ctx.arc(c.x, c.y, r, ang1, ang2, clockwise);
  ctx.strokeStyle=col;
  ctx.stroke();
}

编辑:

这里是一个使用“side”的 fiddle ，它是一个 bool 值，说明我们应该选择弧线的哪一侧。

http://jsbin.com/jutidigepeta/3/edit