Skip to main content

React Canvas Library — 使用 react-konva 入门

React Konva 标志 — React 画布库

react-konva 是一个用于绘制复杂 2D 图形的 React 画布库。它为 Konva Framework 提供声明式绑定。你可以使用熟悉的 React 组件和数据流。

GitHub repository

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

注意：react-konva 仅在浏览器中运行，不支持 React Native。 React Native 没有 DOM，也没有 <canvas> 元素，因此 Konva 没有可供绘制的目标。如果你已经在 Web 上拥有一个 Konva 编辑器，那么将它运行在 WebView 中是一个实用的选择。对于新的原生应用，请使用 React Native Skia。

你可以在 konvajs.org 上找到几十个交互式演示。浏览器场景图功能可以通过 React 组件或 Konva 节点 refs 使用。对于 Node.js 渲染，请直接使用 Konva。可以这样理解：Konva 之于 react-konva，就像 DOM 之于 React。

安装​

react-konva 的主版本必须与 React 的主版本匹配。对于 React 19，请安装当前的软件包：

npm install react-konva konva

对于 React 18，请安装 react-konva 18：

npm install react-konva@18 konva

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

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

const App = () => {
  const [rectPosition, setRectPosition] = useState({ x: 20, y: 50 });
  const [circlePosition, setCirclePosition] = useState({ x: 200, y: 100 });

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text text="试着拖动形状" fontSize={15} />
        <Rect
          x={rectPosition.x}
          y={rectPosition.y}
          width={100}
          height={100}
          fill="red"
          shadowBlur={10}
          draggable
          onDragEnd={(e) => setRectPosition(e.target.position())}
        />
        <Circle
          x={circlePosition.x}
          y={circlePosition.y}
          radius={50}
          fill="green"
          draggable
          onDragEnd={(e) => setCirclePosition(e.target.position())}
        />
      </Layer>
    </Stage>
  );
};

export default App;

使用 react-konva 构建的应用​

大多数生产级画布应用都可以归入几种类型。下面的每个演示都可以运行，其中一些还会并排展示原生版本和 Vue 版本：