Pixi.js: أريد أن أجعل شاشة سريعة الاستجابة مثل العرض التوضيحي

يتوفر الريبو الخاص بالشفرة المصدرية لهذه الصفحة التجريبية هنا.
لديك طريقة متعددة لتنزيل التعليمات البرمجية المصدر.

https://github.com/pixijs/examples

آسف،
اعذرني. هذا لا يعني ذلك.

لا أريد الكود التجريبي نفسه.

عندما يتم تكبير النافذة أو تصغيرها في الصفحة التي يتم فيها نشر كود العرض التوضيحي PixiJS ، يتم أيضًا قياس صورة الأرنب بداخلها بنفس النسبة.
https://pixijs.io/examples/#/demos -basic / container.js

لا يمكن تحقيق ذلك ببساطة عن طريق تنفيذ الكود التجريبي.

أنا آسف لأنه كان من الصعب المرور.

كيف هي مجرد حيل CSS ، إذا لم تكن متأكدًا من كيفية عملها ، فيمكنك أيضًا استخدام js و listener لاختراق css وتناسب الشاشة عند حدث تغيير الحجم.
لقد جعلت لك مثالًا هنا لمقياس تلقائي مناسب للشاشة مع النسبة.
https://www.pixiplayground.com/#/edit/1vNMaYhaqi1 -JnwJ_0Y_m
هل هذا يساعد؟

هذا كل شيء.

اعتدت على استخدام وحدة KonvaJS من قبل.
من خلال تغيير مقياس كائن المرحلة ، تمكنت من تغيير حجم اللوحة القماشية نسبيًا.

هل من المستحيل قياس وتغيير حجم اللوحة القماشية نفسها باستخدام PixiJS؟ أم أنها ليست كبيرة؟
بعض الصور ليست جيدة في الاعتماد على CSS.

هذه المقالة هي طريقة أخرى ويمكن أن تساعدك أيضًا.
https://medium.com/@michelfariarj/scale -a-pixi-js-game-to-fit-the-screen-1a32f8730e9c

شكرا لك. قريب جدا من المثالية.

ومع ذلك ، تمامًا مثل العينة التي وجدتها ، تنتشر لوحة PixiJS عبر حجم الشاشة بالكامل.

أريد إضافة مكون PixiJS داخل div وتغيير حجمه بالداخل.

بعبارة أخرى ، كما كتبت في البداية ، بدلاً من نشر القماش لملء الشاشة ، أريد تقديمه داخل div واحد ، مثل صفحة PixiJS التجريبية.
https://pixijs.io/examples/#/demos -basic / container.js

كما ترى ، يتم تحجيمها في بعض div من الشاشة ، وليس الشاشة بأكملها.

أيضًا ، تم إصلاح الحد الأدنى لحجم اللوحة ، وأعتقد أنها شاشة جميلة جدًا.

هذا مثالي.

شكرا لك.

لا بأس ، ولكن سيكون من الضروري الانتظار والاطلاع مع مطور webMaster ،
أنا لست جيدًا بما يكفي في FrontEnd للإجابة عليك بشأن هذا وأنا أيضًا أن لغتي الإنجليزية محدودة نوعًا ما.
لقد بذلت قصارى جهدي للأسف وأنا مقيد بحاجز اللغة.

يمكنك أيضًا مشاهدة الصفحة المصدر التجريبي التي تستخدم Iframe لتقسيمها ، فربما تحتاج إلى إنشاء DIV بقواعد CSS الخاصة بك ووضع Iframe مع المعرف بالداخل وتمرير معرف اللوحة القماشية الجديد إلى تطبيق pixi.

آسف.

بمعنى آخر ، لا أرغب في عرض لوحة PixiJS في وضع ملء الشاشة.

على سبيل المثال ، هناك div واحد في HTML. لنفترض أنك وضعت لوحة PixiJS فيها.
افترض أن div هو 300 * 300 عند فتح النافذة بملء الشاشة.
عندما تصبح النافذة أصغر حجمًا ، سيتم تحجيمها بنسبة 1: 1.

بالتأكيد ، يتم تنفيذ العرض التوضيحي في إطار iframe.
بدلاً من ذلك ، أريد أن يعمل هذا بالطريقة نفسها في شعبة html عادية.

مثل العرض التوضيحي ، ليس كملء الشاشة ، ولكن كجزء من الشاشة.

شكرا لك.

استخدم المرن.

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

حجم اللوحة القماشية هو نفسه دائمًا ، ويتم تغيير حجمها من خلال CSS ، ويقوم المتصفح بإجراء القياس.

إذا كنت تريد قماشًا بنسبة بكسل إلى بكسل - فسيتعين عليك تعلم كل شيء: تحويلات css و pixi وكيفية تغيير حجم لوحة pixi وما الذي يفعله pixi عند تغيير حجم اللوحة القماشية.

هل تحجيم PixiJS بواسطة CSS بدلاً من PixiJS نفسها؟

قدمت KonvaJS طريقة لتوسيع نطاق المرحلة.

أود أن أطبق نفس الشيء إن أمكن

هل تحجيم PixiJS بواسطة CSS بدلاً من PixiJS نفسها؟

هناك مقياس تحويل المرحلة ، وهناك تغيير حجم اللوحة ، وهناك معلمات عرض / ارتفاع css وخيارات مرنة. اجمعها لجعل حجم التطبيق بالطريقة التي تريدها.

قدمت KonvaJS طريقة لتوسيع نطاق المرحلة.

