Pixi.js: Berikan opsi untuk mengatur batas tetap pada wadah

Penampung tidak memiliki area dan batas tetap, itu hanya kumpulan anak-anak, dan itulah perilaku PIXI default. Jika Anda ingin memperbaiki batas, perluas penampung Anda sendiri, ganti metode "countBounds".

Jika tidak memiliki area dan batas tetap dan pada dasarnya hanya sebuah struktur data maka itu seharusnya tidak memengaruhi rendering (mirip dengan bagaimana jika Anda meletakkan objek yang terlalu besar ke dalam iframe, iframe tidak akan menjadi lebih besar) . Dalam contoh ini jelas terjadi, dan saya merasa sulit untuk menyalahkan logika yang salah dari contoh tersebut. Mungkin tidak memiliki opsi batas tetap tidak melihat akar masalahnya, tetapi masalahnya pasti ada.

Bagaimana saran Anda agar saya menerapkan elemen "di luar layar"?

Kenapa kamu butuh batasan?

Sudahkah Anda melihat contohnya? Perilaku aneh ini disebabkan oleh fakta bahwa setiap kali drawDebugLines dieksekusi dan menarik garis dalam wadah "ikon", wadah itu menjadi lebih besar. Yang pada gilirannya mengacaukan titik jepret, karena itu bergantung pada dimensi wadah (lebar / kolom, tinggi / baris).

