5

これにより 0 ～ 0、-70 :

ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.rotate(Math.PI/-10;);
ctx.beginPath();
ctx.moveTo(0,0); 
ctx.lineTo(0,-70);
ctx.stroke();

そして、それを 'PI/-10' で回転させることができ、それは機能します。

回転を使用した後、これのx、yポイントを取得するにはどうすればよいですか?

4

2 に答える 2

11

x 点と y 点は、平行移動 (回転) に対して相対的であるため、0 と -70 のままです。基本的に、キャンバス上に表示される結果の位置を取得するには、マトリックスを「リバース エンジニアリング」する必要があることを意味します。

-10 度で 70 ピクセルの線を計算したい場合は、代わりに単純な三角法を使用して自分で計算できます (行列を逆方向に計算するよりも簡単です)。

このような関数を使用して、コンテキスト、線の開始位置 (x、y)、長さ (ピクセル単位)、および描画する線の角度 (度単位) を取得できます。線を描画し、その線の終点を含むオブジェクトを返しますx。y

function lineToAngle(ctx, x1, y1, length, angle) {

    angle *= Math.PI / 180;

    var x2 = x1 + length * Math.cos(angle),
        y2 = y1 + length * Math.sin(angle);

    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();

    return {x: x2, y: y2};
}

次に、次のように呼び出します。

var pos = lineToAngle(ctx, 0, 0, 70, -10);

//show result of end point
console.log('x:', pos.x.toFixed(2), 'y:', pos.y.toFixed(2));

結果：

x: 68.94 y: -12.16

または、代わりに次のようにしてキャンバスのコンテキストを拡張できます。

if (typeof CanvasRenderingContext2D !== 'undefined') {

    CanvasRenderingContext2D.prototype.lineToAngle = 
        function(x1, y1, length, angle) {

            angle *= Math.PI / 180;

            var x2 = x1 + length * Math.cos(angle),
                y2 = y1 + length * Math.sin(angle);

            this.moveTo(x1, y1);
            this.lineTo(x2, y2);

            return {x: x2, y: y2};
        }
}

そして、次のようにコンテキストで直接使用します。

var pos = ctx.lineToAngle(100, 100, 70, -10);
ctx.stroke(); //we stroke separately to allow this being used in a path

console.log('x:', pos.x.toFixed(2), 'y:', pos.y.toFixed(2));

(0 度は右を指します)。

于 2013-06-11T21:10:28.310 に答える