使用 Konva 开始 React 和 Canvas

react-konva 是一个用于通过 React 绘制复杂画布图形的 JavaScript 库。它为 Konva 框架提供了声明性和响应式的绑定。

这是一个使 React 能够与 HTML5 画布库协同工作的尝试。目标是拥有与普通 React 类似的声明性标记，以及类似的数据流模型。

目前，react-konva 不支持 React Native 环境。

目前，您可以将所有 Konva 节点和形状用作 React 组件，所有 Konva 事件在它们上都是以相同方式支持的。

注意：您可以在 https://konvajs.org/ 找到很多关于使用 Konva 的演示和示例。真的，去那里看看 Konva 可以为您做些什么。您也可以使用 react-konva 做同样的事情。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

安装​

安装