度量文本需要在javascript中对齐 [英] Degree text needs to be aligned in 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

这篇关于度量文本需要在javascript中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！