canvas在react里的应用,了解下吧。我们会用到react-konva插件。
react-konva
和react-canvas
是github
上星星比较多的react
相关canvas
第三方库。由于react-canvas
从17
年3
月之后就没有更新了,且不支持react 16
,因此不再考虑。这里主要介绍react-konva
的使用。React Konva
是一个JavaScript
库,用于使用React
绘制复杂的画布图形。可以让我们像操作 DOM 一样来操作 canvas,并提供了对 canvas 中元素的事件机制,拖放操作的支持。基本概念
把整个视图看做一个舞台stage
。而舞台中的每一层,看做layer
。layer
层中有许多group
组。在group
中绘制画图、图片等shape
。
Stage | +------+------+ | | Layer Layer | | +-----+-----+ Shape | | Group Group | | + +---+---+ | | | Shape Group Shape | + | Shape
实例说明:
import React, { Component } from "react"; import Konva from "konva"; import { render } from "react-dom"; import { Stage, Layer, Rect, Text } from "react-konva"; class ColoredRect extends React.Component { state = { color: "green" }; handleClick = () => { this.setState({ color: Konva.Util.getRandomColor() }); }; render() { return ( <Rect x={20} y={20} width={50} height={50} fill={this.state.color} shadowBlur={5} onClick={this.handleClick} /> ); } } class App extends Component { render() { return ( <Stage width={window.innerWidth} height={window.innerHeight}> <Layer> <Text text="Try click on rect" /> <ColoredRect /> </Layer> </Stage> ); } }
网友评论文明上网理性发言 已有0人参与
发表评论: