1

このキャンバスを開発しましたhttp://jsfiddle.net/user373721/dT8qM/

間違った角度値を取得していることを除けば、うまく機能します。例を試すには、キャンバス上でマウスの左ボタンを押し、ドラッグして最初の線を描画し、左ボタンを放して、2 番目の線が終了する位置にカーソルを移動します (ユーザーが線を確認できると便利です)マウス ボタンをもう一度押します。角度の値が表示されます。私は角度を計算するために以下を使用しています：

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

よろしくお願いします。

4

1 に答える 1

2

これは、時計回りのスイープを想定して、[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));
    }

ここに画像の説明を入力

ここにコードとフィドルがあります: 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>
于 2013-06-09T00:04:45.203 に答える