Pixi.js: धुरी वस्तु स्थिति को प्रभावित करती है

मैंने ग्राफिक्स की धुरी और स्थिति को इसके केंद्र में स्थापित करके ऐसा करने में कामयाबी हासिल की, और फिर मैंने ग्राफिक्स को इस बिंदु पर आकर्षित किया।

मैंने एक कोड उदाहरण के साथ stackoverflow पर आपके प्रश्न का उत्तर दिया: http://stackoverflow.com/questions/17505169/pixi-js-pivot-affects-object-position/18007977#18007977

@GoodBoyDigital पिवट

मैं वास्तव में pivot और anchor बारे में भ्रमित हूं, क्या इनका विलय किया जा सकता है?

खैर, pivot और anchor अलग (वैचारिक) हैं। धुरी घूमने के बिंदु को प्रभावित करती है, जबकि लंगर मूल (स्थिति का बिंदु) है। मुझे यकीन नहीं है कि अगर धुरी का उपयोग ठीक से किया जा रहा है।

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

शायद रोटेशन सहित हर जगह लंगर के लिए डिफ़ॉल्ट, जब तक कि धुरी एक बिंदु नहीं है, रोटेशन के लिए उपयोग करें?

अद्यतन : या इसके विपरीत, हालांकि मैं _anchor = default_, और _pivot = रोटेशन_ की ओर झुकाव कर रहा हूं, बेहतर नामकरण IMO।

anchor और pivot रेंडरिंग इंजन में बहुत आम हैं। ऐसे कई उपयोग मामले हैं जहां आप केंद्र के बारे में घुमाना चाहते हैं, लेकिन शीर्ष-बाएँ द्वारा निर्धारित स्थिति है। यह ऐसी चीज है जिसका हमें न केवल समर्थन करना चाहिए, बल्कि करना चाहिए।

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

इसे हल करने के रूप में, पिवट / एंकर इरादा के अनुसार काम कर रहे हैं।

इसे लाने के लिए क्षमा करें, लेकिन मैं इस रेपो के माध्यम से खोज / पढ़ रहा हूं और मैं अभी भी स्पष्ट नहीं हूं कि केंद्र से एक DisplayObjectContainer को कैसे घुमाया जाए। धुरी का उपयोग मेरे कंटेनर को कहीं और स्थानांतरित किए बिना केंद्र से फ्लिप करने की अनुमति नहीं देता है। कोई विचार? मैंने # 93 देखा और सोचा कि यह उत्तर था, लेकिन शायद मैं इसे सही ढंग से नहीं समझ रहा हूं। किसी भी सहायता की सराहना की जाएगी। धन्यवाद!

संपादित करें: मैंने सोचा कि यह उल्लेख करना उपयोगी होगा कि मेरी वस्तु स्क्रीन पर घूम रही है और चलते समय फ़्लिप होगी। मैं "फ़्लिपिंग" करने के लिए स्केल का भी उपयोग कर रहा हूँ।

@ mparker11 एक बिंदु के आसपास घूम रहा है और फ़्लिपिंग ( scale माध्यम से) अलग है। pivot rotation में मूल्य को प्रभावित करेगा, मुझे यकीन नहीं है कि क्या आप ठीक से प्रभावित कर सकते हैं कि एक कंटेनर पैमाने के साथ कैसे फ़्लिप करता है ...

विचार @GoodBoyDigital?

@englercj प्रतिक्रिया के लिए धन्यवाद। मैंने इसे प्राप्त करने के लिए मैट्रिक्स गुणन का उपयोग करने के बारे में एक लेख पढ़ा, जिसे मैं देखता हूं कि @GoodBoyDigital ने अपने PIXI.DisplayObject.prototype.updateTransform फ़ंक्शन में उपयोग किया है, लेकिन मेरे जीवन के लिए मैं वास्तव में समझ नहीं पा रहा हूं कि इसे बनाने के लिए इसे कैसे बदला जाए केंद्र, अगर मुझे इसे बदलने की आवश्यकता है।

हम्म् ... निश्चित रूप से समझ में नहीं आता कि कैसे धुरी का उपयोग करें।

मैंने दिए गए स्थान पर स्प्राइट की स्थिति निर्धारित की है। फिर मैं इसे अपने केंद्र में घुमाना चाहता हूं, इसलिए मैंने अपने स्प्राइट (sprite. उपलब्धता / 2, sprite.height / 2) के केंद्र में धुरी को सेट किया। यह मेरे स्प्राइट को स्थानांतरित करने और 0,0 पर रोटेशन होने का परिणाम है।

