Dịch phần tử SVG cho chế độ xem Isometric

Question

Tôi đang làm việc trên một số mã JavaScript để hiển thị các phần tử 2D SVG/Canvas chuẩn (được vẽ bằng Raphael-JS) trong chế độ xem isometric 3Dish.

Giả sử chúng tôi có hai hình chữ nhật được vẽ cạnh nhau. Sau đó tôi vẽ chúng ở các góc chính xác (về cơ bản là độ xoắn 30 độ) cho một góc nhìn đẳng động.

(Trong hình trên, chúng tôi đã thể hiện nguồn gốc cho hai yếu tố tương ứng.)

Vấn đề của tôi là tôi không biết làm thế nào để dịch đúng tất cả các yếu tố cá nhân để họ "xếp" chính xác thay vì chỉ chồng lên nhau.

Trong khi thực sự sử dụng gạch sẽ làm cho mọi thứ dễ dàng hơn vì tôi có thể căn cứ vào vị trí của một lát nhất định trước nó, gạch sẽ không hoạt động trong trường hợp này. Mọi thứ đều năng động và sẽ phức tạp hơn các máy bay x/y đơn giản.

Here is an image of some isometric tiles nếu có bất kỳ nhầm lẫn nào về cách tôi muốn các đối tượng này được đặt.

Answer 1

Bạn không nên áp dụng phép chuyển đổi cho các phần tử riêng lẻ, nhưng đối với các phần tử nguồn dưới dạng tập hợp. Trong Raphael, bạn có thể sử dụng giống như

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

và bây giờ làm biến đổi mà không cần quá nhiều toán học, mà là nghĩa vụ phải làm việc như thế này:

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

(Tuy nhiên, tỉ lệ các mặt hàng xoay có vẻ là bị phá vỡ trong RaphaelJS)

Plain SVG ví dụ:.

<!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

Sử dụng 012.347.bạn có thể làm điều này bằng cách sử dụng phương thức .transform() và cung cấp một chuỗi biến đổi quay 45 độ và vảy theo chiều dọc 70% (hoặc bất kỳ độ cao nào bạn muốn). Điều quan trọng là phải chú ý đến vị trí bạn đang quay và mở rộng xung quanh - trong trường hợp này tôi đang sử dụng 0,0. Bạn cũng sẽ nhận thấy tôi dịch 100 sang bên phải để bù cho vòng quay.

Chuỗi biến đổi cũng rất tốt cho trường hợp sử dụng này vì bạn có thể chỉ cần thêm biến đổi chiếu vào việc chuyển đổi các đối tượng khác trong cảnh và tất cả sẽ kết thúc ở đúng vị trí.

Ví dụ (xem 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');​