Pixi.js: मैं एक डेमो की तरह एक उत्तरदायी स्क्रीन बनाना चाहता हूँ

इस डेमो पेज के स्रोत कोड का रेपो यहां उपलब्ध है।
आपके पास स्रोत कोड डाउनलोड करने के कई तरीके हैं।

https://github.com/pixijs/examples

माफ़ करना,
माफ़ कीजियेगा। इसका मतलब यह नहीं है।

मुझे डेमो कोड ही नहीं चाहिए।

जब पिक्सीजेएस डेमो कोड परिनियोजित पृष्ठ पर विंडो को बड़ा या छोटा किया जाता है, तो अंदर खरगोश की छवि को भी उसी अनुपात से बढ़ाया जाता है।
https://pixijs.io/examples/#/demos -basic/container.js

यह केवल डेमो कोड को लागू करके हासिल नहीं किया जा सकता है।

मुझे खेद है कि इसे पार करना कठिन था।

यह सिर्फ एक CSS चाल है, यदि आप सुनिश्चित नहीं हैं कि यह कैसे काम करता है, तो आप सीएसएस को हैक करने और आकार बदलने की घटना पर स्क्रीन फिट करने के लिए जेएस और श्रोता का भी उपयोग कर सकते हैं।
मैंने आपको अनुपात के साथ ऑटो-स्केल फिट टू स्क्रीन के लिए यहां उदाहरण दिया है।
https://www.pixiplayground.com/#/edit/1vNMaYhaqi1 -JnwJ_0Y_m
क्या यह मदद है?

तो यह बात है।

मैं पहले KonvaJS मॉड्यूल का उपयोग करता था।
स्टेज ऑब्जेक्ट के पैमाने को बदलकर, मैं अपेक्षाकृत कैनवास का आकार बदलने में सक्षम था।

क्या पिक्सीजेएस के साथ कैनवास को स्वयं स्केल और आकार देना असंभव है? या यह प्रमुख नहीं है?
कुछ चित्र CSS पर निर्भर होने में बहुत अच्छे नहीं होते हैं।

यह लेख एक और दृष्टिकोण है और आपकी मदद भी कर सकता है।
https://medium.com/@michelfariarj/scale -a-pixi-js-game-to-fit-the-screen-1a32f8730e9c

धन्यवाद। आदर्श के बहुत करीब।

हालाँकि, जैसा मैंने पाया नमूना, PixiJS का कैनवास पूरे स्क्रीन आकार में फैला हुआ है।

मैं एक div के अंदर एक PixiJS घटक जोड़ना चाहता हूं और इसे अंदर आकार देना चाहता हूं।

दूसरे शब्दों में, जैसा कि मैंने शुरुआत में लिखा था, स्क्रीन को भरने के लिए कैनवास को फैलाने के बजाय, मैं इसे एक एकल डिव के अंदर पेश करना चाहता हूं, जैसे कि पिक्सीजेएस डेमो पेज।
https://pixijs.io/examples/#/demos -basic/container.js

जैसा कि आप देख सकते हैं, इसे स्क्रीन के कुछ डिव में स्केल किया गया है, पूरी स्क्रीन में नहीं।

साथ ही, कैनवास का न्यूनतम आकार निश्चित है, और मुझे लगता है कि यह एक बहुत अच्छी स्क्रीन है।

यह आदर्श है।

धन्यवाद।

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

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

माफ़ करना।

दूसरे शब्दों में, मैं पूर्ण स्क्रीन पर पिक्सीजेएस कैनवास प्रदर्शित नहीं करना चाहता।

उदाहरण के लिए, HTML में एक div है। मान लीजिए कि आपने इसमें पिक्सीजेएस कैनवास रखा है।
मान लीजिए डिव 300 * 300 है जब विंडो फुल स्क्रीन खोली जाती है।
जैसे-जैसे विंडो छोटी होती जाएगी, इसे 1:1 के अनुपात में बढ़ाया जाएगा।

निश्चित रूप से, डेमो एक आईफ्रेम में कार्यान्वित किया जाता है।
इसके बजाय, मैं चाहता हूं कि यह सामान्य HTML div में समान कार्य करे।

एक डेमो की तरह, पूर्ण स्क्रीन के रूप में नहीं, बल्कि स्क्रीन के हिस्से के रूप में।

धन्यवाद।

फ्लेक्स का प्रयोग करें।

https://github.com/ivanpopelyshev/pixi-starfighter
https://github.com/ivanpopelyshev/pixi-starfighter/blob/master/css/index.css

