Membuat Skema Tempat Duduk untuk Bioskop dalam React: Tentang Kanvas, Desain Cantik dan Optimasi

Ekosistem Tinkoff yang kaya memiliki layanan gaya hidup. Anda dapat membeli tiket untuk berbagai acara - bioskop, teater, konser, acara olahraga di https://www.tinkoff.ru/entertainment/ , serta di aplikasi seluler.





Nama saya Vadim dan saya akan memberi tahu Anda bagaimana kami melakukannya di tim Hiburan di Tinkoff Bank.






Apa yang Anda perlukan untuk membeli tiket film?

Ketika Anda telah memutuskan film dan bioskop, Anda perlu memilih tempat duduk di bioskop - pelajari skema tempat duduk yang indah dan beli tiket terbaik.





desain skema tempat duduk
desain skema tempat duduk

Kami menemukan tiga opsi untuk menerapkan skema semacam itu.





1. Lakukan semuanya dalam HTML lama yang baik

Diagram HTML.  Ditemukan di Internet
Diagram HTML. Ditemukan di Internet

Kelebihan:





  • Nyaman untuk ditata.





  • Lebih mudah bekerja di React.





  • Semuanya tersedia (A11Y).





Minus:





  • DOM- DOM- ( โ€” ).





  • ( ).





2. SVG

, HTML.





Saya hanya berhasil menemukan peta metro di SVG
SVG

3. Canvas

Bergaya.  Terang.  Produktif.
. . .

:





  • ( ).





  • .





:





  • Server Side Rendering.





  • A11Y ( ยซ ยป).





canvas, , UX . DOM- . canvas Internet Explorer 11.





, , canvas , SVG- HTML-.





canvas

, canvas. , , โ€” Konva, PixiJS, Fabric.js Phaser.





PixiJS. Pixi: , . .





PixiJS. Pixi.App



(, , , , ). (Stage Pixi), 5 ร— 5 , โ€” Pixi









, . - , .





, 100 , , , .





React

: React?





. , . 





, , โ€” react-pixi-fiber. , JSX, Pixi canvas. 





Pixi. , Pixi.Text



react- <Text />







โ€” CustomPIXIComponent







. Pixi, JSX: Stage, Container, , react-.









. react-, , , . graphics props. , , .









?





. โ€” , : , , .





โ€” , .





. : , โ€” .





: retina- . SVG PixiJS: SVG.





.





PixiJS

:









A โ€” .

B โ€” .

C โ€” .

D โ€” .

E โ€” .

F โ€” .

G โ€” . 



โ€” width / 22. 

โ€” height / 16.

22 16, , โ€” .





: , . , PixiJS CustomPIXIComponent.





โ€” , , , , .



: , !









, ยซยป, , , , โ€” . .





.

sectors , , hallScheme, 236 .









  , SVG base64.









?

SVG - PixiJS.





โ€” HTML, .





, โ€” SVG react-. 





html-react-parser. HTML react-. Node.js, . , .





parseHtmlToReact



, .









JSX , : , .





Beginilah tampilan VTB Arena sekarang.
.

, 20%, 80โ€”90%. , .





, , 16 . Ticker_tick







Pixi . , , - , โ€” 16 .





16 ?

ยซ60 ยป - , . , 60 , .





, 60 : 1000 รท 60 = 16,6666 .





Pixi.Ticker



60 canvas, . . , .





Pixi, .





Kode sumber untuk komponen Tahap dari react-pixi-fiber
Stage react-pixi-fiber

, Pixi Stage react-pixi-library. , react-pixi-library Ticker .









sharedTicker



Pixi. , pixi- Ticker. Ticker .





Ticker . react-, props .





, , . canvas , .





, , Pixi Github wiki, :





  • Gotchas





  • C









, Pixi wiki .





, Pixi.Graphics , , . , , Pixi.Graphics.









  1. โ€” .





  2. canvas .





  3. Pixi , .





  4. . , - .












All Articles