मोड 7-जैसे परिप्रेक्ष्य कैनवास में बदल गया है?

Question

मैं एक कैनवास-आधारित गेम इंजन बना रहा हूं और सोच रहा हूं कि किसी के ऊपर कोई ओवरहेड व्यू परिप्रेक्ष्य प्राप्त करने के बारे में कोई अच्छी जानकारी है या नहीं। जो मैं खोज रहा हूं वह परंपरागत पक्षियों के आंखों के दृश्य और पुराने एसएनईएस मोड 7 व्यू के बीच कहीं आधी है। 3 डी के भ्रम देने के लिए बस थोड़ा सा कोण।

मैं यह पता लगाने की कोशिश कर रहा हूं कि परिप्रेक्ष्य skewing से निपटने का सबसे अच्छा तरीका क्या होगा। मैं घूर्णन नहीं कर रहा हूं इसलिए 3 डी मैट्रिक्स सामान ओवरबोर्ड पर जा रहा है, लेकिन मुझे एक सतत कोण पर नक्शा परतों को प्रस्तुत करने में सक्षम होने की आवश्यकता है और अगर कोण समायोज्य था तो यह अच्छा होगा। मुझे गहराई से निपटने की भी आवश्यकता है। असल में, पिक्सेल की निचली पंक्ति 1: 1 पिक्सेल चौड़ाई और ऊंचाई होनी चाहिए, फिर प्रत्येक पंक्ति के लिए यह प्राप्त होगा, उदाहरण के लिए, 5% छोटा या ऐसा कुछ। मैं क्या चाहता हूं कि एक बनावट के रूप में एक बड़े कैनवास की आपूर्ति करने में सक्षम हो और फिर 0 और 9 0 के बीच कैमरा कोण की आपूर्ति करें जहां 0 पूरी तरह से क्षैतिज है और 90 पक्षी पक्षियों के दृश्य हैं।

किसी के पास कोई संबंधित ट्यूटोरियल या नमूना कोड है? मैंने ऑनलाइन थोड़ी सी खोज की है, लेकिन मुझे जो कुछ भी मिला है वह या तो इस विशेष एप्लिकेशन या अत्यधिक जटिल में उपयोग के लिए अनुपयुक्त है, पागल 3 डी स्कूइंग और रोटेशन सामान के सभी प्रकार के कर रहा है। मैं चाहता हूं कि सामान्य टाइल वाले ग्रिड को ले जाएं और इसे थोड़ा सा दुबला, कोई घूर्णन या जटिल सामान न लें।

यहां मैं जो चाहता हूं उसका एक उदाहरण है; Here's an example. http://img801.imageshack.us/img801/2176/perspectivesample.jpg

नीचे पिक्सेल पंक्ति 1: 1 पिक्सेल अनुपात है, और ऊपर की प्रत्येक पंक्ति क्रमशः क्षैतिज और लंबवत हो जाती है। शीर्ष केंद्र क्षेत्र का स्रोत बनावट आमतौर पर नीचे केंद्र क्षेत्र की आधा ऊंचाई है, लेकिन परिप्रेक्ष्य में फिट होने के लिए यह लंबवत और क्षैतिज रूप से घट गया है।

जो मैं सोच रहा हूं वह सबसे अच्छा काम कर सकता है, मौजूदा व्यूपोर्ट राज्य को फ्लैट, पक्षियों के आंखों के दृश्य में एक और कैनवास में प्रस्तुत करना है, ऊपर और किनारों पर लगभग 50% अतिरिक्त स्थान के साथ, फिर उस से ऊपर की त्रिकोणीय क्षेत्र का टुकड़ा करें और वास्तविक दृश्य कैनवास को आकर्षित करें।

केवल समस्या है, जब मैं कोणों की गणना करने की बात आती हूं तो मैं गणित में चूसता हूं।

Answer 1

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

आप जो करना चाहते हैं वह संभव है, लेकिन चूंकि आप 2 डी का उपयोग करना चाहते हैं तो आपको 2 डी कार्यों के संदर्भ में सोचना होगा।

1. अपनी प्रारंभिक छवि जेनरेट करें।
2. मूल छवि के निचले हिस्से से कैनवास के निचले हिस्से में एक टुकड़ा जोड़ें, जो बाईं ओर बहुत थोड़ा सा स्थान है, इसलिए छवि का केंद्र वर्तमान कैनवास के केंद्र से मेल खाता है।
3. पूरी छवि के पैमाने को बहुत कम बढ़ाएं
4. जब तक आप छवि के शीर्ष तक नहीं पहुंच जाते तब तक दोहराएं।

छद्म कोड इस प्रकार दिखाई देगा ...

imgA = document.getElementById('source'); 

// grab image slices from bottom to top of image 
for (var ix=height-slice_height;ix>=0;ix-=slice_height) 
{ 

    // move a section of the source image to the target canvas 
    ctx.drawImage(imgA, 0,ix,width,slice_height, 
     0-half_slice_width_increase,width,slice_height); 
    // stretch the whole canvas 
    ctx.scale(scale_ratio, 1); 
} 

इस फेरबदल के बहुत सारे लगेगा, लेकिन है कि आम समाधान है।

• scale_ratio एक संख्या में थोड़ा बड़ा है, लेकिन बहुत करने के लिए 1.
• ctx करीब होगा मानक कैनवास 2D प्रसंग
• half_slice_width_increase 1/2 राशि कैनवास होगा है स्केल अनुपात द्वारा स्केल किए जाने पर बढ़ोतरी करें। यह स्केल्ड छवि केंद्रित केंद्रित रखता है।

सही दिखने के लिए आप आइकन ओवरले जोड़ने से पहले पृष्ठभूमि टाइल्स को पहले बदलना चाहते हैं।

Answer 2

यदि मैं आपको सही समझता हूं, तो आप बस एक साधारण ट्रैपेज़ रूपांतरण चाहते हैं। यदि ऐसा है, तो शायद this या this लिंक आपको मदद करता है। उन छवियों के लिए जो केंद्रित नहीं हैं, यह केवल एक अतिरिक्त rhomboid tranformation होगा, जहां तक ​​मैं जानता हूं कैनवास के साथ आसानी से संभव है।