कैनवास का आकार हमेशा समान होता है, सीएसएस के माध्यम से इसका आकार बदलता है, ब्राउज़र स्केलिंग करता है।

यदि आप पिक्सेल-से-पिक्सेल अनुपात के साथ कैनवास चाहते हैं - आपको सब कुछ सीखना होगा: सीएसएस, पिक्सी ट्रांसफ़ॉर्म, पिक्सी कैनवास का आकार कैसे बदलना है, जब आप कैनवास का आकार बदलते हैं तो पिक्सी क्या करता है।

क्या पिक्सीजेएस स्वयं पिक्सीजेएस के बजाय सीएसएस द्वारा स्केलिंग कर रहा है?

KonvaJS ने स्टेज को स्केल करने की एक विधि प्रदान की।

यदि संभव हो तो मैं इसे लागू करना चाहूंगा

क्या पिक्सीजेएस स्वयं पिक्सीजेएस के बजाय सीएसएस द्वारा स्केलिंग कर रहा है?

स्टेज ट्रांसफॉर्म स्केल है, कैनवास का आकार बदलता है, और सीएसएस चौड़ाई/ऊंचाई पैरा और फ्लेक्स विकल्प हैं। ऐप को अपनी इच्छानुसार स्केलिंग करने के लिए उन्हें संयोजित करें।

KonvaJS ने स्टेज को स्केल करने की एक विधि प्रदान की।

पिक्सीजेएस सामान का आकार बदलने के बारे में नहीं है, यह प्रतिपादन के बारे में है। आकार बदलना आसान है। मैं समझता/समझती हूं कि ऐप्स को तेज़ बनाने के लिए लोगों को इसकी आवश्यकता है - ठीक है, यहाँ फ्लेक्स उदाहरण है! आप और अधिक चाहते हैं? आपको सीखना है। अन्यथा आप बाद में उन्हीं समस्याओं में फंसेंगे लेकिन अलग-अलग स्तर पर। परिवर्तनों के ज्ञान के बिना आप अपने तत्वों को स्थिति में लाने और उन्हें बिंदुओं के चारों ओर घुमाने में सक्षम नहीं होंगे।

एक और समस्या यह है कि किसी ने आकार बदलने के तरीकों के बारे में कोई लेख नहीं बनाया, किसी ने नहीं! लोगों ने इसके बारे में पूछा, हमने जवाब दिया, लेकिन फिर भी एक भी लेख नहीं!

आप आकार बदलने के बारे में धागे के लिए https://www.html5gamedevs.com/forum/15-pixijs/ खोज सकते हैं, कई हैं।

यदि आप कोई लेख बनाते हैं, तो मैं उसे अपने विकी में डालूंगा: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

यदि संभव हो तो मैं इसे लागू करना चाहूंगा

पिक्सीजेएस पर कोनवा आकार बदलने वाले घटक को पोर्ट करना एक अच्छा विचार है।

https://jsfiddle.net/Lhankor_Mhy/pvwr8b2g/3/

मेरे पास एक KonvaJS स्क्रीन है जो ऐसा ज़ूम कर सकती है और मंच को खींचकर ले जा सकती है।

मैं इसे पिक्सीजेएस में स्थानांतरित करना चाहता हूं।

हालांकि, पिक्सीजेएस ने महसूस किया कि वस्तु जटिल थी।

क्या कोई कृपया नमूना कोड लिख सकता है?

क्या आपने https://github.com/davidfig/pixi-viewport देखा है?

मैं शुद्ध पिक्सीजेएस का उपयोग करना चाहता हूं।
मुझे PixiJS V5 में भी बहुत दिलचस्पी थी और मैंने KonvaJS से जाने का फैसला किया।

धन्यवाद।

हालाँकि, यह ज़ूम और ड्रैग के समान है जिसे आप प्राप्त करना चाहते हैं।

कोनवाजेएस
https://jsfiddle.net/takeshi1234/a0uqk23e/1/

पिक्सीजेएस
https://jsfiddle.net/takeshi1234/hk0wbj3m/4/

मैं पिक्सीजेएस पर कड़ी मेहनत कर रहा हूं और एक ऐसा पेज बनाने की कोशिश कर रहा हूं जो उसी तरह का व्यवहार करे जैसा मैंने कोनवाजेएस के साथ बनाया था।

हालाँकि, यह ठीक से काम नहीं करता है।

क्या पिक्सीजेएस को मंच का पैमाना नहीं बनाना चाहिए?

