Question

我开发了这个画布http://jsfiddle.net/user373721/dT8qM/

除非我得到错误的角度值，否则效果很好。要尝试该示例，请在画布上按下鼠标左键，拖动它以绘制第一行，然后释放左键，将光标移动到第二行结束的位置（如果用户可以看到该行，那将会很棒正在绘制）然后再次按下鼠标按钮。角度值将显示;我使用以下方法计算角度：

 angle = (Math.atan2(ay2 - ay1, ax2 - ax1)).toFixed(2);

非常感谢您的建议，谢谢您。

Answer 1

这是一个函数，为您提供线条[x1，y1，x2，y2]和[x2，y2，x3，y3]的度角，假定顺时针扫描。

    function degreeAngle(x1,y1,x2,y2,x3,y3){
        var theta1=Math.atan2( (y1-y2),(x1-x2) );
        var theta2=Math.atan2( (y3-y2),(x3-x2) );
        var theta=(theta2-theta1)*180/Math.PI;
        theta=(theta+360)%360;
        return(theta.toFixed(2));
    }

enter image description here

这是代码和小提琴：http://jsfiddle.net/m1erickson/99BBm/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var x1=50;
    var y1=50;
    var x2=100;
    var y2=125;
    var x3=250;
    var y3=75;
    var angle=degreeAngle(x1,y1,x2,y2,x3,y3);

    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.lineTo(x3,y3);
    ctx.stroke();
    endingArrow(x2,y2,x3,y3);
    ctx.font="18px Verdana";
    ctx.fillText(angle+" degrees",40,200);

    function degreeAngle(x1,y1,x2,y2,x3,y3){
        var theta1=Math.atan2( (y1-y2),(x1-x2) );
        var theta2=Math.atan2( (y3-y2),(x3-x2) );
        var theta=(theta2-theta1)*180/Math.PI;
        theta=(theta+360)%360;
        return(theta.toFixed(2));
    }

    function endingArrow(x,y,xx,yy){
        var endRadians=Math.atan((yy-y)/(xx-x));
        endRadians+=((xx>x)?90:-90)*Math.PI/180;
        ctx.save();
        ctx.beginPath();
        ctx.translate(xx,yy);
        ctx.rotate(endRadians);
        ctx.moveTo(0,0);
        ctx.lineTo(8,20);
        ctx.lineTo(-8,20);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Kinetic JS - 绘制两条相连的线并测量角度

1 个答案: