react中使用react-konva实现画板框选内容

一、前言

本文用到的react-konva是基于react封装的图形绘制。Konva 是一个HTML5 Canvas JavaScript 框架，它通过对 2d context 的扩展实现了在桌面端和移动端的可交互性。Konva 提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能。你可以使用 Konva 在舞台上绘制图形，给图形添加事件，移动、缩放和旋转图形并且支持高性能的动画即使包含数千个图形。

1.1、API文档

英文文档点击【前往】，中文文档点击【前往】

1.2、Github仓库

点击【前往】访问Github仓库，在线示例地址，点击【前往】

二、图形

在线制图最基础的应用是拖拽元素，比如，在画布上拖拽一张图片或某种形状，对该图片进行缩放或旋转操作。

画布就是<Stage>，每个图层为<Layer>。

2.1、拖拽draggable

konva 中内置了很多形状的元素，比如圆形、矩形等，以下示例为星型，这里先用<Star>试一下：

import Konva from 'konva'
import { Circle, Rect, Stage, Layer, Text, Star } from 'react-konva'

const Shape = () => {
    const [star, setStar] = useState({
        x: 300,
        y: 300,
        rotation: 20,
        isDragging: false,
    })

    const handleDragStart = () => {
        setStar({
            ...star,
            isDragging: true,
        })
    }

    const handleDragEnd = (e: any) => {
        setStar({
            ...star,
            x: e.target.x(),
            y: e.target.y(),
            isDragging: false,
        })
    }

    return (
        <Stage width={1000} height={600}>
            <Layer>
                <Star
                    key="starid"
                    id="starid"
                    x={star.x}
                    y={star.y}
                    numPoints={5}
                    innerRadius={20}
                    outerRadius={40}
                    fill="#89b717"
                    opacity={0.8}
                    draggable
                    rotation={star.rotation}
                    shadowColor="black"
                    shadowBlur={10}
                    shadowOpacity={0.6}
                    shadowOffsetX={star.isDragging ? 10 : 5}
                    shadowOffsetY={star.isDragging ? 10 : 5}
                    scaleX={star.isDragging ? 1.2 : 1}
                    scaleY={star.isDragging ? 1.2 : 1}
                    onDragStart={handleDragStart}
                    onDragEnd={handleDragEnd}
                />
            </Layer>
        </Stage>
    )
}

其中，可以给 Star 配置一些基础的属性，如：x、y 指该元素在画布上的坐标位置，rotaition 指元素的旋转角度；fill 指元素的填充颜色，scaleX、scaleY 指元素在 x、y 轴上的放大比例等等。

在拖拽的时候，我们要给该元素添加一些拖拽事件，如上：添加 handleDragStart 更改isDragging属性，使其在拖动时产生形变；添加 onDragEnd 事件，更改isDragging和 x、y 属性，来改变拖动位置，关闭拖动形变特效等。

观察上面的代码发现某些属性和react-dnd类似，但在使用 drag 事件的时候，发现比 react-dnd 方便很多，可能因为底层是 canvas 的原因吧！

2.2、图片Image

有两种方式可以导入图片，一个是用 react-hooks，一个是调用 react 生命周期函数，这里为了图省事，用 hooks。

先安装 konva 的官方库use-image，use-image提供好了跨域属性anonymous，封装一下图片组件：

import { Image } from 'react-konva'
import useImage from 'use-image'

const KonvaIm