Pixi.js: Saya ingin membuat layar responsif seperti demo

repo kode sumber untuk halaman demo ini tersedia di sini.
Anda memiliki banyak cara untuk mengunduh kode sumber.

https://github.com/pixijs/examples

Maaf,
Permisi. Itu tidak berarti begitu.

Saya tidak ingin kode demo itu sendiri.

Saat jendela diperbesar atau diperkecil pada halaman tempat kode demo PixiJS disebarkan, gambar kelinci di dalamnya juga diskalakan dengan rasio yang sama.
https://pixijs.io/examples/#/demos -basic/container.js

Ini tidak dapat dicapai hanya dengan menerapkan kode demo.

Saya minta maaf karena sulit untuk melewatinya.

ho itu hanya trik CSS , jika Anda tidak yakin cara kerjanya, Anda juga dapat menggunakan js dan pendengar untuk meretas css dan menyesuaikan layar pada acara pengubahan ukuran.
Saya membuat Anda contoh di sini untuk penyesuaian skala otomatis ke layar dengan rasio.
https://www.pixiplayground.com/#/edit/1vNMaYhaqi1 -JnwJ_0Y_m
Apakah ini bantuan?

Jadi itu saja.

Saya dulu menggunakan modul KonvaJS sebelumnya.
Dengan mengubah skala objek Stage, saya dapat mengubah ukuran kanvas secara relatif.

Apakah tidak mungkin untuk mengukur dan mengubah ukuran CANVAS sendiri dengan PixiJS? Atau bukankah itu besar?
Beberapa gambar tidak pandai mengandalkan CSS.

artikel ini adalah pendekatan lain dan juga dapat membantu Anda.
https://medium.com/@michelfariarj/scale -a-pixi-js-game-to-fit-the-screen-1a32f8730e9c

Terima kasih. Sangat dekat dengan ideal.

Namun, seperti sampel yang saya temukan, Canvas of PixiJS menyebar ke seluruh ukuran layar.

Saya ingin menambahkan komponen PixiJS di dalam div dan mengubah ukurannya di dalamnya.

Dengan kata lain, seperti yang saya tulis di awal, alih-alih menyebarkan kanvas untuk mengisi layar, saya ingin memperkenalkannya di dalam satu div, seperti halaman demo PixiJS.
https://pixijs.io/examples/#/demos -basic/container.js

Seperti yang Anda lihat, itu diskalakan di beberapa div layar, bukan seluruh layar.

Juga, ukuran minimum kanvas sudah diperbaiki, dan menurut saya ini adalah layar yang sangat bagus.

Ini sangat ideal.

Terima kasih.

Tidak apa-apa, tetapi perlu menunggu dan melihat dengan pengembang webMaster,
Saya tidak cukup baik di FrontEnd untuk menjawab Anda tentang ini dan saya juga bahasa Inggris saya agak terbatas.
Sayangnya saya melakukan yang terbaik dan saya dibatasi oleh kendala bahasa.

Anda juga dapat melihat halaman sumber demo menggunakan Iframe untuk membagi, Anda mungkin perlu membuat DIV dengan aturan CSS Anda dan meletakkan Iframe dengan id di dalamnya dan meneruskan id kanvas baru ke aplikasi pixi.

Maaf.

Dengan kata lain, saya tidak ingin menampilkan kanvas PixiJS di layar penuh.

Misalnya, ada satu div di HTML. Misalkan Anda meletakkan kanvas PixiJS di dalamnya.
Misalkan div adalah 300 * 300 ketika jendela dibuka layar penuh.
Saat jendela semakin kecil, itu akan diskalakan dengan rasio 1: 1.

Tentu saja, demo diimplementasikan dalam iframe.
Sebagai gantinya, saya ingin ini berfungsi sama di div html normal.

Seperti demo, bukan sebagai layar penuh, tetapi sebagai bagian dari layar.

Terima kasih.

Gunakan flex.

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

Ukuran kanvas selalu sama, ukurannya diubah melalui CSS, browser melakukan penskalaan.

Jika Anda menginginkan kanvas dengan rasio piksel-ke-piksel - Anda harus mempelajari semuanya: css, transformasi pixi, cara mengubah ukuran kanvas pixi, apa yang dilakukan pixi ketika Anda mengubah ukuran kanvas.

Apakah penskalaan PixiJS dengan CSS daripada oleh PixiJS itu sendiri?

KonvaJS menyediakan metode untuk menskalakan Stage.

Saya ingin menerapkan hal yang sama jika memungkinkan

Apakah penskalaan PixiJS dengan CSS daripada oleh PixiJS itu sendiri?

Ada skala transformasi panggung, ada pengubahan ukuran kanvas, dan ada parameter lebar/tinggi css dan opsi fleksibel. Gabungkan keduanya untuk membuat skala aplikasi sesuai keinginan Anda.

KonvaJS menyediakan metode untuk menskalakan Stage.

