Degree text needs to be aligned in javascript

问题

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.

Existing one:

I need like this:

    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);

Its possible. thanks in advance.

see This fiddle:http://jsfiddle.net/yn4yg/1/

回答1:

This should do what you want: http://jsfiddle.net/natalieperna/6F3p7/1/

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

回答2:

Your code contains the same math necessary to answer your question ???!

ctx.arc(b1, b2, 20, ax1, ax2, !isInside);

• Bisect the angle ax2,ax1.

• If the sweep is counterclockwise then add PI (normalize within 2*PI if necessary).

• Optionally subtract a bit from the bisected angle to account for the small text length.

• Calculate the point from b1/b2 extending at least 20 pixels at the bisected angle.

回答3:

This should get you close to what you want:

// Get the starting and ending points of the arc
var angle = (isInside ? a : 360 - a);
var s_x = b1+20*Math.cos(ax1);
var s_y = b2+20*Math.sin(ax1);
var e_x = b1+20*Math.cos(ax2);
var e_y = b2+20*Math.sin(ax2);

ctx.fillText(angle + '°', ((s_x+e_x)/2), ((s_y+e_y)/2));

Here's the working jsFiddle.

来源：https://stackoverflow.com/questions/21698447/degree-text-needs-to-be-aligned-in-javascript