使用Javascript - 写帆布

我一直有困难得到一组矩形面对画布块上的某一点大量的前旋转矩形。我遍历一组点，绘制矩形，这些矩形都应该面向某个点。使用Javascript - 写帆布

首先我设置的半径，对焦点和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/

我不能为我的生活弄清楚怎么回事错了。如果有什么突出给你，请让我知道:)。很抱歉，很长的一个问题，但这让我非常沮丧。

在此先感谢！

来源

2012-11-29 nmartin413

发生的，而不是你的期望是什么？ –

对不起 - 忘了提。我在图像前后添加了一些 – nmartin413

为什么不使用fillRect绘制填充的矩形？ http://developer.mozilla.org/en-US/docs/Canvas_tutorial/Drawing_shapes – loxxy

尽量不要自己画矩形，使用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/

来源

2012-11-29 14:58:35 extramaster

谢谢！我最终以数学方式计算出来，但你的方式更简单。 – nmartin413

使用Javascript - 写帆布

回答

相关问题