React Canvas Library — 使用 react-konva 入门

react-konva 是最受欢迎的用于绘制复杂 2D 图形的 React 画布库。它为 Konva Framework 提供声明式和响应式绑定，让你能够使用熟悉的 React 组件和数据流构建交互式画布应用程序。

使用 react-konva，你编写画布图形的方式与编写 React DOM 相同——使用 JSX 组件、props、state 和 hooks。每一种 Konva 图形（Rect、Circle、Line、Text、Image、Star 等）都可以作为 React 组件使用，并完整支持事件。

注意：react-konva 仅在浏览器中工作，不支持 React Native。

你可以在 konvajs.org 上找到数十个交互式演示——Konva 能做的一切，react-konva 都能通过 React 实现。可以这样理解：Konva 之于 react-konva，就像 DOM 之于 React。

安装

npm install react-konva konva --save

下面是一个基本示例，展示如何创建一个简单的画布和一些形状：

import React from 'react';
import { Stage, Layer, Rect, Circle, Text } from 'react-konva';

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text text="试着拖动形状" fontSize={15} />
        <Rect
          x={20}
          y={50}
          width={100}
          height={100}
          fill="red"
          shadowBlur={10}
          draggable
        />
        <Circle
          x={200}
          y={100}
          radius={50}
          fill="green"
          draggable
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

安装​

安装