2012-06-22 33 views
6

Tôi có ứng dụng canvas iPad 2 (trò chơi) và muốn chạy ứng dụng này trên màn hình iPad mới.Cập nhật ứng dụng canvas không retina để hiển thị võng mạc

Đơn giản chỉ cần đặt, phương pháp tốt nhất để kéo dài/thu nhỏ hình ảnh iPad2 của tôi cho các mô hình iPad Retina là gì?

Từ googling tôi đã làm, tôi đã nhìn thấy nhiều phương pháp khác nhau nhưng nhiều người bắt đầu với hình ảnh có kích thước võng mạc và mở rộng quy mô.

Tôi cũng nghe nói hiệu suất đẩy các pixel có kích thước chất lượng võng mạc lên màn hình rất chậm và tốt hơn nên sử dụng hình ảnh có kích thước iPad với chi phí một số chất lượng.

Vì nó là ngay bây giờ, trên iPad mới, tôi thấy quý trên bên trái của ứng dụng của tôi, có ý nghĩa, nhưng hiệu suất là gây sốc so với iPad 2.

Kỹ thuật tôi đã nhìn thấy bao gồm các truy vấn phương tiện truyền thông CSS , bằng cách sử dụng mật độ pixel và các phép biến đổi CSS - có vẻ khá nhanh.

Cảm ơn

Trả lời

10

Tôi đã đặt cùng một chức năng đơn giản để xử lý sự cố này. Về cơ bản, nó có kích thước canvas hiện tại và tỷ lệ nó theo tỷ lệ thiết bị-pixel, thu hẹp lại nó bằng cách sử dụng CSS. Sau đó, nó chia tỷ lệ ngữ cảnh theo tỷ lệ sao cho tất cả các chức năng ban đầu của bạn hoạt động như bình thường.

Bạn có thể chụp ảnh và xem giá vé hiệu suất như thế nào. Nếu nó không phải là những gì bạn hy vọng, bạn chỉ có thể loại bỏ nó.

function enhanceContext(canvas, context) { 
    var ratio = window.devicePixelRatio || 1, 
     width = canvas.width, 
     height = canvas.height; 

    if (ratio > 1) { 
     canvas.width = width * ratio; 
     canvas.height = height * ratio; 
     canvas.style.width = width + "px"; 
     canvas.style.height = height + "px"; 
     context.scale(ratio, ratio); 
    } 
} 
+0

Cảm ơn, tôi sẽ chụp ảnh này. Chỉ cần kiểm tra gấp đôi, điều này sẽ làm việc với hình ảnh kích thước hiện tại của tôi (ipad2)? Tôi sẽ cho bạn biết làm thế nào nó đi. – Jarrod

+0

Ngoài ra, bạn có "m.width". M là gì"? cảm ơn – Jarrod

+0

Đã sửa lỗi, tôi không có quyền truy cập vào nguồn của mình nên tôi đã được giải mã bằng tay. Điều này sẽ làm việc cho một canvas chưa được tối ưu hóa cho Retina bằng một phương tiện khác. Vì vậy, nếu nó hoạt động tốt trên máy tính để bàn của bạn nó sẽ làm việc tốt với iPad của bạn, debluring vải. –

Các vấn đề liên quan