Question

我在使用一组矩形面对画布块上的某个点时遇到了很大的困难。我正在迭代一组点，并绘制矩形，这些矩形应该都面向某个点。

首先我设置Radius，Focus point和Rectangle

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

然后它全部设置在普通的画布中。上下文和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();

});

这些是初始方块（没有每个循环的旋转）

没有轮换 Without Rotation

这就是我所得到的（似乎是矩形围绕该点旋转而不是朝向该点旋转）

将角度设置为pi With angle set to pi http://i47.tinypic.com/25p5kxl.png

我想要的行为是让他们面向底部中间。（500,1000）如果画布是1000x1000。

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

我不能为我的生活弄清楚什么是错的。如果你有什么特别的东西，请告诉我:)。很抱歉这个问题很长，但这让我非常沮丧。

提前致谢！

Answer 1

尽量不要自己绘制矩形，使用ctx.rotate(angle);和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/

Javascript - 在写入画布之前旋转矩形

1 个答案: