Chế độ xem giống như Chế độ7 biến đổi trong canvas?

Question

Tôi đang tạo một công cụ trò chơi dựa trên canvas và đang tự hỏi liệu có ai có thông tin hay về cách đạt được góc nhìn từ trên cao không. Những gì tôi đang tìm kiếm là một nơi nào đó giữa tầm nhìn mắt chim truyền thống và chế độ xem SNES mode7 cũ. Chỉ cần một góc nhỏ để tạo ra ảo tưởng về 3D.

Tôi đang cố gắng tìm ra những gì sẽ là cách tốt nhất để đối phó với góc nhìn nghiêng. Tôi không làm xoay vì vậy công cụ ma trận 3D sẽ được overboard, nhưng tôi cần để có thể đối phó với rendering các lớp bản đồ ở một góc nhất quán và nó sẽ được tốt đẹp nếu góc đã được điều chỉnh. Tôi cũng cần phải đối phó với các sợi dọc. Về cơ bản, hàng dưới cùng của pixel phải có chiều rộng và chiều cao pixel 1: 1, sau đó cho mỗi hàng nó sẽ nhận được, ví dụ, nhỏ hơn 5% hoặc một cái gì đó tương tự. Những gì tôi muốn là để có thể cung cấp một canvas lớn như là một kết cấu và sau đó cung cấp một góc camera giữa 0 và 90 trong đó 0 là hoàn toàn ngang và 90 là mắt chim.

Bất kỳ ai có bất kỳ hướng dẫn hoặc mã mẫu nào có liên quan? Tôi đã tìm kiếm trực tuyến một chút, nhưng mọi thứ tôi tìm thấy có vẻ không thích hợp để sử dụng trong ứng dụng cụ thể này hoặc quá phức tạp, làm tất cả các loại công cụ xoay và xoay 3D điên rồ. Tất cả những gì tôi muốn là lấy lưới lát gạch bình thường và nạc nó lại một chút, không có vòng quay hay những thứ phức tạp như thế.

Đây là ví dụ về những gì tôi muốn; Here's an example. http://img801.imageshack.us/img801/2176/perspectivesample.jpg

Hàng pixel dưới cùng là tỷ lệ pixel 1: 1 và mỗi hàng ở trên đó dần dần trở nên ngắn hơn theo chiều ngang và chiều dọc. Các kết cấu nguồn của khu vực trung tâm hàng đầu thường là khoảng một nửa chiều cao của khu vực trung tâm phía dưới, nhưng nó đã được thu nhỏ theo chiều dọc và chiều ngang để phù hợp với quan điểm. Những gì tôi đang nghĩ có thể làm việc tốt nhất là làm cho trạng thái khung nhìn hiện tại sang một canvas khác ở chế độ xem bằng mắt, chim, với khoảng không gian thêm khoảng 50% ở phía trên và bên, sau đó cắt một vùng tam giác ngược từ đó và vẽ nó vào khung nhìn thực tế.

Chỉ có vấn đề là, tôi mút toán khi nói đến các góc tính toán và như vậy.

Answer 1

Những gì bạn đang nói đến là một cái gì đó có thể được thực hiện đơn giản với bất kỳ api 3D nào. Tuy nhiên kể từ khi bạn quyết định cố gắng để dính vào vải 2D, bạn phải làm tất cả mọi thứ trong thế giới 2D có nghĩa là làm việc với hình chữ nhật, xoay, mở rộng, skewing, vv Còn được gọi là biến đổi affine như đã đề cập câu trả lời khác.

Điều bạn muốn làm là có thể, nhưng vì bạn muốn sử dụng 2D, bạn phải suy nghĩ về các chức năng 2D.

1. Tạo hình ảnh ban đầu của bạn.
2. Thêm một lát từ dưới cùng của hình ảnh gốc vào cuối canvas, rất nhẹ ở bên trái để trung tâm của hình ảnh phù hợp với trung tâm của canvas hiện tại.
3. Tăng nhẹ tỷ lệ của toàn bộ hình ảnh
4. Lặp lại cho đến khi bạn lên đầu hình ảnh.

Mã Pseudo sẽ trông như thế này ...

imgA = document.getElementById('source'); 

// grab image slices from bottom to top of image 
for (var ix=height-slice_height;ix>=0;ix-=slice_height) 
{ 

    // move a section of the source image to the target canvas 
    ctx.drawImage(imgA, 0,ix,width,slice_height, 
     0-half_slice_width_increase,width,slice_height); 
    // stretch the whole canvas 
    ctx.scale(scale_ratio, 1); 
} 

này sẽ mất rất nhiều tinh chỉnh, nhưng đó là giải pháp chung.

• scale_ratio sẽ có một số hơi lớn, nhưng rất gần với 1.
• ctx là tiêu chuẩn bối cảnh canvas 2D
• half_slice_width_increase là 1/2 số tiền vải sẽ phát triển khi được chia tỷ lệ theo tỷ lệ quy mô. Điều này giữ cho hình ảnh được chia tỷ lệ căn giữa.

Để xem chính xác, bạn sẽ muốn chuyển đổi hình nền trước tiên trước khi thêm lớp phủ biểu tượng.

Answer 2

nếu tôi hiểu bạn đúng, bạn chỉ muốn chuyển đổi hình thang đơn giản. nếu có, có thể liên kết this hoặc this sẽ giúp bạn. đối với những hình ảnh không tập trung, nó sẽ chỉ là một sự biến dạng hình thoi bổ sung, có thể dễ dàng với canvas, theo như tôi biết.