2013-02-14 46 views
7

Điều này đã giết chết tôi vài ngày qua. Thậm chí không đùa, nhưng tôi đã thực sự nhấn mạnh điều này cố gắng giải quyết nó.Ma trận biến đổi ma trận bù đắp

Tôi hiện đang cố gắng sử dụng ma trận chuyển đổi affine để tạo phép chiếu isometric trong HTML5. Tôi nhận được một hình xếp là hình vuông được xoay 45 độ (về cơ bản là hình vuông hình vuông trên hình vuông). Sau đó tôi quy mô một trong các trục 'tùy thuộc vào nếu có một đồng bằng theo hướng x hoặc y. Tôi sau đó nghiêng trục theo một yếu tố để phù hợp. Sau đó, tôi phủ nhận vòng quay ban đầu bằng cách xoay nó trở lại -45 độ.

Hiện nay, ma trận affine của tôi là:

 // note: the difference in z is about 10 in this example, 
     //  so, xDiff is usually 40 
     var xDiff = 4 * (center.z - map[x+1][y].land.z); 
     var yDiff = 4 * (center.z - map[x][y+1].land.z); 

     var matrix = multiplyAll(
     // Rotation 
     [COS45, SIN45, 
     -SIN45, COS45], 

     // Scale in each respective axis 
     [(44+yDiff)/44, 0, 
     0, (44+xDiff)/44], 

     // Skew each axis 
     [1, -yDiff/(44+yDiff), 
     -xDiff/(44+xDiff), 1], 

     // Negate the rotation 
     [NCOS45, NSIN45, 
     -NSIN45, NCOS45] 
    ); 

Sau đó, tôi vẽ nó bằng cách sử:

 // the map has its own x & y values which directions are determined by the red x & y arrows in the picture 
     // pX & pY are the point relative to the canvas origin 
     var pX = x * 22 - y * 22 + 22; 
     var pY = y * 22 + x * 22 - 22 - (center.z * 4); 
     context.setTransform(matrix[0], matrix[1], 
          matrix[2], matrix[3], 

          300, 100); 

     //m_Context.drawImage(image, pX, pY); 
     drawDiamond(pX, pY, true); // draws a 44x44 diamond 

Projection test

Transformed plane

Như bạn có thể thấy, các ma trận biến đổi là được rút ra liên quan đến biến đổi ed x-axis (Tôi nghĩ trục x "mới" có độ dốc của yDiff/44). Tôi không chắc chắn làm thế nào để vẽ các hình dạng để kết quả chuyển đổi sẽ được ở vị trí chính xác. Sử dụng pY = x * 22 - (yDiff/10); dường như để có được điểm gần hơn, nhưng tôi khá nhiều đoán nó bằng cách cắm vào số ngẫu nhiên.

tl; dr:

  • tôi thực hiện một chuyển đổi
  • Tôi có một tọa độ nơi một ngói nên được (nếu nó không được chuyển đổi)
  • Làm thế nào để tôi tính toán bù đắp cần thiết sao cho tọa độ của một viên gạch đã biến đổi giống với vị trí của nó nếu nó không được biến đổi?

PS: Các kim cương lạ ở dưới cùng có thể bỏ qua bây giờ vì chúng có thể correctly be created TRỰC TUYẾN Tôi tìm hiểu cách tính độ lệch.

+0

Tôi không hiểu bạn cần gì. Chủ yếu là bạn có biến đổi tuyến tính mà không có bù đắp. Để xác định vị trí các vị trí trong hệ tọa độ được chuyển đổi, bạn không thể sử dụng lưới đẹp mà bạn đã có? –

+0

@luserdroog Lưới được tạo ra chỉ bằng cách sử dụng các ô không được chuyển đổi và vì vậy bạn có thể sử dụng một phương trình hay để tìm vị trí. –

+0

+1 cho đồ họa mát mẻ – QED

Trả lời

4

Một ma trận biến đổi afin ([abcdef]) thể hiện hai phương trình

x' = ax + cy + e 
y' = bx + dy + f 

Vì vậy, bạn có thể sử dụng offsets ef để bỏ qua những phần mở rộng quy mô và làm lệch (4x4 tuyến tính chuyển đổi nhúng vào ma trận 2x3 hoặc 3x3).

Điều này được sử dụng rất nhiều trong lập trình postscript, trong đó tọa độ được sử dụng để vẽ một đối tượng có liên quan đến một xuất xứ tại địa phương. Nếu bạn đang ghép các ma trận, hãy thực hiện bản dịch trước chia tỷ lệ và nghiêng và các giá trị ef sẽ không bị hủy.

+0

Tôi phải đợi 9 giờ trước khi tôi cung cấp cho bạn tiền thưởng của bạn: ( –

+0

Không có vấn đề gì. Vui lòng giúp tôi. –

+0

Phương trình phải là 'x '= ax + cy + e' và' y' = bx + dy + f' , kể từ khi ma trận là | ace | | bdf | | 0 0 1 | – cleong