根據物體，在翻譯物體時考慮旋轉

我使用Raphael JS構建了一個由三個元素組成的簡單2D車。爲此，我將身體作爲圖像和兩個輪胎。我分離了這些元素，因爲我想讓輪胎在動畫中旋轉。根據物體，在翻譯物體時考慮旋轉

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」代表translate（x，y），r代表旋轉。這些值由Raphael自動計算。當沿着一條直線路徑時，這一切都可以解決，但只要curCar旋轉，輪胎計算就會失敗。

一個例子：

curCar是在位置x：100/Y：200，並通過10°旋轉。輪胎被翻譯爲x：102/y：150和x：184/y：250.因此，curCar旋轉了10°，輪胎不在位。

我的主要問題是：

如何計算出正確的X/Y位置考慮輪換？必須有一個共同的數學公式來做到這一點。

來源

2013-04-29 misantronic

螺絲和秤都是「s」有線代碼！ – 2013-04-29 21:22:30

它可能有點不可思議，但使用Element.transform（tStr）方法 – misantronic 2013-04-29 22:39:59

汽車車輪應改變w.r.t.汽車（車身）的旋轉中心。應該指出的是，旋轉的中心可以在任何地方w.r.t.汽車。爲簡單起見，以下代碼假設旋轉中心與汽車中心重合。

最後，如果翻譯和旋轉的執行順序正確，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-30 07:58:45 NRC

感謝您的代碼，它非常實用。但是，如果已經應用旋轉進行定位，我還能如何使輪胎動起來？ – misantronic 2013-04-30 08:18:58

@DavidSkx，我有點不確定的要求。你的代碼中的animationUpdate函數可以改變爲接受3個重要的參數，即。 changeInX，changeInY和changeInAngle。使用帶有我的代碼中的實現代碼的參數將使汽車和車輪一起根據需要進行動畫製作。或者你想旋轉車輪繞其軸？ – NRC 2013-04-30 09:17:09

@DavidSkx您可以添加另一個旋轉因子，這次以對象中心爲旋轉中心。看到添加的部件「r25」，它實際上使車輪圍繞其中心旋轉25度。這與定位無關。 t1.transform（「... t100,100r30，」+ [cx，cy] +「r25」）; – NRC 2013-04-30 09:30:13

讓我們暫時將整輛車的翻譯結果出來。你想旋轉汽車和輪胎。對於每個輪胎，您都可以通過將旋轉矩陣應用到其舊中心來找到其新中心。

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-30 05:50:04 MvG

thx來進行轉換非常容易！我在一個可以在這裏看到的例子中應用該公式：http://jsfiddle.net/QB9C3/ Raphael總是使用對象的中間作爲旋轉點。測試時，它輸出我怪異的負數。 – misantronic 2013-04-30 08:03:55

@DavidSkx：似乎Raphaël使用角度度數，而標準的JavaScript數學預計弧度。所以簡單地寫'alpha * Math.PI/180'就行了。 – MvG 2013-04-30 09:19:58

非常感謝！那工作！ – misantronic 2013-04-30 09:38:03

根據物體，在翻譯物體時考慮旋轉

回答

相關問題