如何在javascript中的兩條線之間繪製角度

我有四個div，即p1，p2，p3，p4。它是可拖動的。在任何時候我點擊「繪製」按鈕iwant繪製角度符號像下面如何在javascript中的兩條線之間繪製角度

enter image description here

$(document).ready(function(){ 
    var c=document.getElementById('canvas'); 
    var ctx=c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.moveTo(parseInt($("#p1").css("left"))-5,parseInt($("#p1").css("top"))-5) 
    ctx.lineTo(parseInt($("#p2").css("left"))-5,parseInt($("#p2").css("top"))-5) 
    ctx.lineTo(parseInt($("#p3").css("left"))-5,parseInt($("#p3").css("top"))-5) 
    ctx.lineTo(parseInt($("#p4").css("left"))-5,parseInt($("#p4").css("top"))-5) 
    ctx.lineTo(parseInt($("#p1").css("left"))-5,parseInt($("#p1").css("top"))-5) 
    ctx.fillStyle='#E6E0EC'; 
    ctx.fill(); 
    ctx.strokeStyle="#604A7B"; 
    ctx.lineWidth="3" 
    ctx.stroke(); 
    ctx.closePath(); 
    $("#p1,#p2,#p3,#p4").draggable({ 
    drag:function(){ 
    ctx.clearRect(0,0,500,500); 
    ctx.beginPath(); 
    ctx.moveTo(parseInt($("#p1").css("left"))-5,parseInt($("#p1").css("top"))-5) 
    ctx.lineTo(parseInt($("#p2").css("left"))-5,parseInt($("#p2").css("top"))-5) 
    ctx.lineTo(parseInt($("#p3").css("left"))-5,parseInt($("#p3").css("top"))-5) 
    ctx.lineTo(parseInt($("#p4").css("left"))-5,parseInt($("#p4").css("top"))-5) 
    ctx.lineTo(parseInt($("#p1").css("left"))-5,parseInt($("#p1").css("top"))-5) 
    ctx.fillStyle='#E6E0EC'; 
    ctx.fill(); 
    ctx.strokeStyle="#604A7B"; 
    ctx.lineWidth="3" 
    ctx.stroke(); 
    ctx.closePath(); 
        } 

    });

我怎樣才能使這個請提供簡單的解決方案。

小提琴：http://jsfiddle.net/b954W/

enter image description here

我想在任何時候以繪製形狀內弧。

來源

2014-02-06 Arunkumar

以下是如何說明線段之間的角度

演示：http://jsfiddle.net/m1erickson/XnL3B/

enter image description here

步驟＃1：計算角度

可以計算之間的角度使用Math.atan2連接頂點的2條線：

// calculate the angles in radians using Math.atan2 

var dx1=pt1.x-pt2.x; 
var dy1=pt1.y-pt2.y; 
var dx2=pt3.x-pt2.x; 
var dy2=pt3.y-pt2.y; 
var a1=Math.atan2(dy1,dx1); 
var a2=Math.atan2(dy2,dx2);

步驟＃2：繪製角度的楔

可以繪製表示使用context.arc角度楔形：

// draw angleSymbol using context.arc 

ctx.save(); 
ctx.beginPath(); 
ctx.moveTo(pt2.x,pt2.y); 
ctx.arc(pt2.x,pt2.y,20,a1,a2); 
ctx.closePath(); 
ctx.fillStyle="red"; 
ctx.globalAlpha=0.25; 
ctx.fill(); 
ctx.restore();

步驟＃3：繪製在度角文字

而且您可以使用context.fillText繪製角度的文本（轉換爲度數）：

// draw the degree angle in text 

var a=parseInt((a2-a1)*180/Math.PI+360)%360; 
ctx.fillStyle="black"; 
ctx.fillText(a,pt2.x+15,pt2.y);

來源

2014-02-06 16:53:28 markE

它工作的很好，但任何一點我想繪製的形狀內的弧不在外面。請幫助我。 – Arunkumar

請參考上面的圖片 – Arunkumar

請參考小提琴http://jsfiddle.net/BKK5z/ – Arunkumar

如何在javascript中的兩條線之間繪製角度

回答

相關問題