在javascript中的任何一点绘制形状内的角度弧

Question

我有四分。它的拖拉机。在任何一点我点击“绘制”按钮我想显示角度。我试过但有时会在形状之外画出弧线。但我想在任何一点画出形状内的弧。

例如：

以上弧我想在形状内绘制

$(document).ready(function(){
    var c=document.getElementById('canvas');
    var ctx=c.getContext("2d");
    var a1=parseInt($("#p1").css("left"))-5;
    var a2=parseInt($("#p1").css("top"))-5;
    var b1=parseInt($("#p2").css("left"))-5;
    var b2=parseInt($("#p2").css("top"))-5;
    var c1=parseInt($("#p3").css("left"))-5;
    var c2=parseInt($("#p3").css("top"))-5;
    var d1=parseInt($("#p4").css("left"))-5;
    var d2=parseInt($("#p4").css("top"))-5;


    ctx.beginPath();
    ctx.moveTo(a1,a2)
    ctx.lineTo(b1,b2)
    ctx.lineTo(c1,c2)
    ctx.lineTo(d1,d2)
    ctx.lineTo(a1,a2)
    ctx.fillStyle='#E6E0EC';
    ctx.fill();
    ctx.strokeStyle="#604A7B";
    ctx.lineWidth="3"
    ctx.stroke();
    ctx.closePath();
    $("#p1,#p2,#p3,#p4").draggable({
    drag:function(){

    a1=parseInt($("#p1").css("left"))-5;
    a2=parseInt($("#p1").css("top"))-5;
    b1=parseInt($("#p2").css("left"))-5;
    b2=parseInt($("#p2").css("top"))-5;
    c1=parseInt($("#p3").css("left"))-5;
    c2=parseInt($("#p3").css("top"))-5;
    d1=parseInt($("#p4").css("left"))-5;
    d2=parseInt($("#p4").css("top"))-5;

    ctx.clearRect(0,0,500,500);
    ctx.beginPath();


    ctx.moveTo(a1,a2)
    ctx.lineTo(b1,b2)
    ctx.lineTo(c1,c2)
    ctx.lineTo(d1,d2)
    ctx.lineTo(a1,a2)
    ctx.fillStyle='#E6E0EC';
    ctx.fill();
    ctx.strokeStyle="#604A7B";
    ctx.lineWidth="3"
    ctx.stroke();
    ctx.closePath();
                   }

    });

$("#draw").click(function(){

var dx1 = a1 - b1;
var dy1 = a2 - b2;
var dx2 = c1 - b1;
var dy2 = c2 - b2;
var ax1 = Math.atan2(dy1, dx1);
var ax2 = Math.atan2(dy2, dx2);
var a = parseInt((ax2 - ax1) * 180 / Math.PI + 360) % 360;
ctx.save();
ctx.beginPath();
ctx.moveTo(b1, b2);
ctx.arc(b1, b2, 20, ax1, ax2);
ctx.closePath();
ctx.fillStyle = "red";
ctx.globalAlpha = 0.25;
ctx.fill();
ctx.restore();
ctx.fillStyle = "black";
ctx.fillText(a, b1 + 15, b2);

});


    });

请注意小提琴：http://jsfiddle.net/BKK5z/1/

Answer 1

您可以通过在生成的弧线中间使用角度来确定是否在外部绘制角度。为简单起见，您可以执行以下操作：

/// detect if arc is inside or outside polygon:
var aa = ax1 + 0.25;             /// for demo, replace with more accurate math
var x = b1 + 10 * Math.cos(aa);  /// some radius
var y = b2 + 10 * Math.sin(aa);

/// test point
var isInside = ctx.isPointInPath(x, y);

来自isInside的值将为true或false，我们可以直接使用arc方法作为逆时针标记的最后一个参数：

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

<强> Modified fiddle here

注意：

上面的“角度检测”非常简单，不适用于陡峭的角度。

因此你需要用计算两个角度之间平均值的东西来替换它，这样你就可以使用中间角度作为测试点的基础（或者找到一个几乎不能在内部/外部产生的值）。

如果矩形部分非常小，则可能还需要调整半径。指出您需要进行测试以确定您是在多边形内部还是外部。