2011-04-24 6 views
5

के साथ ड्रैगिंग मेरे पास एक बड़ा HTML5 कैनवास (स्क्रीन से बहुत बड़ा) है, और मैं एक "google-maps" ड्रैगिंग को कार्यान्वित करना चाहता हूं। मैं चाहता हूं कि कैनवास माउस द्वारा खींचने योग्य हो, और मैं इसे केवल उस भाग को प्रस्तुत करना चाहता हूं जिसे हम स्क्रीन पर हर बार खींचते हैं। क्या किसी के पास कोई अच्छा विचार है?"googlemaps" html5 कैनवास

+0

मैं बिल्कुल वही बात के लिए देख रहा हूँ। क्या आपको कोई जवाब मिला? – SystemicPlural

उत्तर

3

मैंने कैनवास तत्व पर jQuery UI ड्रैगगेबल घटक का उपयोग करके इस समस्या को हल किया। मैंने इसे एक div में संलग्न किया - ओवरफ्लो सेट छुपा हुआ है, और कैनवास जितना बड़ा हो उतना बड़ा होना चाहिए। एक आकर्षण

http://jqueryui.com/demos/draggable/

0

काम करता है केवल स्क्रीन के बात यह है कि हम आप drawImage समारोह इस्तेमाल कर सकते हैं देख सकते हैं पर अपने कैनवास प्रस्तुत करना करने के लिए: drawImage (छवि, एक्स, वाई, चौड़ाई, ऊंचाई)

"मूल" के साथ आपके मूल पूरे कैनवास के रूप में, "एक्स" और "वाई" ऑफसेट का प्रतिनिधित्व करते हैं जो ड्रैग करते समय और वास्तविक विंडो के आकार "चौड़ाई/ऊंचाई" को स्थानांतरित करते हैं।

दस्तावेज़ देखें: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage

और MDC से एक महान ट्यूटोरियल: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images