度量文本需要在javascript中对齐
问题描述:
在这个小提琴的四个粉红点移动[它的draggable]。它形成任何多边形形状。而单击绘制按钮它绘制每个角的角度。这将是罚款。
In this fiddle the four pink dots movable[its draggable]. it forms any polygon shape. while clicking the draw button it draw each corner angle. this will be fine. but i need a degree text infront of the arc.
现有的一个:
我需要这样:
>
ctx.save();
ctx.beginPath();
ctx.moveTo(b1, b2);
ctx.arc(b1, b2, 20, ax1, ax2, !isInside);
console.log(ax1, ax2);
ctx.closePath();
ctx.fillStyle = "red";
ctx.globalAlpha = 0.25;
ctx.fill();
ctx.restore();
ctx.fillStyle = "black";
ctx.fillText((isInside ? a : 360 - a) + '°', b1 + 15, b2);
可能。提前感谢。
请参阅这个小提琴: http: //jsfiddle.net/yn4yg/1/
答
这应该做你想要的: http://jsfiddle.net/natalieperna/6F3p7/1/
- 查找
ax1
和ax2
- 检查它是否指向多边形内(与现有
isInside
var不同),如果不添加PI - 设置文本位置30向下平分角度
- 将文本位置5向左移动,以考虑标签的长度
- Find the bisection of
ax1
andax2
- Check if it's pointing inside the polygon (different than the existing
isInside
var), and if not add PI - Set text location 30 down bisection angle
- Shift text location 5 to the left to account for length of the label