उह? क्या मैं कुछ भुल गया?

@ सूक्ष्म से मुझे लगता है कि आपको एंकर का उपयोग करने की आवश्यकता है क्योंकि आप स्प्राइट का उपयोग कर रहे हैं।

क्या यह व्यवहार v4 में ठीक किया जाएगा?

मैंने पिक्सी की कोशिश करने का फैसला किया और तुरंत इस "बग" को मारा।
कुछ घंटों की गुगली के बाद भी मुझे समझ नहीं आ रहा है कि यह कैसे काम करने वाला है।
मंचों पर ज्यादातर लोग कहते हैं कि "धुरी व्यवहार टूट गया है"। बहुत मददगार नहीं।

न तो आपकी टिप्पणी से मुझे डर लगता है। इस तरह पिक्सी धुरी से संबंधित है।
यदि यह 'बग' नंगे करने के लिए बहुत अधिक है तो कृपया एक जनसंपर्क या जोग प्रदान करें।

गुरुवार, 10 मार्च 2016 को, इवान क्लेशिन नोटिफिकेशन @github.com ने लिखा:

_ क्या यह व्यवहार v4 में ठीक किया जाएगा? _

मैंने पिक्सी की कोशिश करने का फैसला किया और तुरंत इस "बग" को मारा।
कुछ घंटों की गुगली के बाद भी मुझे समझ नहीं आ रहा है कि यह कैसे माना जाए
काम।
मंचों पर ज्यादातर लोग कहते हैं कि "धुरी व्यवहार टूट गया है"। बहुत नहीं
मददगार।

-
इस ईमेल का उत्तर सीधे दें या इसे GitHub पर देखें
https://github.com/pixijs/pixi.js/issues/190#issuecomment -194833811।

मैट ग्रोव्स

_ तकनीकी भागीदार_

टेलीफोन: 07708 114496 :: www.goodboydigital.com
फर्स्ट फ्लोर, यूनिट 9 बी, क्वींस यार्ड, व्हाइट पोस्ट लेन, लंदन, E9 5EN
गुडबाय ©। सभी अधिकार सुरक्षित।

न तो आपकी टिप्पणी से मुझे डर लगता है

कृपया व्यक्तिगत रूप से "बहुत उपयोगी नहीं" न लें।
यह मेरी भावनात्मक स्थिति का वर्णन करने के लिए था, अपमान करने के लिए नहीं।

यदि यह 'बग' नंगे करने के लिए बहुत अधिक है तो कृपया एक जनसंपर्क या जोग प्रदान करें।

मुझे नहीं पता कि यह एक बग है या नहीं क्योंकि मैं इस उद्योग में एक noob हूं।
इसलिए मैंने उद्धरणों में ऊपर एक "बग" शब्द रखा है। कुछ लोग इसे मानते हैं। कुछ - इसका नहीं है।
मैंने सिर्फ अपना अनुभव साझा किया और v4 में बदलाव के बारे में पूछा। मैं वास्तव में पिक्सी सीखना चाहता था लेकिन यह मुझे नीचे ले गया।

मुख्य समस्या: पढ़ने के बाद> 10 संबंधित मुद्दे (यहां और इंटरनेट पर) मुझे अभी भी इस व्यवहार को हल करने के लिए कैसे नहीं मिलता है और एक कंटेनर को अंतरिक्ष के परिभाषित बिंदु में केंद्र के चारों ओर घूमने के लिए मजबूर करता है।
और मैं वह विशेष रूप से बेवकूफ नहीं हूं।

नमस्ते!

कोई चिंता नहीं आदमी, माफ करना अगर मैं थोड़ा छोटा था, तो आपने मुझे एक लंबे दिन के अंत में पकड़ लिया!

धुरी का मतलब गैर-सामान्यीकृत एंकर बिंदु के रूप में व्यवहार करना है।

इसे ठीक करने का सबसे आसान तरीका है कि वस्तु को कंटेनर में जोड़ना और कंटेनर को घुमाना, जबकि ऑब्जेक्ट को आंतरिक रूप से चारों ओर ले जाना।

उम्मीद है की वो मदद करदे!

कोई दिक्कत नहीं है। थांक्स। मैं आपकी सलाह का उपयोग करने की कोशिश करूंगा।

