react-polybrush-2d

基于 Zrender 的标记工具，可以用于图片的区域绘制，并获得相应的绘制点坐标。

如何使用

yarn add react-polybrush-2d

import React from "react";
import ReactDOM from "react-dom";
import PolyBrush2D from "react-polybrush-2d";

const App = () => {
  return (
    <PolyBrush2D
      width={500}
      height={300}
      background={"#666"}
      errorColor={"#ff4d4f"}
      type={type}
      color={color}
      logging={true}
      onComplete={handleComplete}
      onBeforeDraw={handleOnBeforeDraw}
      onUndo={handleUndo}
    />
  );
};

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

绘制多边形，右键自动闭合

线段交叉则不能自动闭合

绘制线段

Props

| 参数 | 类型 | 说明 | 默认值 | 必填 | | ---------- | ------------------------------- | -------------------------------------------------- | ------- | ---- | | background | string | 绘制区域背景色 | #000000 | / | | beforeDraw | (event: MouseEvent) => boolean; | 生命周期，开始绘制前，true 开始绘制 false 停止绘制 | - | / | | color | string | 当前线段颜色，可以动态修改，仅支持 hex 格式 | #1890ff | / | | errorColor | string | 两条线段相交时的提示颜色 | #f5222d | / | | height | string | number | 绘制区域高度 | - | / | | logging | boolean | 是否显示绘制日志 | false | / | | onComplete | (group: Group) => void | 生命周期，绘制完成 | - | / | | onMove | (event: MouseEvent) => void | 生命周期，绘制中 | - | / | | onUndo | (group: Group) => void | 生命周期，撤销 | - | / | | type | string | 绘制的形状 polygon 多边形 line 线段 | polygon | / | | width | string | number | 绘制区域宽度 | - | / |

Events

| 参数 | 说明 | 返回值 | | ------------- | -------------------------------------- | ------- | | undo | 撤销前一个绘制的图形 | void | | getDataSource | 获取全部绘制的图形数据，查看控制台输出 | Group[] |

更新日志

1.1.1

• 🐞 修复声明文件

1.1.0

• 🐞 修复组件销毁后未解除已绑定的事件
• 🐞 修改 zrender 定义文件
• 🐞 修复绘制过程中可以动态修改绘图类型的问题
• 🐞 修复已绘线段无法撤销的问题
• 🌟 添加详细的 demo 演示
• 🌟 添加控制台绘制日志功能
• 🌟 添加自定义交叉线提示颜色
• 🌟 修改 api beforeDraw 为 onBeforeDraw
• 🌟 优化文档