Pixi.js: Peristiwa interaksi tingkat viewport

:+1: itu yang harus saya lakukan

Hai teman-teman! Saya ingin membantu Anda dengan ini. Idenya di sini adalah untuk menghindari perhitungan peristiwa di luar viewport?

Tidak, idenya adalah saat ini Anda tidak dapat menangani peristiwa interaksi di seluruh area pandang. Di v2 Anda dapat mendengarkan acara di atas panggung dan itu akan mengembalikan semua acara di seluruh viewport terlepas dari apakah ada sesuatu untuk berinteraksi atau tidak. Saat ini di v3 itu tidak mungkin.

Terkait dengan #2071

:+1:

Apakah ini masih berlaku untuk versi 4?

Ya, itu masih terjadi. Saat ini cara terbaik adalah membuat persegi panjang dan memperbaruinya dengan mengubah ukuran

stage.hitArea = new PIXI.Rectangle(0, 0, renderer.width/renderer.resolution, renderer.height/renderer.resolution);

Peristiwa interaksi global tersedia di InteractionManager melalui #2658. Ini di 4.0.0-rc3

Apakah ada informasi tentang cara kerjanya?

Sepertinya saya memiliki implementasi dasar yang berfungsi dengan menambahkan .on('mousedown'.. ke panggung tetapi itu hanya menyala ketika mengarahkan mouse ke bawah pada grafik di dalam panggung ketika saya ingin itu menyala di mana saja di atas panggung.

Apakah ini karena panggung tidak memiliki representasi grafis nyata dan dengan demikian jika Anda tidak mengklik salah satu objek panggung/wadah maka Anda tidak benar-benar mengklik panggung dan saya harus melakukan apa yang disarankan ivanpopelyshev?

EDIT: Gores itu, solusi yang benar adalah membuat manajer interaksi baru yang melewati penyaji, seperti:

const interactionManager = new PIXI.interaction.InteractionManager(renderer);
interactionManager
    on('mousedown', _onMouseDown)
    on('mouseup', _onMouseUp)
    on('mouseupoutside', _onMouseUp);

@SamStonehouse : Apakah ini membantu?

let backdrop = new PIXI.Container();
backdrop.interactive = true;
backdrop.containsPoint = () => true;

// add backdrop to scene graph...

Memiliki interactive = false mungkin merupakan masalah dengan panggung, saya tidak dapat memeriksanya tetapi itu tidak masalah sekarang karena manajer interaksi tampaknya melakukan apa yang saya butuhkan, satu-satunya masalah yang saya miliki sekarang adalah benar klik tidak diambil karena mereka membuka menu konteks tetapi itu tidak terkait dengan PR ini.

@SamStonehouse sesuatu seperti ini:

var renderer = new PIXI.autoDetectRenderer();
renderer.plugins.interaction.on('mousedown', function(){
    console.log("Mouse is down");
});

Perhatikan juga bahwa #2658 hanya memancarkan subset peristiwa yang disediakan oleh InteractionManager (misalnya, bukan rightdown ).

Menarik @bigtimebuddy yang berfungsi juga, saya tidak tahu cara yang benar.

renderer.plugins atau melalui new PIXI.interaction.InteractionManager ada ide?

@akbr Saya berada di bawah asumsi kiri/kanan/tengah akan ditangani oleh acara mousedown yang sama, tombol tengah tampaknya

@SamStonehouse Sementara keduanya berfungsi, saya akan merekomendasikan renderer.plugins karena sudah dibuat.

@bigtimebuddy Terima kasih banyak

Saya juga telah memecahkan masalah klik kanan, ini memang acara mouse lain (yang menurut saya intuitif).

Terima kasih semuanya

Hai, ini bekerja dengan sangat baik untuk mengimplementasikan fungsi panning/zooming dengan Pixi v4. Namun, e.stopPropagation tampaknya tidak berfungsi lagi untuk sprite di dalam viewport. Apakah ada cara agar acara viewport berfungsi dengan hubungan arus pendek acara?

Atau, apakah ada cara untuk mengimplementasikan fungsionalitas drag-and-pan tanpa menggunakan renderer.plugins.interaction ? Sebelumnya, saya telah menyiapkan wadah panggung saya dengan acara mouse dan PIXI.Rectangle hitArea dan mencoba menyediakan panggung dengan yang baru setiap kali pengguna menggeser, tetapi itu tampaknya tidak berfungsi karena beberapa alasan - Saya tidak dapat menggeser di luar area tempat hitArea pertama ditentukan, dan terkadang event mouseup tidak terdaftar.

EDIT: Saya dapat membuat metode lama saya berfungsi, ternyata saya menerapkan offset yang salah ke hitArea Rectangles yang baru saya buat, tetapi saya masih ingin tahu tentang cara mencegat peristiwa yang akan mencapai renderer.plugins.interaction karena itu sepertinya metode yang jauh lebih bersih. Terima kasih untuk perpustakaan yang bagus!

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