Đ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
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.
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ó? –
@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í. –
+1 cho đồ họa mát mẻ – QED