विशेषताएं जिन्हें मैं लागू करना चाहता हूं।
कैनवास का आकार लगभग ८०० * ८०० है।
सबसे पहले इमेज को पढ़ें और कैनवास पर लगाएं। हालाँकि, छवि का आकार 8000 * 8000 से 6000 * 6000 तक भिन्न होता है। (वर्ग निश्चित है।)
छवि को बिल्कुल कैनवास के आकार में प्रदर्शित करने के बाद, बड़ी संख्या में पिक्सी ऑब्जेक्ट जैसे वृत्त और वर्ण मंच पर रखें।
मैं माउस व्हील के साथ ज़ूम इन और आउट करना चाहता हूं।
जूम इन करने के बाद, स्टेज पोजीशन को ड्रैग करके ड्रैग करें। (लेकिन यह मंच के अंत से बाहर नहीं जाता है।)

मैं चाहूंगा कि आप उस स्रोत कोड को देखें जो वास्तव में बनाया गया था और सलाह दें।

ठीक है, आपने मुझे पर्याप्त जानकारी दी है, मैं इसे देख लूंगा :)

window.addEventListener ('आकार बदलें', आकार बदलें);

आकार बदलें ();
वर डब्ल्यू, एच;
फ़ंक्शन का आकार बदलें () {

var canvasRatio = 800 / 1440; ////canvas widthve canvas height
var windowRatio = window.innerHeight / window.innerWidth;



if (windowRatio < canvasRatio) {
    h = window.innerHeight;  
    w = h / canvasRatio;

} else {
    w = window.innerWidth;
    h = w * canvasRatio;

}
app.view.style.width = w + 'px';
app.view.style.height = h + 'px';
// आकार बदलेंHtmlElement ();
}

कॉन्स्ट कैनवास = document.getElementById ("कैनवास")

कॉन्स्ट ऐप = नया PIXI.CanvasRenderer({

view:canvas,
width:1440,
height:800,
backgroundColor: 0xFFFFFF,
antialias: true

})

//document.body.appendChild(app.view);

वर चरण = नया PIXI.Container ();

मैं उपरोक्त कोड का उपयोग कर आकार बदल रहा हूँ। कोई दिक्कत नहीं है।

@dijitaletkinlikler
मैं आकार बदलना नहीं चाहता।
मैं ज़ूम और ड्रैग को लागू करने की कोशिश कर रहा हूं।

धन्यवाद।

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

मेरे पास वर्गों को इधर-उधर करने के लिए वह कोड है: https://pixijs.io/examples/#/plugin -projection/basic.js , आप अपनी स्क्रीन के साथ भी ऐसा कर सकते हैं। toLocal / toGlobal फ़ंक्शंस का उपयोग करके स्केलिंग समस्याओं का समाधान किया जा सकता है।

साथ ही इस कार्य को हल करने से आपको भविष्य में मदद मिलनी चाहिए, जब आप पिक्सी ट्रांसफॉर्म और इंटरैक्शन का उपयोग करते हैं तो वही चीजें बार-बार दिखाई देंगी।

क्षमा करें, आपको किसी और की सहायता के लिए प्रतीक्षा करनी होगी।

पीएस मैंने सुस्त में अपने लोगों से कहा कि अगर कोई स्वतंत्र है तो मदद करें

मैंने पिक्सी-व्यूपोर्ट को एक बहुत ही आकर्षक पुस्तकालय पाया और उसमें देखा।

दस्तावेज़ीकरण कहता है कि यह v4 के लिए है, लेकिन यदि आप समस्या की जांच करते हैं, तो ऐसा लगता है कि यह v5 पर ठीक काम करता है।

इसलिए, मैं आदर्श को साकार करने के लिए पिक्सी-व्यूपोर्ट का उपयोग करूंगा।

हालांकि, चाहे मैं इसे बुरी तरह से उपयोग करूं, या v5 और पिक्सी-व्यूपोर्ट संगत नहीं हैं, यह ठीक से काम नहीं करता है।

एक बार इसका समाधान हो जाने के बाद, मैं यहां इसकी घोषणा करूंगा।

इसी तरह भविष्य में भी जब कोई व्यक्ति संकट में हो।

https://github.com/davidfig/pixi-viewport/issues/212

मैं पिक्सी-व्यूपोर्ट का उपयोग करके इस समस्या को हल करने में सक्षम था।

PixiJS के पास एक अच्छी तरह से विकसित समुदाय है और यह बहुत ही मिलनसार है।

मुझे लगता है कि यह पुस्तकालय वास्तव में बहुत अच्छा है।

आपका बहुत बहुत धन्यवाद।