React JS 前端中的 SVG 绘图

在本文中，我们将看到如何创建一个界面，用户可以在该界面上创建绘图、写名字和几乎任何艺术作品。您可以使用此功能允许用户在页面上签名。在这里，我们将使用“react-hooks-svgdrawing”包。

首先创建一个 React 项目 -

npx create-react-app tutorialpurpose

转到项目目录 -

cd tutorialpurpose

示例

安装react-hooks-svgdrawing包 -

npm i --save react-hooks-svgdrawing

这个库将用于实现容器，它允许我们使用鼠标或触摸板以 SVG 的形式绘制图形或任何东西。

在App.js中添加以下代码行-

import React, { useCallback } from "react";
import { useSvgDrawing } from "react-hooks-svgdrawing";

export default function App() {
   const [renderRef, draw] = useSvgDrawing({
      penWidth: 10, //笔宽
      penColor: "#e00", //笔颜色
      close: false, //对路径使用 close 命令。默认为假。
      curve: true, //对路径使用曲线命令。默认为真。
      delay: 60, //设置每次绘制点的毫秒数。
      fill: "none", //设置路径的填充属性。默认为“无”
   });
   const handleDownload = useCallback(() => {
      draw.download(); //默认svg下载
      draw.download({ extension: "svg", filename: "a.svg" });
      draw.download({ extension: "png", filename: "b.png" });
      draw.download({ extension: "jpg", filename: "c.jpg" });
   }, [draw.download]);
   const handleChangeParameter = useCallback(() => {
      // Change pen config draw.changePenColor("#00b");
      //改变画笔宽度 draw.changePenWidth(10);
      // Change fill attribure of svg path element. draw.changFill("#00b");
      //更改绘图的油门延迟 draw.changeDelay(10);
      //设置是否对 svg 路径元素使用弯逗号。draw.changCurve(false);
      //设置是否对 svg 路径元素使用弯逗号。draw.changeClose(true);
   }, [draw]);
   return (
      <div>
      <div
         style={{ width: 500, height: 500, border: "1px solid black" }}
         ref={renderRef} />
         <button onClick={draw.clear}>clear</button>
         <button onClick={draw.undo}>undo</button>
         <button onClick={handleDownload}>download</button>
      </div>
   );
}

解释

useSvgDrawing有两个参数

• 一个是引用，它被分配给任何元素以使区域或元素可绘制，并且

• 第二个参数是draw，它通常处理每个设置，如笔宽、笔颜色、下载绘图、撤消、清除等。

输出结果

现在，让我们检查输出 -

<video "="" controls="" xx_src="https://www.nhooo.com/assets/questions/media/57041/889877-1632899044.mp4">您的浏览器不支持 HTML5 视频。