मेरी राय में, अपने केंद्र बिंदु के चारों ओर एक ग्राफिक (या कंटेनर) को घुमाने का सबसे आसान तरीका केंद्र बिंदु निर्देशांक को सहेजना है, जहां एक ग्राफिक खींचा गया था। फिर, स्थिति और ग्राफिक की धुरी को केंद्र बिंदु पर सेट करें।
यहाँ एक उदाहरण है:

यदि आप उदाहरण के लिए एक ग्राफिक ऑब्जेक्ट बनाते हैं, तो आप उस पर आदिम आकर्षित करना शुरू कर सकते हैं।
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
ग्राफिक्स ऑब्जेक्ट की स्थिति के सापेक्ष आदिम हमेशा खींचा जाता है (जो कि डिफ़ॉल्ट के रूप में 0 है)।
इसलिए, हमें ग्राफिक ऑब्जेक्ट की नई स्थिति को 200 पर सेट करने की आवश्यकता है, क्योंकि यह हमारे आदिम का वर्तमान केंद्र बिंदु है।
test.position.x = 200; test.position.y = 200;
अब हम देख सकते हैं, कि आदिम बस स्थानांतरित कर दिया गया है, इसलिए हमें धुरी को उसी समन्वय में स्थापित करने की आवश्यकता है और यह उसी स्थिति में रहेगा, जहां हमने इसे खींचा था।
test.pivot.x = 200; test.pivot.y = 200;

धुरी संपत्ति छोटी गाड़ी नहीं है, यह समझने में थोड़ा भ्रमित है कि यह कैसे काम करता है और यह "वस्तु स्थिति को क्यों प्रभावित करता है"। ऑब्जेक्ट हमेशा स्वयं की स्थिति के आसपास घूम रहा है और धुरी हमें एक नया बिंदु सेट करने में मदद करती है जहां से यह घूमता है।

हैलो दोस्तों! क्या मैं कोणों के साथ धुरी का उपयोग कर सकता हूं? मैं माउस का पालन करने के लिए एक स्प्राइट के कोण (रोटेशन की स्थिति को संशोधित करने के लिए धुरी का उपयोग करके) को संशोधित करने की कोशिश कर रहा हूं, लेकिन क्या आप मेरी मदद नहीं कर सकते, कृपया?

मेरे कोड उदाहरण देखें => http://codepen.io/jdnichollsc/pen/KgdRvV?editors=0010
और त्रुटि => http://screencast.com/t/hSSaaTO4j0

अग्रिम धन्यवाद, निकोल्स

किया हुआ! केवल pivot.y या pivot.x hahaha का उपयोग कर रहा है! सभी पिक्सी टीम के लिए धन्यवाद! : +1:

मेरी राय में, अपने केंद्र बिंदु के चारों ओर एक ग्राफिक (या कंटेनर) को घुमाने का सबसे आसान तरीका केंद्र बिंदु निर्देशांक को सहेजना है, जहां एक ग्राफिक खींचा गया था। फिर, स्थिति और ग्राफिक की धुरी को केंद्र बिंदु पर सेट करें।
यहाँ एक उदाहरण है:

यदि आप उदाहरण के लिए एक ग्राफिक ऑब्जेक्ट बनाते हैं, तो आप उस पर आदिम आकर्षित करना शुरू कर सकते हैं।
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
ग्राफिक्स ऑब्जेक्ट की स्थिति के सापेक्ष आदिम हमेशा खींचा जाता है (जो कि डिफ़ॉल्ट के रूप में 0 है)।
इसलिए, हमें ग्राफिक ऑब्जेक्ट की नई स्थिति को 200 पर सेट करने की आवश्यकता है, क्योंकि यह हमारे आदिम का वर्तमान केंद्र बिंदु है।
test.position.x = 200; test.position.y = 200;
अब हम देख सकते हैं, कि आदिम बस स्थानांतरित कर दिया गया है, इसलिए हमें धुरी को उसी समन्वय में स्थापित करने की आवश्यकता है और यह उसी स्थिति में रहेगा, जहां हमने इसे खींचा था।
test.pivot.x = 200; test.pivot.y = 200;

धुरी संपत्ति छोटी गाड़ी नहीं है, यह समझने में थोड़ा भ्रमित है कि यह कैसे काम करता है और यह "वस्तु स्थिति को क्यों प्रभावित करता है"। ऑब्जेक्ट हमेशा स्वयं की स्थिति के आसपास घूम रहा है और धुरी हमें एक नया बिंदु सेट करने में मदद करती है जहां से यह घूमता है।

अरे यार, मुझे लगता है कि यह एक हैक था, क्योंकि इसका साइड इफेक्ट है: स्थिति बदल गई है।

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