Pixi.js: एक कंटेनर पर तय सीमा निर्धारित करने का विकल्प दें

कंटेनर में क्षेत्र और निश्चित सीमा नहीं है, यह सिर्फ बच्चों का एक संग्रह है, और यह डिफ़ॉल्ट PIXI व्यवहार है। यदि आप सीमा को ठीक करना चाहते हैं, तो अपने स्वयं के कंटेनर का विस्तार करें, "गणनाबाउंड" विधि को ओवरराइड करें।

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

आप कैसे सुझाव देंगे कि मैं "ऑफ-स्क्रीन" तत्वों को लागू करूं?

आपको वैसे भी सीमा की आवश्यकता क्यों है?

क्या आपने उदाहरण देखा है? अजीब व्यवहार इस तथ्य के कारण होता है कि हर बार drawDebugLines निष्पादित होता है और "आइकन" कंटेनर में लाइनें खींचता है, वह कंटेनर बड़ा हो जाता है। जो बदले में स्नैप बिंदुओं को गड़बड़ कर देते हैं, क्योंकि वे कंटेनर आयामों (चौड़ाई / कॉलम, ऊंचाई / पंक्तियों) पर निर्भर होते हैं।

अगर मैं रेंडरिंग तत्व को स्नैप करता हूं जो 2 समस्याओं का परिचय देता है: रेंडरर स्क्रीन आकार, अभिविन्यास, पिक्सेल घनत्व और ड्राइंग तत्व के उपयोगकर्ता-निर्दिष्ट आयामों पर निर्भर करता है। इसमें वे आइटम शामिल हो सकते हैं जो इससे बड़े हैं (जैसे ऑफ-स्क्रीन, जो स्लाइड कर सकते हैं) और छोटे (जैसे अगर मैं डेस्कटॉप 1 और डेस्कटॉप 2 को एक ही समय में दिखाई देता हूं। उन सभी मामलों में तड़क और अन्य अवरोधों को संरक्षित किया जाना चाहिए। ।

lel.width = wonderfulRectangle.width * 0.8;
lel.height = wonderfulRectangle.height * 0.9;

आप इसे एक स्थिरांक के रूप में क्यों इस्तेमाल नहीं करते? क्या आप कुछ वैश्विक सेटअप कर सकते हैं, जैसे:

var globalRect = new PIXI.Rectangle(0, 0, renderr.width/renderer.resolution, renderer.height/renderer.resolution);

उस आकार को हर आकार पर अद्यतन करें, और उसी के साथ काम करें। आपको "lel.width" और "lel.height" की आवश्यकता क्यों है?

लेल। उस व्यक्ति का किसी चीज से कोई लेना-देना नहीं है, यह सिर्फ एक स्प्राइट है जिसे इधर-उधर ले जाया जा सकता है और मैं इसकी चौड़ाई और ऊंचाई तय कर रहा हूं क्योंकि मूल छवि बहुत बड़ी है और मुझे इसे एक आयत में फिट करने की आवश्यकता है। यदि आप कोड को देखते हैं, तो आपको उस "आइकन" डेस्कटॉप 1 के लिए मुख्य कंटेनर दिखाई देगा और यह वह है जिसके लिए मैं आइकन को स्नैप करने की कोशिश कर रहा हूं। वह एक डेस्कटॉपलेयर का है और डेस्कटॉपलेयर वह है जिसे मैंने मंच पर रखा है।

मैं जो अनुकरण करने की कोशिश कर रहा हूं वह एंड्रॉइड लॉन्चर स्क्रीन के साथ कई स्वाइप दृश्य और डेस्कटॉप पृष्ठभूमि पर एक आइकन ग्रिड का व्यवहार है।

return new PIXI.Point(snapPosX.clamp(0, target.parent.width), snapPosY.clamp(0, target.parent.height));

मुझे अभी भी समझ में नहीं आया कि आप क्या चाहते हैं। PIXI कंटेनर सीमा ठीक उसी तरह काम करते हैं जैसे वे करने वाले हैं। आप पहले नहीं हैं जिन्होंने यह गलती की है।

ओह निर्माता की सांस, मैं अब ऐसा नहीं कर सकता। क्या कोई सिर्फ उदाहरण देख सकता है, rageface को इधर-उधर कर सकता है और मुझे बता सकता है कि लाइनों के साथ बकवास क्यों हो रहा है और क्या यह PIXI में बग / अनुपलब्ध सुविधा है या यदि मेरे पास कोड में कोई गलती है?

मुझे लगा कि आपकी लाइनें वास्तव में कंटेनर की चौड़ाई और ऊंचाई को प्रभावित करती हैं और आप उन गुणों का उपयोग करते हैं जो पहली जगह में लाइनें खींचते हैं।

इसके अलावा, मेरे लिए अब और किसी तरह से काम नहीं कर रहा है। कोई विचार क्यों?

हाँ, यह मेरे लिए भी टूटी हुई है क्योंकि मैंने गलती से इनिट कॉल, मेरी खराब, सॉरी, फिक्स्ड टिप्पणी की थी। हाँ, आप सही हैं - यही वह है जो मैं करता हूं और मुझे अपने लिए कोई अन्य तरीका नहीं दिखता है कि मैं उन लाइनों को नेत्रहीन रूप से ग्रिड को प्रतिबिंबित करने के लिए आकर्षित करूं। तो क्या वास्तव में आप मेरे लिए इन लाइनों को आकर्षित करने का प्रस्ताव देंगे? किसी प्रकार का अलग मेटा-केवल Rectangle ऑब्जेक्ट सेट करें जो हमेशा इसके संबंधित रेंडर कंटेनर के आयामों को कॉपी करता है और स्नैपिंग पॉइंट्स और अन्य स्थितियों को प्राप्त करने के लिए इसका उपयोग करता है? यह समस्या को हल करने के बजाय ओवर-इंजीनियरिंग की तरह लगता है। क्या कोई कारण है कि एक कंटेनर में सामान्य DOM तत्व की तरह "अतिप्रवाह" नहीं हो सकता है?

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

आपने उल्लेख किया कि मेरे कोड में "गलती" थी। वह गलती क्या है? मैंने बहुत अच्छी तरह से खोज की लेकिन कोई भी गलत तर्क नहीं खोज सकता।

"चौड़ाई / ऊँचाई" के बजाय कुछ वैश्विक चर का उपयोग करें जो बदल रहे हैं। जरूरत पड़ने पर उस चर को अपडेट करें।

var globalRect = new PIXI.Rectangle(0, 0, renderer.width/renderer.resolution, renderer.height/renderer.resolution);

यदि आप "स्थानीय" सीमा चाहते हैं, तो उन्हें बनाएं, लेकिन पिक्सी के समान चर का उपयोग न करें:

container.myRect = new PIXI.Rectangle(0, 0, renderer.width/renderer.resolution, renderer.height/renderer.resolution);

गलती यह है कि PIXI में कोई भी लेआउट नहीं है। "चौड़ाई" और "ऊँचाई" के अलग-अलग अर्थ हैं। आप माता-पिता की चौड़ाई की ऊँचाई से बच्चे के अंग को दबा सकते हैं, क्योंकि बच्चा उन्हें प्रभावित करता है।

PIXI के लिए यह जानने का कोई तरीका नहीं है कि आप ग्राफिक्स के अंदर खींची गई किसी आयत की चौड़ाई / ऊँचाई चाहते हैं, और पूरे ग्राफ़िक्स की सीमाएँ नहीं हैं (यदि सर्कल भी हैं?), और चाइल्ड सीमाएँ नहीं हैं। सीमा के लिए एकमात्र उचित तर्क उनके अंदर सब कुछ लेना है।

कल्पना करें कि हमारे पास दो स्प्राइट्स के साथ कंटेनर है, प्रत्येक में (w = 10, h = 10) है, एक (0,0) में है दूसरा (100000, 100000) में है। कंटेनर की चौड़ाई और ऊंचाई कितनी है? इसके अलावा, यहां तक ​​कि अगर हम किसी तरह सीमा तय करते हैं, तो वे क्या प्रभावित करेंगे?

और अगर हम किसी भी तरह से चौड़ाई और ऊंचाई बदलना चाहते हैं, तो यह परिवर्तन कंटेनर के अंदर के तत्वों को कैसे प्रभावित करेगा?

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

अरे @megakoresh , मुझे लगता है कि मुझे पता है कि यहाँ क्या भ्रम पैदा कर रहा है। चूंकि पिक्सी का मुख्य उद्देश्य 2 डी वस्तुओं को प्रस्तुत करना है, लगभग सभी एपीआई उस छोर की ओर तैयार हैं। सीमा विशेष रूप से भ्रमित हो सकती है।

पिक्सी में, एक स्प्राइट की सीमा बनावट द्वारा परिभाषित की जाती है। यही है, प्रदान की गई वस्तु के अंतिम-परिणाम का आकार। इसी तरह, चूंकि एक कंटेनर _not draw_ नहीं है, और इसलिए इसकी सीमा बच्चों द्वारा निर्धारित की गई है। विशेष रूप से, उन बच्चों की सीमा से। एक ग्राफिक्स ऑब्जेक्ट के लिए, सीमा को उस ज्यामिति द्वारा परिभाषित किया जाता है जिसे आप इसमें आकर्षित करते हैं। यदि आप वर्तमान सीमा के बाहर एक ग्राफिक्स ऑब्जेक्ट में एक और आयत बनाते हैं, तो नए तैयार किए गए ज्यामिति को शामिल करने के लिए सीमा का विस्तार होता है।

उम्मीद है कि समझ में आता है, और आपको एक त्वरित अवधारणा देता है कि पिक्सी में सीमाएं कैसे संरचित हैं।

अब, विशेष रूप से आपके उदाहरण के लिए, मेरा मानना ​​है कि आपकी समस्या गलतफहमी से आ रही है कि ग्राफिक्स ऑब्जेक्ट के लिए सीमाएं कैसे काम करती हैं। मुझे लगता है कि आप याद कर रहे हैं कि आपका ग्रिड ड्राइंग ग्राफिक्स ऑब्जेक्ट ( desktop1 ) की सीमा को बदल रहा है जिसमें ग्रीन रेक्ट ( wonderfulRectangle ) शामिल है।

आप देख सकते हैं कि पहले ड्रॉ के बाद, आपका ग्रिड व्यूपोर्ट के आकार को बढ़ाता है:

यह आउट-ऑफ-द-व्यूपोर्ट ज्यामिति को शामिल करने के लिए मूल ग्राफिक्स ऑब्जेक्ट ( desktop1 ) की सीमा का विस्तार करता है। यह आपकी चौड़ाई को बड़ा बनाता है, जो ग्रिड की आपकी अगली गणना को फेंक देता है, और चक्र जारी रहता है। याद रखें, लाइनों की मोटाई है और इसलिए चौड़ाई लेते हैं।

इसे ठीक करने के लिए कुछ तरीके हैं, जो मन में आता है वह यह है कि चूंकि आपका ग्रिड व्यूपोर्ट के पूरे आकार को भर देता है, इसलिए बस अपने माता-पिता के आकार के बजाय व्यूपोर्ट के आकार का उपयोग करें। इसका मतलब है कि जब आप व्यूपोर्ट के बाहर अधिक ज्यामिति खींचते हैं, तो आपकी ग्रिड गणना कभी नहीं बदलती है। क्योंकि रेंडरिंग व्यूपोर्ट आकार नहीं बदलता है।

यदि वह विकल्प नहीं है, उदाहरण के लिए आपका ग्रिड क्षेत्र व्यूपोर्ट का आकार नहीं है। आप ग्रिड क्षेत्र के "ज्ञात आकार" के आधार पर गणना कर सकते हैं। मुझे लगता है कि इवान स्थिर Rectangle उदाहरण का उपयोग करने के बारे में क्या कहना चाह रहा था। मूल रूप से, यह तय करें कि आपका ग्रिड 800x600 है और उस पर आधारित गणनाएँ करें, न कि दृश्य में वस्तुओं के वास्तविक रेंडर किए गए सीमा पर।

मेरे द्वारा बताए गए व्यूपोर्ट विधि का उपयोग करने के लिए मैंने कोडपेन को अपडेट किया है। और अधिक प्रश्न होने पर मुझसे पूछें!

http://codepen.io/anon/pen/yarVwm?editors=0010

LOL के। इसलिए आपके संयुक्त प्रयासों से मुझे लगता है कि मैं इस मुद्दे के मूल को समझता हूं: मुझे लगता है कि मैं सोच रहा था कि अगर लाइब्रेरी को अक्सर कैनवास पुस्तकालयों के साथ रखा जाता है, तो मुझे लगता है कि यह वही बात है, जो यह स्पष्ट रूप से नहीं है। मुझे लगता है कि तब दृश्य वस्तु समूहन का ध्यान रखना और अतिप्रवाह जैसी चीजें सरल नहीं हैं (शायद जब मैं पुस्तकालय को और अधिक सीखूं तो मैं उसके लिए एक प्लगइन बना सकता हूं) और मुझे उन चीजों का ध्यान रखने की आवश्यकता है, जबकि PIXI खुद का ख्याल रखती है स्क्रीन पर चीजों को प्रदर्शित करने के लिए। केस बंद, धन्यवाद

इस थ्रेड को स्वचालित रूप से बंद कर दिया गया है क्योंकि इसे बंद करने के बाद हाल ही में कोई गतिविधि नहीं हुई है। कृपया संबंधित बग के लिए एक नया मुद्दा खोलें।