javascript - 计算圆弧楔形的中心点

Question

我画了一个由单独的楔子组成的弧:

我需要在每个楔形的中心绘制一个图像。使用drawImage()我需要找到每个楔形中心的 Canvas 坐标。

最初我以为我可以开始绘制另一条仅到达楔形中心的弧并检索上下文位置，但我认为这是不可能的。

我不是数学奇才，我认为这会涉及一些三 Angular 函数，但我不太确定从哪里开始。有什么建议吗？

Answer 1

这是您可以执行此操作的一种方法:

1. 按 ar = (r1 + r2) / 2 计算平均半径 。这将使中心垂直于弧的中心点。

2. 计算 aa = (a1 + a2) / 2 的平均 Angular 。这将给出两个楔形边缘之间的中心点。 请注意，这有边缘情况(无双关语)，其中第二个 Angular 可能小于第一个 Angular ，这将导致平均值“环绕”。始终使用a1对于最小 Angular ，如果 a2较小的将 360°(或 2 x π 弧度)添加到 a2 .

3. 通过这两个值，我们可以使用以下方法计算中心 x 和 y: x = centerX + cos(aa) * ar; y = centerY + sin(aa) * ar;

示例

var ctx = c.getContext("2d");
var r1 = 100;                                         // inner radius
var r2 = 140;                                         // outer radius
var a1 = Math.PI + 0.1;                               // start angle
var a2 = Math.PI + 0.6;                               // end angle
var cx = 150;                                         // arc center point
var cy = 150;

// render the wedge
ctx.arc(cx, cy, r1, a1, a2);
ctx.arc(cx, cy, r2, a2, a1, true);
ctx.closePath();
ctx.stroke();

// calculate center point
var r = (r1 + r2) * 0.5;                              // avr. radius
var a = (a1 + (a2 > a1 ? a2 : a2 + Math.PI*2)) * 0.5; // avr. angle + special case

var x = cx + Math.cos(a) * r;                         // use angle and radius for
var y = cy + Math.sin(a) * r;                         // new center point in wedge

// plot center point
ctx.fillStyle = "red";
ctx.fillRect(x-1, y-1, 3, 3);

<canvas id=c></canvas>

边缘情况:

var ctx = c.getContext("2d");
var r1 = 100;
var r2 = 140;
var a1 = Math.PI * 2 - 0.2;
var a2 = 0.4;
var cx = 150;
var cy = 75;

// render the wedge
ctx.arc(cx, cy, r1, a1, a2);
ctx.arc(cx, cy, r2, a2, a1, true);
ctx.closePath();
ctx.stroke();

// calculate center point
var r = (r1 + r2) * 0.5;
var a = (a1 + (a2 > a1 ? a2 : a2 + Math.PI*2)) * 0.5;

var x = cx + Math.cos(a) * r;
var y = cy + Math.sin(a) * r;

// plot center point
ctx.fillStyle = "red";
ctx.fillRect(cx, cy, 200, 1);
ctx.fillText("0°", cx, cy - 2);
ctx.fillRect(x-1, y-1, 3, 3);

<canvas id=c></canvas>