PixiJS bukan tentang mengubah ukuran barang, ini tentang rendering. mengubah ukuran itu mudah. Saya mengerti bahwa orang membutuhkan ini untuk mulai membuat aplikasi dengan cepat - ini contoh fleksibel! Kau ingin lebih? Kamu harus belajar. Jika tidak, Anda akan terjebak nanti dengan masalah yang sama tetapi pada level yang berbeda. Tanpa pengetahuan tentang transformasi, Anda tidak akan dapat memposisikan elemen Anda dan memutarnya di sekitar titik.

Masalah lain adalah tidak ada yang membuat artikel tentang metode pengubahan ukuran, tidak ada! Orang-orang bertanya tentang itu, kami menjawab, tetapi masih tidak ada satu artikel pun!

Anda dapat mencari https://www.html5gamedevs.com/forum/15-pixijs/ untuk utas tentang mengubah ukuran, ada banyak.

Jika Anda membuat artikel, saya akan memasukkannya ke wiki kami: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

Saya ingin menerapkan hal yang sama jika memungkinkan

Memindahkan komponen pengubahan ukuran Konva pada PixiJS adalah ide yang bagus.

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

Saya memiliki layar KonvaJS yang dapat membuat zoom seperti itu dan memindahkan panggung dengan menyeret.

Saya ingin mentransfer ini ke PixiJS.

Namun, PixiJS merasa bahwa objek itu kompleks.

Adakah yang bisa menulis kode sampel?

sudahkah Anda melihat https://github.com/davidfig/pixi-viewport ?

Saya ingin menggunakan PixiJS murni.
Saya juga sangat tertarik dengan PixiJS V5 dan memutuskan untuk pindah dari KonvaJS.

Terima kasih.

Namun, ini mirip dengan zoom dan drag yang ingin Anda capai.

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

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

Saya telah bekerja keras di PixiJS dan mencoba membuat halaman yang berperilaku sama dengan halaman yang saya buat dengan KonvaJS.

Namun, itu tidak berfungsi dengan baik.

Bukankah seharusnya PixiJS menskalakan panggung?

Fitur yang ingin saya terapkan.
Ukuran kanvas sekitar 800 * 800.
Pertama baca gambar dan taruh di kanvas. Namun, ukuran gambar bervariasi dari 8000 * 8000 hingga 6000 * 6000. (Persegi sudah ditetapkan.)
Setelah menampilkan gambar persis dengan ukuran kanvas, letakkan sejumlah besar objek Pixi seperti lingkaran dan karakter di atas panggung.
Saya ingin memperbesar dan memperkecil dengan roda mouse.
Setelah memperbesar, seret posisi panggung dengan menyeret. (Tapi itu tidak bergerak di luar akhir panggung.)

Saya ingin Anda melihat kode sumber yang sebenarnya dibuat dan memberikan saran.

OK, Anda memberi saya informasi yang cukup, saya akan melihatnya :)

window.addEventListener('mengubah ukuran', mengubah ukuran);

mengubah ukuran();
var w, h;
fungsi mengubah ukuran() {

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 kanvas =document.getElementById("kanvas")

const app=new PIXI.CanvasRenderer({

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

})

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

var tahap = new PIXI.Container();

Saya mengubah ukuran menggunakan kode di atas. Tidak masalah.

@dijitaletkinlikler
Saya tidak ingin mengubah ukuran.
Saya mencoba menerapkan zoom dan drag.

Terima kasih.

Maaf, contoh Anda memberi saya sedikit kecemasan, karena terlalu banyak orang menunggu bantuan saya. Saya melihat melalui kode hanya 1 menit tetapi saya melihat bahwa Anda hampir memiliki semua yang dibutuhkan, hanya perlu menambahkan beberapa contoh bentuk pixi matematika dan pengalaman.

Saya memiliki kode itu untuk memindahkan kotak: https://pixijs.io/examples/#/plugin -projection/basic.js , Anda dapat melakukan hal yang sama dengan layar Anda. Masalah penskalaan dapat diselesaikan dengan menggunakan fungsi toLocal / toGlobal .

Juga menyelesaikan tugas ini akan membantu Anda di masa depan, hal yang sama akan muncul berulang kali ketika Anda menggunakan transformasi dan interaksi pixi.

Maaf, Anda harus menunggu orang lain untuk membantu.

PS Saya meminta orang-orang kami untuk membantu jika ada yang bebas

Saya menemukan pixi-viewport perpustakaan yang sangat menarik dan memeriksanya.

Dokumentasi mengatakan ini untuk v4, tetapi jika Anda memeriksa masalahnya, tampaknya berfungsi dengan baik di v5.

Oleh karena itu, saya akan menggunakan pixi-viewport untuk mewujudkan yang ideal.

Namun, apakah saya menggunakannya dengan buruk, atau v5 dan pixi-viewport tidak kompatibel, itu tidak berfungsi dengan baik.

Setelah ini diselesaikan, saya akan mengumumkannya di sini.

Demikian pula di masa depan, ketika seseorang dalam kesulitan.

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

Saya dapat memecahkan masalah ini dengan menggunakan pixi-viewport.

PixiJS memiliki komunitas yang berkembang dengan baik dan sangat akomodatif.

Menurut saya perpustakaan ini sangat bagus.

Terima kasih banyak.