Geek Answers Handbook

Translation of SVG elements for isometric representation

I am working on some JavaScript code for rendering standard 2D SVG / Canvas elements (drawn using Raphael-JS ) in an isometric 3Dish view.

Say we have two rectangles drawn next to each other. Then I redraw them at the right angle (basically a 30-degree rotation) for an isometric view.

alt text

(In the image above, I showed the start for two matching elements.)

My problem is that I do not know how to correctly translate all the individual elements so that they "tile" correctly, and not just overlap.

, , . , x/y.

, - , , .

+5
2

, . -

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>
+2

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');​
+3

More articles:


All Articles