क्या HTML5 कैनवास ब्राउज़र-आधारित ज़ूमिंग का समर्थन करता है?

Question

मैंने उस पर खींचे गए भरने के साथ एक सरल कैनवास स्थापित किया था। यह बहुत अच्छा लग रहा है, लेकिन जब मैं ब्राउजर का उपयोग ज़ूमिंग फीचर (सफारी, फ़ायरफ़ॉक्स) प्रदान करता हूं, तो एंटीअलाइजिंग बदसूरत दिखता है।

मैंने ग्रिड को बढ़ाने के पैमाने() का उपयोग करने की कोशिश की, लेकिन इससे मदद नहीं मिलती है।

क्या कैनवास पर आकर्षित करने का कोई तरीका है जो ज़ूम की गई ब्राउज़र विंडो के साथ भी तेज दिखता है?

---

स्क्रीनशॉट (कोई ज़ूम): http://i.stack.imgur.com/CGWka.png

स्क्रीनशॉट (अधिकतम ज़ूम): http://i.stack.imgur.com/vNPjF.png

Answer 1

आप 'जूम' आदेशों ड्राइंग से पहले कैनवास संदर्भ स्केलिंग द्वारा एक कैनवास आइटम में परिणाम के लिए तैयार कर सकते हैं एक बड़े आकार पर, आसानी से। उदाहरण के लिए, this example of mine देखें जो आपको ड्रॉ आइटम पर ज़ूम करने और डिफ़ॉल्ट प्रस्तुति पर उपलब्ध विवरण देखने की अनुमति देता है।

ब्राउज़र ज़ूमिंग के साथ समस्या यह है कि एचटीएमएल 5 कैनवास एक जेपीजी या पीएनजी की तरह है, और एसवीजी के विपरीत-व्यक्तिगत पिक्सेल पर आधारित है। यदि आप 10 पिक्सेल में एक सर्कल खींचते हैं और फिर ब्राउज़र को 50 पिक्सल तक ज़ूम करने के लिए बताते हैं तो ब्राउजर एक चिकनी सर्कल खींचने के लिए डेटा "आविष्कार" नहीं कर सकता है। सबसे अच्छा यह कर सकता है कि 'बड़े पिक्सल' को थोड़ा आसान बनाने की कोशिश करने के लिए छवि इंटरपोलेशन प्रदान करें।

समाधान

एक छवि के साथ, आप पिक्सल (जैसे 1000x800) का एक बहुत साथ एक तस्वीर ले जा सकते हैं और एक अलग, छोटे आकार (उदाहरण के लिए 250x200) में यह प्रदर्शित करने के लिए ब्राउज़र को बताता है। जब ब्राउजर ज़ूम करता है, तो में प्रदर्शित करने के लिए अधिक पिक्सल हैं। उदाहरण के लिए:

<img src="1000x800.jpg" style="width:250px; height:200px"> 

आप कैनवास के साथ ऐसा ही कर सकते हैं। डेटा कैनवास में height और width विशेषताओं (HTML या जावास्क्रिप्ट में) द्वारा निर्दिष्ट पिक्सल की संख्या डेटा है। आप अलग-अलग सीएसएस डिस्प्ले साइज (ऊपर की तरह) को छोटे आकार में निर्दिष्ट कर सकते हैं। आपको अपने मौजूदा कैनवास ड्राइंग कोड को संशोधित करने की भी आवश्यकता नहीं है; बस:

1. height और अपने कैनवास के width एक विशेष पहलू से (उदाहरण के लिए 4),
2. उपयोग सीएसएस सब से पहले प्रदर्शन ऊंचाई निर्धारित करने के लिए और वापस मूल आकार के लिए चौड़ाई, और फिर
3. समायोजित करें अन्य ड्राइंग कमांड, ctx.scale(4,4) के साथ अपने संदर्भ को स्केल करें।

संपादित: मैं इस का एक उदाहरण यहां बनाई है: अतिरिक्त बोनस के रूप

:
http://jsfiddle.net/u5QPq/embedded/result/ (code)

यहाँ यह कैसा है जब आप में ज़ूम लग रहा है , आपके कैनवास भी प्रिंट अधिक सुचारू रूप से (यदि कोई पेड़ों की हत्या में है)।