2

一連の長方形をキャンバス ブロックの特定の点に向けるのに非常に苦労しました。私は一連の点を繰り返し処理し、すべてが特定の点に面しているはずの長方形を描画しています。

まず、半径、焦点、長方形を設定します

var Angle = Math.PI;

_.each(Points, function(Point) {
var Radius = 10;

var Focus = {
    X: 500,
    Y: 1000
}

var Rect = [
{
    X: (Point.X - Radius/2),
    Y: (Point.Y - Radius/2)
},
{
    X: (Point.X + Radius/2),
    Y: (Point.Y - Radius/2)
},
{
    X: (Point.X + Radius/2),
    Y: (Point.Y + Radius/2)
},
{
    X: (Point.X - Radius/2),
    Y: (Point.Y + Radius/2)
}
];

次に、アンダースコアを使用して繰り返し処理し、別の応答で読んだ方法を使用しました。

var index = 0;
_.each(Rect, function (V) {
    var dx2 = Focus.X - V.X;
    var dy2 = Focus.Y - V.Y;
    var dx2_ = dx2 * Math.cos(Angle) - dy2 * Math.sin(Angle);
    var dy2_ = dy2 * Math.sin(Angle) + dy2 * Math.cos(Angle);

    V.X = dx2_ + V.X;
    V.Y = dy2_ + V.Y; 

    Rect[index] = V;
    index++;
});

次に、通常のキャンバスにすべて設定します。context と fillStyle は事前に定義されています。

ctx.beginPath();
ctx.moveTo(Rect[0].X, Rect[0].Y);
ctx.lineTo(Rect[1].X, Rect[1].Y);
ctx.lineTo(Rect[2].X, Rect[2].Y);
ctx.lineTo(Rect[3].X, Rect[3].Y);
ctx.lineTo(Rect[0].X, Rect[0].Y);

ctx.fill();

});

これらは最初の正方形です（各ループの回転なし）

回転なし 回転なし

これは私が代わりに得たものです（長方形がポイントに向かって回転するのではなく、ポイントを中心に回転しているようです）

角度を pi に設定 角度を pi に設定

私が取得しようとしている動作は、それらを下の中央に向けることです。(500,1000) キャンバスが 1000x1000 の場合。

JSFiddle: http://jsfiddle.net/nmartin413/cMwTn/7/

私は一生、何がうまくいかないのか理解できません。あなたに際立っているものがあれば、私に知らせてください:)。長い質問で申し訳ありませんが、これは私を本当にイライラさせました。

前もって感謝します！

4

1 に答える 1

1

自分で四角形を描画するのではなく、ctx.rotate(angle);andを使用してください。ctx.fillRect(-Radius/2, -Radius/2, width, height);これは、よりシンプルでコード的にも読みやすく、管理しやすいためです。ctx.save();この回転を行うには、 と を使用して四角形に変換を適用するたびに、キャンバスを保存して再描画します。ctx.restore();

JS:

$(document).ready(function() {
    var Canvas = $('canvas')[0];
    var Focus = {
        X: 500,
        Y: 1000
    };
    var f = Focus;
    var angle = 0;
    var Radius = 10;
    _.each(Points, function($Point) {
        var ctx = Canvas.getContext('2d');
        var x = $Point.X;
        var y = $Point.Y;
        var width = Radius;
        var height = Radius;
        var cx = x - 0.5 * width;
        var cy = y - 0.5 * height;
        ctx.save();
        ctx.translate(x,y);
        var angle = (Math.atan2(f.Y-y,f.X-x));
        ctx.rotate(angle);
        ctx.fillStyle = "#ED1B24";
    ctx.fillRect(-Radius/2, -Radius/2, width, height);
        ctx.restore();
    });
});

JSFiddle: http://jsfiddle.net/mJNas/

于 2012-11-29T14:58:35.777 に答える