जावास्क्रिप्ट

Question

में छवियों की प्रतिलिपि बनाएं और क्रॉप करें मैं जावास्क्रिप्ट/कैनवास में एक छोटा 2 डी गेम बनाने की कोशिश कर रहा हूं जिसमें कई एनिमेटेड स्प्राइट्स शामिल हैं। मैं HTTP अनुरोधों की संख्या को कम करना चाहता हूं, इसलिए मैंने एनीमेशन के प्रत्येक फ्रेम (32 पीएक्स द्वारा 32 पीएक्स) को एक छवि प्रति स्प्राइट (कहते हैं, 1 9 2 पीएक्स द्वारा 128 पीएक्स) में जोड़ा। क्या कोई तरीका है कि मैं कॉपी कर सकता हूं और इन छवियों को क्लाइंटसाइड को कई छोटी छवियों में वापस फसल कर सकता हूं? यह मेरे प्रतिपादन कोड को काफी सरल बना देगा और नेटवर्क विलंबता के कारण लोडिंग समय को कम करने में मदद करेगा।

Answer 1

Pixastic पर विशेष रूप से http://www.pixastic.com/lib/docs/actions/crop देखें।

Answer 2

एचटीएमएल 5 कैनवास एपीआई ड्राइमेज नामक एक विधि प्रदान करता है जो आपको इनपुट छवि को फसल करने की अनुमति देता है।

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 

अधिक जानकारी के लिए कल्पना को देखने के (उस छवि को कल्पना से सीधे लिया जाता है):

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#images

Answer 3

आप कैनवास या 3 पार्टी का उपयोग नहीं करना चाहते हैं लाइब्रेरी, आप छवि को एक div ("ओवरफ्लो: छुपा" के साथ) फसल संस्करण के आकार के साथ जोड़ सकते हैं, और छवि को नकारात्मक बाएं और शीर्ष मार्जिन दे सकते हैं।
प्रत्येक व्यक्ति पूरी छवि को चारों ओर ले जाएगा, लेकिन केवल इसका एक हिस्सा प्रदर्शित करेगा, जो प्रदर्शन कर सकता है - या नहीं - प्रभाव प्रदर्शन। मेरा मानना ​​है कि आपको div तत्व को एक स्थिति देना पड़ सकता है: आईई को खुश करने के साथ-साथ रिश्तेदार भी।

वैकल्पिक रूप से आप छवि को div की पृष्ठभूमि के रूप में असाइन कर सकते हैं, और पृष्ठभूमि स्थिति निर्दिष्ट कर सकते हैं। मुझे याद है कि यह एक बार मैंने जो कुछ किया था, उसके लिए काम नहीं किया, यकीन नहीं क्यों। (मुझे लगता है कि इसे अस्पष्टता के साथ करना था)

Answer 4

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