react实战 : react 与 canvas
有一个需求是这样的。
一个组件里若干个区块。区块数量不定。
区块里面是一个正六边形组件,而这个用 SVG 和 canvas 都可以。我选择 canvas。
所以就变成了在 react 中使用 canvas 的问题。
canvas 和 SVG 有一个很大的不同。
SVG 是标签,所以HTML怎么整,SVG 就怎么整。
而 canvas 是一套相对独立的 web API,以 canvas 标签为容器(HTML接口)。
所以在 react 中处理 canvas 类似于在 react 中处理第三方DOM库。比如那些需要依赖 jQuery 的各种UI组件库。
关于这个可以看 react 文档中的与第三方库协同。
组件文件的结构和上一个文章类似。
import React from 'react' class Polygon extends React.Component {} class polygonContainer extends React.Component {} export default polygonContainer
然后是 canvas 组件。
class Polygon extends React.Component { constructor(props){ super(props) this.state = { } } componentDidMount() { console.log("=== componentDidMount Polygon ===") this.init(this.props.data, this.props.sn) } componentDidUpdate() { console.log("=== componentDidUpdate Polygon ===") this.init(this.props.data, this.props.sn) } init = (item, sn) => { const getR = () => { return Math.min(size.width, size.height) * 0.375 } const getWordCoor = (index, centerCoor, sub, fontSize, fontLength) => { const getXCoor = (index, centerCoor, fontSize, fontLength) => { const standand = -1 return (centerCoor.x + fontLength / 2 * (index === 0 ? fontSize : (fontSize / 2)) * standand) } const getYCoor = (index, centerCoor, sub) => { const standand = index === 0 ? -0.3 : 0.6 return (centerCoor.y + sub * standand) } console.log(getXCoor(index, centerCoor, fontSize, fontLength)) return { x: getXCoor(index, centerCoor, fontSize, fontLength), y: getYCoor(index, centerCoor, sub) } } const getStrokeColor = (sn) => { return sn === 5 ? 'rgb(255, 114, 0)' : 'rgb(232, 172, 4)' } const getFillColor = (sn) => { return sn === 5 ? 'rgb(255, 192, 0)' : 'rgb(4, 154, 79)' } const canvas = document.getElementById("canvas" + sn); const size = { width: parseInt(this.props.size.width), height: parseInt(this.props.size.height), } canvas.width = size.width; canvas.height = size.height; const cc = canvas.getContext("2d"); // 多边形 const coorArray = [] cc.beginPath(); for (var i = 0 ; i < 6 ; i++) { var x = Math.cos((i * 60)/180 * Math.PI) * getR() + (size.width / 2) ; var y = -Math.sin((i * 60)/180 * Math.PI) * getR() + (size.height / 2); coorArray.push({x, y}) cc.lineTo(x,y); } cc.closePath(); cc.lineWidth = 2; cc.fillStyle = getFillColor(sn); cc.fill(); cc.strokeStyle = getStrokeColor(sn); cc.stroke(); // 文字 const centerCoor = { x: (coorArray[0].x + coorArray[3].x) / 2, y: coorArray[0].y } const sub = coorArray[0].y - coorArray[1].y const wordCoorArray = [ getWordCoor(0, centerCoor, sub, 14, item.name.length), getWordCoor(1, centerCoor, sub, 20, item.data.toString().length) ] cc.font="14px Arial" cc.strokeStyle = "#fff"; cc.fillStyle = "#fff"; cc.fillText(item.name, wordCoorArray[0].x, wordCoorArray[0].y); cc.font="20px Arial" cc.fillText(item.data, wordCoorArray[1].x, wordCoorArray[1].y); } render(){ const item = this.props.data const size = this.props.size const sn = this.props.sn const getColor = (item) => { return item.color } return ( <canvas id={'canvas' + sn}></canvas> ); } }
有几点需要说明一下。
- 因为 componentDidUpdate 钩子中 有 init 方法,所以 init 方法中不能再给 state 赋值,否则会触发无限循环。如果需要存值,则需要想别的办法。
-
getWordCoor 是计算文字位置的方法。六边形里面有文字内容。
- canvas 对象是通过 document.getElementById 获取的,而一个页面中肯定有多个 canvas ,此时就必须做出区分。我的方法是传一个序列号 sn (index + 1),当然生成 ID 是更好的做法。
- 响应式的样式对 canvas 是无效的。必须手动赋像素值。也就是说必须手动计算 size 。计算 size 的方法在父组件里面。
- for 循环是用来绘制路径的,就是个数学问题,Math 对象里有三角函数简化了一些运算。顺便把中心点坐标和六边形各个点的坐标存了一下。
- canvas 绘制方法不需要说了,百度一下即可。
然后是容器组件。
// 六边形测试 import React from 'react' // import Styles from './polygonContainer.less' class Polygon extends React.Component { constructor(props){ super(props) this.state = { } } componentDidMount() { console.log("=== componentDidMount Polygon ===") this.init(this.props.data, this.props.sn) } componentDidUpdate() { console.log("=== componentDidUpdate Polygon ===") this.init(this.props.data, this.props.sn) } init = (item, sn) => { // console.log(item) // console.log(sn) const getR = () => { return Math.min(size.width, size.height) * 0.375 } const getWordCoor = (index, centerCoor, sub, fontSize, fontLength) => { const getXCoor = (index, centerCoor, fontSize, fontLength) => { const standand = -1 return (centerCoor.x + fontLength / 2 * (index === 0 ? fontSize : (fontSize / 2)) * standand) } const getYCoor = (index, centerCoor, sub) => { const standand = index === 0 ? -0.3 : 0.6 return (centerCoor.y + sub * standand) } console.log(getXCoor(index, centerCoor, fontSize, fontLength)) return { x: getXCoor(index, centerCoor, fontSize, fontLength), y: getYCoor(index, centerCoor, sub) } } const getStrokeColor = (sn) => { return sn === 5 ? 'rgb(255, 114, 0)' : 'rgb(232, 172, 4)' } const getFillColor = (sn) => { return sn === 5 ? 'rgb(255, 192, 0)' : 'rgb(4, 154, 79)' } const canvas = document.getElementById("canvas" + sn); const size = { width: parseInt(this.props.size.width), height: parseInt(this.props.size.height), } // console.log(size) canvas.width = size.width; canvas.height = size.height; const cc = canvas.getContext("2d"); // 多边形 const coorArray = [] cc.beginPath(); for (var i = 0 ; i < 6 ; i++) { var x = Math.cos((i * 60)/180 * Math.PI) * getR() + (size.width / 2) ; var y = -Math.sin((i * 60)/180 * Math.PI) * getR() + (size.height / 2); coorArray.push({x, y}) cc.lineTo(x,y); } cc.closePath(); cc.lineWidth = 2; cc.fillStyle = getFillColor(sn); cc.fill(); cc.strokeStyle = getStrokeColor(sn); cc.stroke(); // 文字 const centerCoor = { x: (coorArray[0].x + coorArray[3].x) / 2, y: coorArray[0].y } const sub = coorArray[0].y - coorArray[1].y // console.log(centerCoor) // console.log(coorArray) const wordCoorArray = [ getWordCoor(0, centerCoor, sub, 14, item.name.length), getWordCoor(1, centerCoor, sub, 20, item.data.toString().length) ] // console.log(wordCoorArray) cc.font="14px Arial" cc.strokeStyle = "#fff"; cc.fillStyle = "#fff"; cc.fillText(item.name, wordCoorArray[0].x, wordCoorArray[0].y); cc.font="20px Arial" cc.fillText(item.data, wordCoorArray[1].x, wordCoorArray[1].y); } render(){ const item = this.props.data const size = this.props.size const sn = this.props.sn // console.log("Polygon render === ", size) const getColor = (item) => { return item.color } return ( <canvas id={'canvas' + sn}></canvas> // <div>asd</div> ); } } class polygonContainer extends React.Component { constructor(props){ super(props) this.state = { curcity:"" } } componentDidMount() { console.log("componentDidMount") console.log(new Date().getTime()) this.setState({ curcity:this.props.curcity }) } componentDidUpdate(){ console.log("componentDidUpdate") console.log(new Date().getTime()) } // total 总数 SN 序列号 getSize = () => { const pc = document.getElementById('pc') if (!pc) { return null } else { // const length = this.getDataBar().data.sData.length const base = { width:document.getElementById('pc').offsetWidth, height:document.getElementById('pc').offsetHeight } return function (total, SN) { // console.log(base) const standand = 2 const oneRowStd = 3 const ceil = Math.ceil(total / standand) const floor = Math.floor(total / standand) const basicHeight = (total > oneRowStd) ? (base.height / standand) : (base.height) // console.log(ceil, floor) // console.log(total, SN) if (SN <= ceil) { return { width:(total > oneRowStd) ? (base.width / ceil) : (base.width / total), height:basicHeight } } else { // console.log(123) // console.log((total > oneRowStd) ? (base.width / floor) : (base.width / total)) return { width:(total > oneRowStd) ? (base.width / floor) : (base.width / total) , height:basicHeight } } } } } theStyle = () => { const baseFlex = { display: 'flex', justifyContent: 'center', alignItems: 'center' } return { main:{ ...baseFlex, width:'100%', height:'100%', color:"#fff" }, tem:{ ...baseFlex, flex:"auto", color:'#fff' }, shellA:{ ...baseFlex, width:'100%', height:'100%' }, shellB:{ ...baseFlex, width:'100%', height:'50%' } } } getDataBar = () => { if (this.props.curcity && this.props.curcity === 'all') { return { data:{ sData:[ { name: 'a', data: 510 }, { name: 'a', data: 46 }, { name: 'a', data: 471 }, { name: 'a', data: 631 }, { name: 'a', data: 924 }, { name: 'a', data: 582 }, ] } } } else { return { data:{ sData:[ { name: 'a', data: 50 }, { name: 'a', data: 469 }, { name: 'a', data: 41 }, { name: 'a', data: 31 }, { name: 'a', data: 4 }, { name: 'a', data: 825 }, ] } } } } getContainer = () => { const size = this.getSize() if (!size) { return "" } const theStyle = this.theStyle() const dataBar = this.getDataBar() const Container = ((dataBar) => { const flexMatrix = [ [0,0], [1,0], [2,0], [3,0], [2,2], [3,2], [3,3], [4,3], [4,4], [5,4], [5,5], [6,5], [6,6] ] const sData = dataBar.data.sData const length = sData.length const matrix = flexMatrix[length] ? flexMatrix[length] : flexMatrix[12] if (matrix[0] === 0) { return "" } let temShell, temA, temB temA = sData.slice(0, matrix[0]).map((item, index) => <div style={theStyle.tem} key={index.toString()}> <Polygon data={item} sn={index + 1} size={size(length, (index + 1))} /> </div> ); if (matrix[1] === 0) { temB = "" } else { temB = sData.slice(matrix[0], (matrix[0] + matrix[1])).map((item, index) => <div style={theStyle.tem} key={index.toString()}> <Polygon data={item} sn={index + 1 + matrix[0]} size={size(length, (index + 1 + matrix[0]))} /> </div> ); } if (matrix[1] === 0) { temShell = <div style={theStyle.shellA} > {temA} </div> } else { temShell = [0,0].map((item, index) => <div style={theStyle.shellB} key={"temShell" + index.toString()}> {index === 0 ? temA : temB} </div> ); document.getElementById('pc').style.flexWrap = "wrap" } return temShell })(dataBar) return Container } render(){ const theStyle = this.theStyle() const curcity = this.state.curcity // const dataBar = this.props.dataBar return ( <div style={theStyle.main} id="pc"> { this.getContainer() } </div> ); } } export default polygonContainer
稍微说明一下。
- getSize 是计算区块大小的方法。这个方法返回一个 size 方法,在 getContainer 方法中输出 JSX 的时候会调用 size 方法得到宽高。
- 关于布局的问题(为什么写了个双层数组?)之前的文章里写过,不再赘述。
- 关于数据绑定的机制。通过 props 来绑定。
以上。
posted on 2019-11-26 16:35 fox_charon 阅读(4082) 评论(0) 编辑 收藏 举报