रेटिना डिस्प्ले

Question

पर गैर-रेटिना कैनवास ऐप अपडेट करें मेरे पास एक आईपैड 2 कैनवास ऐप (गेम) है और इसे नए आईपैड रेटिना डिस्प्ले पर चलाने के लिए इसे प्राप्त करना चाहते हैं।

बस शब्दों में कहें, रेटिना आईपैड मॉडल के लिए मेरी आईपैड 2 छवि को फैलाने/घटाने का सबसे अच्छा तरीका क्या है?

मैंने जो किया है, मैंने कई तरीकों को देखा है, लेकिन कई में रेटिना आकार की छवियों और स्केलिंग के साथ शुरू करना शामिल है।

मैंने यह भी सुना है कि स्क्रीन पर रेटिना गुणवत्ता के आकार के पिक्सल को धक्का देने का प्रदर्शन धीमा है, और कुछ गुणवत्ता के खर्च पर आईपैड आकार छवियों का उपयोग करना बेहतर है।

अभी है के रूप में, नए आईपैड पर मैं अपने ऐप है, जो समझ में आता है के ऊपर बाईं तिमाही देखते हैं, लेकिन प्रदर्शन आईपैड की तुलना में 2.

तकनीक मैंने देखा है CSS मीडिया क्वेरी शामिल चौंकाने वाला है , पिक्सेल घनत्व का उपयोग करके, और सीएसएस ट्रांसफॉर्म - जो स्पष्ट रूप से काफी तेज हैं।

धन्यवाद

Answer 1

मैंने इस समस्या को संभालने के लिए एक सरल कार्य किया है। असल में, यह वर्तमान कैनवास आकार लेता है और इसे डिवाइस-पिक्सेल-अनुपात द्वारा स्केल करता है, इसे सीएसएस का उपयोग करके इसे वापस कम कर देता है। यह अनुपात के संदर्भ को संदर्भित करता है ताकि आपके सभी मूल कार्य सामान्य रूप से काम कर सकें।

आप इसे एक शॉट दे सकते हैं और देख सकते हैं कि प्रदर्शन किराया कैसे। यदि आप ऐसा नहीं चाहते हैं, तो आप इसे हटा सकते हैं।

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); 
    } 
}