度量文本需要在javascript中对齐

度量文本需要在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/


  1. 查找 ax1 ax2

  2. 检查它是否指向多边形内(与现有 isInside var不同),如果不添加PI

  3. 设置文本位置30向下平分角度

  4. 将文本位置5向左移动,以考虑标签的长度

  1. Find the bisection of ax1 and ax2
  2. Check if it's pointing inside the polygon (different than the existing isInside var), and if not add PI
  3. Set text location 30 down bisection angle
  4. Shift text location 5 to the left to account for length of the label