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++;
});

然后将其全部设置在正常的画布中。上下文和填充样式是预先定义的。

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);andctx.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 回答