翻译等轴测视图中的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元素

回答

相关问题