لا يتعلق PixiJS بتغيير حجم الأشياء ، بل يتعلق بالعرض. تغيير الحجم سهل. أتفهم أن الناس بحاجة إلى هذا لبدء إنشاء التطبيقات بسرعة - حسنًا ، إليك مثال مرن! تريد المزيد؟ يجب ان تتعلم. وإلا فسوف تتعثر لاحقًا بنفس المشكلات ولكن على مستوى مختلف. بدون معرفة بالتحولات ، لن تكون قادرًا على وضع عناصرك وتدويرها حول النقاط.

مشكلة أخرى هي أنه لم يقم أحد بعمل مقال حول طرق تغيير الحجم ، ولا أحد! سألنا الناس عن ذلك ، وأجبنا ، لكن ما زال هناك مقال واحد!

يمكنك البحث في https://www.html5gamedevs.com/forum/15-pixijs/ عن سلاسل الرسائل حول تغيير الحجم ، فهناك الكثير.

إذا قمت بعمل مقال ، فسوف أضعه في الويكي الخاص بنا: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

أود أن أطبق نفس الشيء إن أمكن

يعد Porting Konva تغيير حجم المكون على PixiJS فكرة جيدة.

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

لدي شاشة KonvaJS يمكنها إجراء مثل هذا التكبير وتحريك المرحلة عن طريق السحب.

أريد نقل هذا إلى PixiJS.

ومع ذلك ، شعرت PixiJS أن الكائن معقد.

هل يمكن لأي شخص أن يكتب رمز عينة من فضلك؟

هل اطلعت على https://github.com/davidfig/pixi-viewport ؟

أريد استخدام PixiJS النقية.
كنت أيضًا مهتمًا جدًا بـ PixiJS V5 وقررت الانتقال من KonvaJS.

شكرا لك.

ومع ذلك ، فهو مشابه للتكبير والسحب الذي تريد تحقيقه.

KonvaJS
https://jsfiddle.net/takeshi1234/a0uqk23e/1/

PixiJS
https://jsfiddle.net/takeshi1234/hk0wbj3m/4/

لقد كنت أعمل بجد على PixiJS وأحاول إنشاء صفحة تتصرف مثل الصفحة التي أنشأتها باستخدام KonvaJS.

ومع ذلك ، فإنه لا يعمل بشكل صحيح.

ألا يجب على PixiJS قياس المسرح؟

الميزات التي أريد تنفيذها.
・ حجم القماش حوالي 800 * 800.
・ اقرأ الصورة أولاً ثم ضعها على قماش. ومع ذلك ، يختلف حجم الصورة من 8000 * 8000 إلى 6000 * 6000. (المربع ثابت.)
・ بعد عرض الصورة بالضبط بحجم اللوحة القماشية ، ضع عددًا كبيرًا من كائنات Pixi مثل الدوائر والأحرف على المسرح.
・ أريد التكبير والتصغير باستخدام عجلة الماوس.
・ بعد التكبير ، اسحب موضع المرحلة بالسحب. (لكنها لا تتحرك خارج نهاية المرحلة).

أرغب في إلقاء نظرة على الكود المصدري الذي تم إنشاؤه بالفعل وتقديم المشورة.

حسنًا ، لقد أعطيتني معلومات كافية ، وسوف ألقي نظرة عليها :)

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' ؛
// resizeHtmlElement () ؛
}

قماش const = document.getElementById ("canvas")

تطبيق const = PIXI.CanvasRenderer الجديد ({

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

})

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

var stage = new PIXI.Container () ؛

أنا أقوم بتغيير الحجم باستخدام الرموز أعلاه. لا مشكلة.

تضمين التغريدة
لا أريد تغيير الحجم.
أحاول تنفيذ التكبير والسحب.

شكرا لك.

آسف ، لقد أصابني مثالك ببعض القلق ، لأن الكثير من الناس ينتظرون مساعدتي. لقد بحثت في الكود دقيقة واحدة فقط ولكني رأيت أن لديك كل ما تحتاجه تقريبًا ، فقط تحتاج إلى إضافة بعض الرياضيات والخبرة من أمثلة pixi.

لدي هذا الرمز لتحريك المربعات: https://pixijs.io/examples/#/plugin -project / basic.js ، يمكنك فعل الشيء نفسه مع شاشتك. يمكن حل مشاكل القياس باستخدام وظائف toLocal / toGlobal .

يجب أن يساعدك حل هذه المهمة أيضًا في المستقبل ، ستظهر نفس الأشياء مرارًا وتكرارًا عند استخدام تحويلات pixi والتفاعل.

آسف ، عليك انتظار شخص آخر لمساعدتك.

ملاحظة: طلبت من رفاقنا في فترة الركود المساعدة في حالة توفر أحدهم مجانًا

لقد وجدت pixi-viewport مكتبة جذابة للغاية ونظرت فيها.

تشير الوثائق إلى أنه من أجل الإصدار 4 ، ولكن إذا قمت بالتحقق من المشكلة ، فيبدو أنها تعمل بشكل جيد على الإصدار الخامس.

لذلك ، سأستخدم pixi-viewport لتحقيق المثالية.

ومع ذلك ، سواء كنت أستخدمه بشكل سيء ، أو أن الإصدار 5 و pixi-viewport غير متوافقين ، فإنه لا يعمل بشكل صحيح.

بمجرد حل هذا ، سأعلنه هنا.

بنفس الطريقة في المستقبل ، عندما يكون شخص ما في مأزق.

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

تمكنت من حل هذه المشكلة باستخدام pixi-viewport.

PixiJS لديها مجتمع متطور ومتعاون للغاية.

أعتقد أن هذه المكتبة رائعة حقًا.

شكرا جزيلا.