React实现画布——可绘制矩形和箭头

• 思路
• 代码
• 效果

本文将使用React、JSX、Rough.js实现一个简单的画布，可以绘制矩形和箭头。

思路

• 每一个图形包括：绘制的类型、起点的x坐标、起点的y坐标、宽、高。调用rough的generator()函数传入图形信息进行绘制，其中对于箭头需要进一步处理：根据宽高确定终点，并且定义角度等生成箭头的另外两条短线。
• 使用 React 的状态管理来跟踪当前拖动的元素和选中的元素类型。创建一个组件提供单选按钮供用户选择绘制的元素类型。添加画布元素：鼠标按下：创建新元素并开始拖动。鼠标抬起：结束拖动并保存元素状态。鼠标移动：更新当前元素的宽度和高度，实时反映在画布上。

代码

import React from "react";
import ReactDOM from "react-dom";
import rough from "roughjs/dist/rough.umd.js"; // 导入 Rough.js 库用于绘制粗糙图形

import "./styles.css";

var elements = []; // 定义一个数组用于存储绘制的元素

// 创建一个新元素的函数
function newElement(type, x, y) {
  const element = { // 定义元素对象
    type: type, // 元素类型
    x: x, // 元素的 x 坐标
    y: y, // 元素的 y 坐标
    width: 0, // 元素的宽度
    height: 0 // 元素的高度
  };
  generateShape(element); // 生成元素的形状
  return element; // 返回元素对象
}

// 旋转函数，围绕指定点旋转线段
function rotate(x1, y1, x2, y2, angle) {
  // 旋转公式：
  // 

标签：画布,y2,const,元素,element,React,箭头,x2,矩形	

From： https://www.cnblogs.com/lushuang55/p/18496223