0

我使用Raphael JS构建了一个由三个元素组成的简单二维汽车。为此，我将身体作为图像和两个轮胎。我将元素分开是因为我希望轮胎在动画中旋转。

var curCar = raphael.image("car.png", /* x */ 0, /* y */ 0, /* width */ 120, /* height*/ 82)
var tires = raphael.set();
tires.push(
    raphael.image("tire.png", 2, 50, 32, 32),
    raphael.image("tire.png", 84, 50, 32, 32)
);

如您所见，轮胎位于汽车的“底部”并且已经对齐。现在，curCar 遵循使用 Raphael.animate 的路径，该路径运行良好。对于动画的每次更新，我都会将轮胎转换为 curCar 的位置。它看起来像这样：

function animationUpdate (pos) {
    curCar.transform("t" + [pos.x, pos.y] +" r"+ pos.alpha);
    tires.transform("t" + [pos.x, pos.y ]);
};

“t”代表平移（x，y），r代表旋转。这些值由 Raphael 自动计算。当沿着直线行驶时，这一切都可以解决，但是一旦 curCar 旋转，轮胎的计算就会失败。

一个例子：

curCar 位于位置 x: 100 / y: 200 并旋转 10°。轮胎被转换为 x:102 / y:150 和 x:184 / y:250。因此 curCar 旋转了 10°，轮胎就错位了。

我的主要问题是：

考虑到旋转，我如何计算正确的 X/Y 位置？必须有一个通用的数学公式来做到这一点。

4

2 回答 2

1

汽车车轮应与汽车（车身）的旋转中心进行转换。需要注意的是，旋转中心可以在汽车的任何地方。为简单起见，以下代码假定旋转中心与汽车中心重合。

最后，如果平移和旋转的执行顺序正确，Raphael 可以处理数学变换。

var paper = Raphael.paper(0, 0, 500, 400);
    // tire width
var tw = 10,
    thw = tw * 0.5,
    // car width
    cw = 100,
    chw = cw * 0.5,
    // car height
    ch = 50,
    chh = ch * 0.5,
    // x of tire 1 w.r.t. car
    t1xc = -chw - thw,
    // x of tire 2 w.r.t. car
    t2xc = -chw - thw,
    // y of tire 1 w.r.t. car
    t1yc = -chh - thw,
    // y of tire 2 w.r.t. car
    t2yc = chh - thw;

var car = paper.rect(20, 20, cw, ch),
    // car center
    cx = car.attr('x') + chw,
    cy = car.attr('y') + chh,
    // tire 1
    t1 = paper.rect(cx + t1xc, cy + t1yc, tw, tw),
    // tire 2
    t2 = paper.rect(cx + t2xc, cy + t2yc, tw, tw);
// Translate by 100, 100 and rotate by 30 deg
car.transform("...t100,100r30");
// car center post transformation
cx = car.attr('x') + chw;
cy = car.attr('y') + chh;
// Transform tires, with rotation w.r.t. car center 
/* Edited - To add wheel rotation about axle (25 deg) */
t1.transform("...t100,100r30," + [cx, cy] + "r25");
t2.transform("...t100,100r30," + [cx, cy] + "r25");

希望这可以帮助。

于 2013-04-30T07:58:45.070 回答
1

让我们暂时不考虑整车的翻译。您想旋转汽车及其轮胎。对于每个轮胎，您可以通过将旋转矩阵应用于其旧中心来找到其新中心。

x' = x∙cos α − y∙sin α
y' = x∙sin α + y∙cos α

我假设 Raphaël 使用左上角作为图像的位置。如果是这样，那么您的原始中心将是 (2+32/2, 50+32/2)=(18,66) 和 (84+32/2, 50+32/2)=(100,66)。所以这些将(x, y)适用于上述公式。结果位置将再次成为中心位置，因此您必须从所有坐标中减去 16。整辆车的翻译可以简单地添加到该结果中。

于 2013-04-30T05:50:04.020 回答