计算弧形楔的中心点

Question

我画了一个由单个楔形组成的弧形：

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

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

我没有数学智能，我认为这会涉及一些触发，但我不太确定从哪里开始。有什么建议吗？

Answer 1

以下是一种可以执行此操作的方法：

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

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

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>