又到了每日分享了。这次分享的是：在react中用canvas做一个电影院选座功能。

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

效果图：

20191008150425.jpg

一、App.js

import React from 'react';

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

import Details from './routes/Details'

function App() {

return (

);

}

export default App;

这是入口文件的代码内容

二、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 (

);

}

}

export default Details;

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

三、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 (

);

}

}

export default Details;

这是中间canvas比较重要的一块了，大家可以看看代码了

四、Footer.jsx

import React from 'react';

import './footer.css';

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

return (

)

}

export default Footer;