翻譯等軸測視圖中的SVG元素

我正在研究一些JavaScript代碼，以在等軸測圖3Dish視圖中呈現標準2D SVG/Canvas元素（使用Raphael-JS繪製）。翻譯等軸測視圖中的SVG元素

假設我們有兩個相鄰的矩形。然後，我將它們以正確的角度（基本上是30度扭曲）重繪爲等軸視圖。

alt text

（在圖像上面我已經展示了產地爲兩個相應的元素。）

我的問題是我不知道如何正確地所有的單個元素轉換，使他們「瓷磚」正確，而不是重疊。

雖然實際使用瓷磚會讓事情變得更容易，因爲我可以將任何給定瓷磚的位置放在其之前的瓷磚上，但瓷磚在這種情況下不起作用。一切都是動態的，比簡單的X/Y平面更復雜。

Here is an image of some isometric tiles如果對我希望如何放置這些對象有任何疑惑。

來源

2011-01-23 Chris Cummings

你的標題似乎表明您使用的HTML canvas元素。由於Raphael使用SVG（即使他們也在那邊談論畫布），您可能想要清除這些以獲得一些答案。雖然有趣的問題！ – polarblau 2011-01-23 09:55:46

感謝提示polarblau。我會盡力澄清我的問題。 – 2011-01-23 17:58:44

您不應將轉換應用於單個元素，而應將轉換應用於源元素作爲集合。在拉斐爾，你可以使用類似

var s = paper.set(); 
s.push(square1, square2);

，現在做的轉換沒有太多的數學，這是應該像這樣的工作：

// s.clone(); // if you want to keep originals 
s.rotate(45, 0, 0).scale(1, .7).translate(100, 0);

（然而，旋轉的項目比例似乎是碎在RaphaelJS）

平原SVG例如：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="-200,-500 1000,1000"> 
    <title>Isometric</title> 
     <g id="source"> <!-- group --> 
      <circle cx="-50" cy="-50" r="50"/> 
      <rect width="100" height="100"/> 
      <rect width="100" height="100" x="101"/> 
      <rect width="100" height="100" x="50" y="-200"/> 
     </g> 
     <!-- make copy of group and apply transformations --> 
     <use xlink:href="#source" transform="translate(500) scale(1, .7) rotate(-45)"/> 
</svg>

來源

2011-01-23 20:06:53 user123444555621

使用Raphel.js 2.0您可以使用.transform（）方法並提供一個可以旋轉45度並垂直縮放70％（或任何您想要的節距）的變換字符串來執行此操作。注意你正在旋轉和縮放的位置非常重要 - 在這種情況下，我正在使用0,0。你也會注意到我正在翻譯100到右邊來補償旋轉。

變換字符串也非常適合這種使用情況，因爲你可以簡單地追加投影變換場景中的其他對象的轉變，他們都將在正確的地方結束。

例如（請參閱http://jsfiddle.net/k22yG/）：

var paper = Raphael(10, 10, 320, 240), 
    set = paper.set(); 

// Build a set to make it easier to transform them all at once 
set.push(
    // Grid of rectangles 
    paper.rect(0, 0, 50, 50), 
    paper.rect(60, 0, 50, 50), 
    paper.rect(0, 60, 50, 50), 
    paper.rect(60, 60, 50, 50) 
); 

// Rotate, then scale, then move (describe in "reverse" order) 
set.transform('t100,0s1,0.7,0,0r45,0,0');

來源

2012-07-24 21:50:20

翻譯等軸測視圖中的SVG元素

回答

相關問題