Jika saya memetakan snapping ke elemen rendering yang menimbulkan 2 masalah: renderer bergantung pada ukuran layar, orientasi, kepadatan piksel, dan dimensi elemen gambar yang ditentukan pengguna. Ini dapat berisi item yang keduanya lebih besar dari itu (misalnya di luar layar, yang dapat meluncur masuk) dan lebih kecil (misalnya jika saya membuat desktop 1 dan desktop2 terlihat pada saat yang sama. Dalam semua kasus tersebut, gertakan dan batasan lainnya harus dipertahankan .

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

mengapa Anda tidak menggunakannya sebagai konstanta? Bisakah Anda mengatur sesuatu yang global, seperti itu:

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

perbarui rektifikasi itu pada setiap perubahan ukuran, dan kerjakan dengan itu. Mengapa Anda membutuhkan "lel.width" dan "lel.height"?

LEL. Yang itu tidak ada hubungannya dengan apa pun, itu hanya Sprite yang dapat dipindahkan dan saya mengatur lebar dan tinggi karena gambar aslinya terlalu besar dan saya harus menyesuaikannya menjadi persegi panjang. Jika Anda melihat kode di dalamnya, Anda akan melihat wadah utama untuk "ikon" itu adalah desktop1 dan itu yang saya coba pasang ikonnya. Yang satu itu milik desktopLayer dan desktopLayer adalah yang saya letakkan di atas panggung.

Apa yang saya coba tiru adalah perilaku layar Peluncur Android dengan beberapa tampilan yang dapat digesek dan kisi ikon di atas latar belakang desktop.

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

Saya masih tidak mengerti apa yang Anda inginkan. Batas kontainer PIXI bekerja persis seperti yang seharusnya. Anda bukanlah orang pertama yang melakukan kesalahan ini.

Oh, pembuat napas, saya tidak bisa melakukan ini lagi. Adakah yang bisa melihat contoh, gerakkan rageface di sekitar dan beri tahu saya mengapa omong kosong dengan garis itu terjadi dan apakah itu bug / fitur yang hilang di PIXI atau jika saya memiliki kesalahan dalam kode?

Saya pikir itu karena garis Anda benar-benar memengaruhi lebar dan tinggi wadah dan Anda menggunakan properti tersebut untuk menggambar garis di tempat pertama.

Juga codepen tidak bekerja untuk saya lagi, entah bagaimana. Ada ide mengapa?

Ya itu rusak untuk saya juga karena saya tidak sengaja mengomentari panggilan init, saya buruk, maaf, diperbaiki. Ya, Anda benar - itulah yang saya lakukan dan saya tidak melihat cara lain bagi saya untuk menggambar garis-garis itu untuk merefleksikan grid secara visual. Jadi apa tepatnya yang akan Anda usulkan agar saya menggambar garis-garis ini? Siapkan beberapa jenis objek meta-only Rectangle yang selalu menyalin dimensi dari wadah yang dirender terkait dan menggunakannya untuk mendapatkan snapping point dan posisi lain? Itu tampaknya seperti rekayasa berlebihan seputar masalah alih-alih menyelesaikannya. Adakah alasan mengapa penampung tidak bisa memiliki "luapan" seperti elemen DOM normal?

Saya memposting ini sebagai masalah bukan karena tidak ada solusi tetapi karena saya tidak dapat melihat pembenaran untuk perilaku tidak logis ini. Terutama karena garis tidak benar-benar keluar dari batas wadah, mereka ditarik dari ujung ke ujung. Dalam produk yang saya buat, pengguna diharapkan melakukan banyak interaksi dengan konten, saya khawatir jika saya harus menyiapkan "persegi panjang referensi" untuk setiap objek dalam adegan, kode akan sangat berantakan dan sulit untuk dipertahankan. .

Anda menyebutkan bahwa saya memiliki "kesalahan" dalam kode saya. Apa kesalahan itu? Saya mencari dengan sangat teliti tetapi tidak dapat menemukan logika yang salah.

Gunakan beberapa variabel global, bukan "lebar / tinggi" yang berubah. Perbarui variabel itu bila perlu.

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

Jika Anda menginginkan batas "lokal", buatlah, tetapi jangan gunakan variabel yang sama seperti pixi:

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

Kesalahannya adalah sama sekali tidak ada tata letak di PIXI. "width" dan "height" memiliki arti yang berbeda. Anda tidak dapat menjepit kabel anak dengan tinggi lebar induk, karena anak mempengaruhi mereka.

Tidak ada cara bagi PIXI untuk mengetahui bahwa Anda menginginkan lebar / tinggi dari beberapa persegi panjang yang Anda gambar di dalam grafik, dan bukan keseluruhan batas grafik (bagaimana jika ada lingkaran juga?), Dan bukan batas anak. Satu-satunya logika yang masuk akal untuk batasan adalah dengan memasukkan semua yang ada di dalamnya.

Bayangkan kita memiliki wadah dengan dua sprite, masing-masing memiliki (w = 10, h = 10), satu di (0,0) detik satu di (100000, 100000). Berapa lebar dan tinggi wadah itu? Juga, bahkan jika kita entah bagaimana memperbaiki batasan, apa pengaruhnya?

Dan bagaimana jika kita ingin mengubah lebar dan tinggi, bagaimana perubahan itu akan mempengaruhi elemen di dalam wadah?

Saya tidak bercanda, sangat sulit bagi saya untuk membayangkan desain API lainnya. Jika Anda memiliki beberapa ide, mungkin komponen tambahan untuk tata letak, silakan tulis di sini. Ingatlah bahwa kita berurusan dengan rendering panggung dan bukan GUI, kinerja adalah masalah nyata.

Hai @megakoresh , saya rasa saya tahu apa yang menyebabkan kebingungan di sini. Karena tujuan utama pixi adalah untuk merender objek 2D, hampir semua API diarahkan untuk itu. Batasan bisa sangat membingungkan.

Di pixi, batas Sprite ditentukan oleh tekstur. Artinya, ukuran hasil akhir dari objek yang dirender. Demikian pula, karena Container adalah _not digambar_, dan oleh karena itu batas-batasnya ditentukan oleh turunannya. Terutama, dengan batasan anak-anak itu. Untuk objek Grafik, batas ditentukan oleh geometri yang Anda gambar di dalamnya. Jika Anda menggambar persegi panjang lain dalam objek Grafik di luar batas saat ini, batas tersebut akan meluas untuk menyertakan geometri yang baru digambar.

Mudah-mudahan itu masuk akal, dan memberi Anda konsep singkat tentang bagaimana batasan disusun di Pixi.

Sekarang, khususnya untuk contoh Anda, saya yakin masalah Anda berasal dari kesalahpahaman tentang cara kerja batas untuk objek Grafik. Saya pikir Anda kehilangan bahwa menggambar kisi Anda mengubah batas objek Grafik ( desktop1 ) yang berisi kotak hijau ( wonderfulRectangle ).

Anda dapat melihat bahwa setelah pengundian pertama, kisi Anda melebar dari ukuran viewport:

Ini memperluas batas dari objek Grafik induk ( desktop1 ) untuk menyertakan geometri out-of-viewport. Ini membuat lebar Anda lebih besar, yang membuang penghitungan kisi berikutnya, dan siklus berlanjut. Ingat, garis memiliki ketebalan dan karena itu mengambil lebar.

Ada beberapa cara untuk memperbaikinya, salah satu yang terlintas dalam pikiran adalah karena kisi Anda memenuhi seluruh ukuran viewport, cukup gunakan ukuran viewport daripada ukuran orang tua Anda. Ini berarti jika / saat Anda menggambar lebih banyak geometri di luar area pandang, penghitungan kisi Anda tidak akan pernah berubah. Karena rendering viewport tidak mengubah ukuran.

Jika itu bukan pilihan, misalnya area grid Anda bukanlah ukuran viewport. Anda bisa melakukan kalkulasi berdasarkan "ukuran yang diketahui" dari area grid. Saya pikir itulah yang coba dikatakan Ivan tentang penggunaan instance Rectangle statis. Pada dasarnya, putuskan bahwa kisi Anda adalah 800x600 dan lakukan penghitungan berdasarkan itu alih-alih menjalankan batas objek yang dirender sebenarnya di tempat kejadian.

Saya telah memperbarui codepen untuk menggunakan metode viewport yang saya jelaskan. Beri tahu saya jika Anda memiliki pertanyaan lebih lanjut!

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

LOL k. Jadi dengan upaya gabungan Anda, saya pikir saya memahami inti dari masalah: Saya pikir saya berpikir bahwa jika perpustakaan sering disatukan dengan perpustakaan kanvas, saya berasumsi itu adalah hal yang sama, yang jelas tidak. Saya kira kemudian mengurus pengelompokan objek visual dan hal-hal seperti overflow sederhana tidak dalam ruang lingkup (mungkin ketika saya mempelajari perpustakaan lebih lanjut saya dapat membuat plugin untuk itu) dan saya perlu mengurus sendiri hal-hal itu, sementara PIXI sendiri yang mengurusnya hanya menampilkan sesuatu di layar. Kasus ditutup, terima kasih.

Utas ini telah dikunci secara otomatis karena tidak ada aktivitas baru-baru ini setelah ditutup. Silakan buka masalah baru untuk bug terkait.