Перевод элементов SVG для изометрического представления

Question

Я работаю над некоторым кодом JavaScript для рендеринга стандартных 2D-элементов SVG/Canvas (с рисунком Raphael-JS) в изометрии 3Dish вид.

Скажем, у нас есть два прямоугольника, нарисованные рядом друг с другом. Затем я их перерисовываю под правильным углом (в основном 30-градусный поворот) для изометрического обзора.

(На изображении выше я показал происхождение двух соответствующих элементов.)

Моя проблема, я не знаю, как правильно перевести все отдельные элементы, чтобы они «плитка» правильно, а не просто перекрывается.

Хотя на самом деле использование плитки упростит ситуацию, поскольку я мог бы просто разместить любое место плитки на той, которая была перед ней, плитки в этом случае не будут работать. Все динамично и будет более сложным, чем простые плоскости x/y.

Here is an image of some isometric tiles если есть какие-либо недоразумения относительно того, как я хочу, чтобы эти объекты были размещены.

Answer 1

Вы не должны применять преобразование к отдельным элементам, а к элементам-источникам в качестве коллекции. В Рафаэль, вы могли бы использовать что-то вроде

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> 

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