如何在javascript中绘制两条线之间的角度 [英] How to draw Angle in between two lines in javascript

问题描述

我有四个div是p1，p2，p3，p4。它是可拖动的。在任何时候我点击绘制按钮iwant绘制角度标志如下

  $（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 ）.css（left）） -  5，parseInt（$（＃p3）。css（top）） -  5）
 ctx.lineTo（$（＃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（）; 
} 
 
}）; 
  

如何做到这一点请提供简单的解决方案。

小提琴：

$ b

步骤＃1：计算角度您可以使用Math.atan2计算连接在顶点的两条线之间的角度：

  //使用数学计算角度.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：绘制角度的楔形
$ b

您可以使用context.arc绘制说明角度的楔形：

  //绘制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绘制角度文本（转换为度数）：

  //在文本中绘制度角
 
 var a = parseInt（（a2-a1）* 180 / Math.PI + 360）％360; 
 ctx.fillStyle =black; 
 ctx.fillText（a，pt2.x + 15，pt2.y）; 
  

i have four divs that is p1,p2,p3,p4. it is draggable. at any point i click "draw" button iwant to draw angle sign like below

$(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();
                   }

    });

How can i make this please provide simple solution.

the fiddle:http://jsfiddle.net/b954W/

i want to draw the arc inside the shape at any point.

解决方案

Here's how to illustrate the angle between line segments

Demo: http://jsfiddle.net/m1erickson/XnL3B/

Step#1: Calculate the angles

You can calculate the angle between 2 lines connected at a vertex using Math.atan2:

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

Step#2: Draw the angle's wedge

You can draw the wedge illustrating the angle using 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();

Step#3: Draw the degree angle in text

And you can draw the text of the angle (converted to degrees) using 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);

这篇关于如何在javascript中绘制两条线之间的角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！