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.

Kami menemukan tiga opsi untuk menerapkan skema semacam itu.

1. Lakukan semuanya dalam HTML lama yang baik

Kelebihan:

• Nyaman untuk ditata.

  
  
  
  
  

• Lebih mudah bekerja di React.

  
  
  
  
  

• Semuanya tersedia (A11Y).

  
  
  
  
  

Minus:

• DOM- DOM- ( — ).

  
  
  
  
  

• ( ).

  
  
  
  
  

2. SVG

, HTML.

3. Canvas

:

• ( ).

  
  
  
  
  

• .

  
  
  
  
  

:

• 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 , : , .

, 20%, 80—90%. , .

, , 16 . Ticker_tick

Pixi . , , - , — 16 .

16 ?

«60 » - , . , 60 , .

, 60 : 1000 ÷ 60 = 16,6666 .

Pixi.Ticker



60 canvas, . . , .

Pixi, .

, 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. . , - .