React Canvas 库 — react-konva 入门

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

使用 react-konva 时，你可以像编写 React DOM 一样编写 Canvas 图形。你可以使用 JSX 组件、props、state 和 hooks。

每个 Konva 图形都可以作为 React 组件使用。这些图形包括 Rect、Circle、Line、Text、Image 和 Star，并完整支持事件。

注意：react-konva 只能在浏览器中使用，不支持 React Native。 React Native 没有 DOM，也没有 <canvas> 元素，因此 Konva 没有可以绘制的目标。如果你在 Web 上已经有一个 Konva 编辑器，把它放进 WebView 中运行是可行的方案。如果是新的原生应用，请使用 React Native Skia。

你可以在 konvajs.org 查看数十个交互式示例。Konva 的所有功能都可以通过 react-konva 在 React 中使用。

可以这样理解：Konva 与 react-konva 的关系，类似于 DOM 与 React 的关系。

安装

npm install react-konva konva --save

下面的基本示例创建一个包含多个图形的简单 Canvas：

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="Try to drag shapes" 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

人们使用 react-konva 构建什么

大多数生产级 Canvas 应用可以分为几类。下面每个示例都可以运行，其中一些还并排展示了原生 JavaScript 和 Vue 版本：

设计编辑器 — 选择、调整大小手柄、历史记录和图像导出
无限 Canvas 白板 — 使用稳定坐标平移和缩放
节点编辑器 — 带有动态连线的可拖动节点
图像标注工具 — 在图像上绘制结构化区域
平面图和座位预订图 — 大规模交互式几何图形
图像编辑器 — 变换和高分辨率导出
多人白板 — 通过 Yjs 共享 state

安装​

人们使用 react-konva 构建什么​

安装

人们使用 react-konva 构建什么