एचटीएमएल 5 बड़े कैनवास - पृष्ठभूमि

Question

सहित पूरी सामग्री को स्थानांतरित और ज़ूम करना मेरा अंतिम लक्ष्य है एचटीएमएल 5 का उपयोग करके http://www.crystal.ch/abb/power_systems_landscape/ जैसे ऐप को लागू करना।

जैसा कि आप देखते हैं, हमें एक बड़े (2000 * 600) कैनवास की आवश्यकता हो सकती है, लेकिन मुझे यकीन नहीं है।

क्या कोई मुझे उपरोक्त लिंक के व्यवहार के लिए केवल विचार दे सकता है?

1. पृष्ठभूमि सहित पूरे कैनवास सामग्री कर सकते हैं ले जाने के बाएँ सही सुचारू रूप से MouseMove और mousedown आपरेशन का उपयोग कर
2. पूरे कैनवास सामग्री पृष्ठभूमि सहित कदम बाएँ सही सुचारू रूप से बिजली प्रणाली चयन
3. बाहर ज़ूम
4. में ज़ूम के अनुसार प्लस आइकॉनिक सर्कल

किसी भी प्रकार के विचार की सराहना की जाएगी।

Answer 1

मूल रूप से आप चाहते हैं इस

<div id='wrapper' style='position: overflow: hidden; relative; width: 500px; height: 300px;> 
    <canvas id='canvas' width='2000' height='600'></canvas> 
<div> 

की तरह कुछ फिर जब आप स्क्रॉल करने के लिए आप की तरह

document.getElementById('wrapper').scrollTo(x, y); 

और कुछ करना होगा चाहते ज़ूमिंग होगा

document.getElementById('canvas').style.width = 2000 * zoom; 
document.getElementById('canvas').style.height = 600 * zoom; 

आप के आसपास खेल सकते हैं setInterval के साथ और स्क्रॉलिंग और ज़ूमिंग अच्छा और चिकनी नहीं है, लेकिन यह निश्चित रूप से है उन प्रभावों को बड़े कैनवास पर प्राप्त करने का सबसे तेज़ तरीका बनें क्योंकि इसमें कोई रेड्रॉइंग शामिल नहीं है।

Answer 2

मैं अनुशंसा करता हूं कि आप 2 डी कैनवास जेएस में काम कर रहे हैं, जो ज़ूम का उपयोग नहीं करते हैं या कैनवास तत्व या किसी अन्य HTML तत्व को स्थानांतरित नहीं करते हैं, तो आप ड्रॉ फ़ंक्शन के भीतर बेहतर एल्गोरिदम लिखते हैं। ज़ूम गुणवत्ता और गति की मौत है और ज़ूमिन से ज़ूमआउट तक जटिल हो सकता है (कैनवास पर सभी दृश्यमान डेटा न भूलें सिर्फ एक छवि है)। मैं ड्रा/अपडेट फ़ंक्शंस के भीतर सभी एल्गोरिदम दिखाने के लिए 13000 पीएक्स और मल्टीप्लेयर अवतार की एक तस्वीर अपलोड करने में कामयाब रहा।

यदि आप 2 कैनवास का उपयोग करते हैं तो आप कोड बड़ी छवियों से और फिर दृश्य मानचित्र के साथ मिश्रित कर सकते हैं।

यदि आपके पास बहुत अधिक छवि चौड़ाई है> 3000 पीएस को निम्न स्तर से विभाजित किया जाना चाहिए (छवि के लिए आईओएस डिवाइस पर ~> 3000 पीएक्स नकारात्मक पैमाने पर आता है - छवि छोटी आती है)।