Draw Angle Arc Inside The Shape[steep Angle]

i have a four points. its draggable. at any point i click 'draw' button i want to show the angles. i tried but it will draw arc outside for steep angle. but i want to draw the arc

Solution 1:

Ok, turns out the problem is not so much related to the point-in-path but rather with path itself.

The problem

When there where only a single arc drawn the previous path was used to detect if the point was inside the polygon or not.

When the other three arcs are added the previous path now becomes the last drawn arc instead. This way the inside polygon detection will not be able to return the proper state as it will test with the arc instead.

Solution

Updated fiddle here

Re-factor the code so that the original path of the polygon can be recreated before each check. This is a relative fast process as we don't have to draw anything to canvas to get a valid path (the costly part is the drawing itself).

Do the following to fix -

First create a generic function to create the path. This method can be used for rendering as well as checking path only:

function createPath(a1,a2, b1, b2, c1, c2, d1, d2) {
    ctx.beginPath();
    ctx.moveTo(a1, a2);
    ctx.lineTo(b1, b2);
    ctx.lineTo(c1, c2);
    ctx.lineTo(d1, d2);
    //ctx.lineTo(a1, a2); /// not needed
    ctx.closePath();
}

Now modify the draw method:

drag: function () {

    a1 = parseInt($("#p1").css("left")) - 5;
    ... snipped ...

    ctx.clearRect(0, 0, 500, 500);
    createPath(a1, a2, b1, b2, c1, c2, d1, d2);  /// use here
    
    ctx.fillStyle = '#E6E0EC';
    ctx.fill();
    ... snipped ...
}

This will render the polygon as before.

Now the key thing, recreate the path for each arc that is drawn but without rendering it:

$("#draw").click(function () {
    createPath(a1, a2, b1, b2, c1, c2, d1, d2);
    draw(a1,b1,c1,a2,b2,c2);
    
    createPath(a1, a2, b1, b2, c1, c2, d1, d2);
    draw(b1,c1,d1,b2,c2,d2);
    
    createPath(a1, a2, b1, b2, c1, c2, d1, d2);
    draw(c1,d1,a1,c2,d2,a2);
    
    createPath(a1, a2, b1, b2, c1, c2, d1, d2);
    draw(d1, a1, b1, d2, a2, b2);

});

A second minor issue is the "sensitivity" of that infamous delta value. Up-adjust it a bit again to ~0.20-ish and you should be good to go.

As I mentioned in the previous answer, the ideal solution for this value is to calculate an "average" between the two angles so the angle is in the middle of the arc.

Solution 2:

[ Updated answer with demo that allows draggable corner points ]

Here is a demo showing inside angles where you can drag the corner points:

http://jsfiddle.net/m1erickson/6ujbL/

Here is a demo showing outside angles where you can drag the corner points:

http://jsfiddle.net/m1erickson/9kGmw/

If you want to draw an angle-symbol on an inside angle you can call this function by supplying corner (vertex) points in counter-clockwise order: point3, point2, point1:

functiondrawAngleSymbol(pt3,pt2,pt1){ ... }

If you want to draw an angle-symbol on an outside angle you can call this same function and supplying corner points in clockwise order: point1, point2, point3:

functiondrawAngleSymbol(pt1,pt2,pt3){ ... }