×

canvas在react里的应用

作者:Terry2020.09.02来源:Web前端之家浏览:9698评论:0

canvas在react里的应用,了解下吧。我们会用到react-konva插件。

  1. react-konvareact-canvasgithub上星星比较多的react相关canvas第三方库。由于react-canvas173月之后就没有更新了,且不支持react 16,因此不再考虑。这里主要介绍react-konva的使用。

  2. React Konva是一个JavaScript库,用于使用React绘制复杂的画布图形。可以让我们像操作 DOM 一样来操作 canvas,并提供了对 canvas 中元素的事件机制,拖放操作的支持。

  3. 基本概念
    把整个视图看做一个舞台stage。而舞台中的每一层,看做layerlayer层中有许多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>
    );
  }
}

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/reatct23048230948908.html

网友评论文明上网理性发言 已有0人参与

发表评论: