React JS 前端中的 SVG 绘图

Z时代
2024-01-10
分类：综合

在本文中，我们将看到如何创建一个界面，用户可以在该界面上创建绘图、写名字和几乎任何艺术作品。您可以使用此功能允许用户在页面上签名。在这里，我们将使用“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>
   );
}