计算弧形楔的中心点
计算弧形楔的中心点
提问于 2018-02-09 16:30:39
我画了一条弧线，由各个楔形组成：
我需要在每个楔子的中心画一幅图。使用drawImage()，我需要找到每个楔子中心的画布坐标。
一开始，我想我可以开始画另一条只到达楔子中心的弧线，并恢复上下文位置，但我认为这是不可能的。
我不是数学高手，我想这将涉及到一些三角，但我不太确定从哪里开始。有什么建议吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-09 22:58:08
以下是您可以这样做的一个方法：
- 用
ar = (r1 + r2) / 2计算平均半径。这将给中心垂直于弧的中心点。 - 用
aa = (a1 + a2) / 2计算平均角。这将给出两个楔形边缘之间的中心点。注意到，这有边缘情况(没有双关语)，其中第二个角度可能小于第一个角度，这将导致平均“环绕”。始终将a1用于最小角度，如果a2较小，则向a2中添加360°(或弧度为2 xπ)。 - 使用这两个值，我们可以使用：
x = centerX + cos(aa) * ar; y = centerY + sin(aa) * ar;计算中心x和y。
示例
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48710188
复制相关文章
相似问题
腾讯云开发者
