在react中用canvas作一个电影院选座功能

前沿：项目采用create-react-app脚手架，就是作了一个效果因此只有一个页面可是也用了react-router-dom路由把details做为path=’/'首页了。

效果图：

1、App.js

import React from 'react';

import {BrowserRouter,Route} from 'react-router-dom'

import Details from './routes/Details'

function App() {

  return (

    <div className="App">

      <BrowserRouter>

        <Route path='/' component={Details}></Route>

      </BrowserRouter>

    </div>

  );

}



export default App;

这是入口文件的代码内容

 

2、Details.jsx

import React,{Component} from 'react';
import './Details.css';
import Footer from './Footer';
import SeatSelector from './SeatSelector'
class Details extends Component {
	
      state = {
            selectSeat:[]
      }
      addSeat = (seat)=>{
            this.setState(prevState=>({
                  selectSeat:[...prevState.selectSeat,seat]
            }))
      }
      removeSeat = (id)=>{
            this.setState({
                selectSeat:this.state.selectSeat.filter(seat=>seat.id !== id)
            })
      }
	render() {
        const {selectSeat} = this.state;
		return (
			<div>
             	<header>
             		<div className='header-container'>
             			<h2>决战时刻</h2>
             			<h3>今天 09-21 15:40~18:00 (国语 2D)</h3>
             		</div>
             	</header>
             	<div className='seat'>
             	    <SeatSelector selected={selectSeat} onAdd={this.addSeat} onRemove={this.removeSeat}/>
             	</div>
             	<Footer data={selectSeat} onRemove={this.removeSeat}/>
			</div>
		);
	}
}

export default Details;

这是效果的首页的东西了，分为3个部分（头部，中间canvas部分，底部），头部基本随便写，底部有一个选座显示几排几座的效果，主要是中间部分

 

3、SeatSelector.jsx

import React,{Component} from 'react';
import {data} from './mock/data.json';
const SET_WIDTH = 50;
const SET_HEIGHT = 50;

const lastSeat = data[data.length-1];
const canvas_width = lastSeat.x*SET_WIDTH;
const canvas_height = lastSeat.y*SET_HEIGHT;

class Details extends Component {
	componentDidMount(){
        this.ctx = this.refs.canvas.getContext('2d');
        const emptyImg = new Image();
        const selectImg = new Image();
        const soldImg = new Image();
        let count = 0;
        const loadCallback = ()=>{
            count++;
            if(count===3){
                this.emptyImg = emptyImg;
                this.selectImg = selectImg;
                this.soldImg = soldImg;
                 this.drawSeat();
            }
        }
        emptyImg.onload = loadCallback;
        selectImg.onload = loadCallback;
        soldImg.onload = loadCallback;

        emptyImg.src = './empty.png';
        selectImg.src = './select.jpg';
        soldImg.src = './sold.jpg';
    }
    componentDidUpdate(){
        this.ctx.clearRect(0,0,canvas_width,canvas_height)
        this.drawSeat();
        this.drawSelectSeat();
    }
    drawSeat(){
        const seatData = data;
        seatData.forEach((item,index)=>{
            const {isSold,x,y} = item;
            const offsetLeft = (x-1)*SET_WIDTH;
            const offsetTop = (y-1)*SET_WIDTH;
            if(isSold){
               this.ctx.drawImage(this.soldImg,offsetLeft,offsetTop,SET_WIDTH,SET_HEIGHT);
            }else{
               this.ctx.drawImage(this.emptyImg,offsetLeft,offsetTop,SET_WIDTH,SET_HEIGHT);
            }
        })
    }
    drawSelectSeat = ()=>{

        const {selected} = this.props;
        selected.forEach((item,index)=>{
            const {isSold,x,y} = item;
            const offsetLeft = (x-1)*SET_WIDTH;
            const offsetTop = (y-1)*SET_WIDTH;
            this.ctx.drawImage(this.selectImg,offsetLeft,offsetTop,SET_WIDTH,SET_HEIGHT);
        })

    }
    clickSeat = (e)=>{
        
        let offset = this.refs.canvas.getBoundingClientRect()
        let pageX = e.pageX - offset.left;
        let pageY = e.pageY - offset.top;

        let xPos = Math.ceil(pageX/SET_WIDTH);
        let yPos = Math.ceil(pageY/SET_HEIGHT);

        let seat = data.find(seat=>seat.x===xPos && seat.y===yPos);

        if( seat.isSold  ){
            return ;
        }

        const selectIndex = this.props.selected.findIndex(item=>item.id === seat.id);
        if(selectIndex>-1){
            this.props.onRemove(seat.id);
        }else{
            if(this.props.selected.length >= 6){
                alert("不能超过6个");
            }else{
                this.props.onAdd(seat);
            }
        }

    }
	render() {
		return (
			<div>
             	<canvas onClick={this.clickSeat}  ref='canvas' width={canvas_width} height={canvas_height}/>    
			</div>
		);
	}

}

export default Details;

这是中间canvas比较重要的一块了，你们能够看看代码了

4、Footer.jsx

import React from 'react';

import './footer.css';

const Footer = ({data,onRemove}) => {

  return (

    <footer>

     <div className='seatNum'>

     <ul>



     {

     data.map(seat=>(

<li key={seat.id} onClick={()=>onRemove(seat.id)}>

     <p>{seat.y}排{seat.x}座</p>

     <p>42.7元</p>

     </li>

     ))

     }



     </ul>

     </div>

     <div className='seatSelect'>请先选座</div>

    </footer>

  )

}



export default Footer;

这是底部代码