数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服饰研究
法律研究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, // pen width
penColor: "#e00", // pen color
close: false, // Use close command for path. Default is false.
curve: true, // Use curve command for path. Default is true.
delay: 60, // Set how many ms to draw points every.
fill: "none", // Set fill attribute for path. default is `none`
});
const handleDownload = useCallback(() => {
draw.download(); // default svg download
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");
// Change pen width draw.changePenWidth(10);
// Change fill attribure of svg path element. draw.changFill("#00b");
// Change throttle delay of drawing draw.changeDelay(10);
// Set whether to use curved comma for svg path element. draw.changCurve(false);
// Set whether to use curved comma for svg path element. 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， 它通常处理每项设置，例如笔宽、笔色、下载绘图、撤消、清除等。
输出
现在，让我们检查输出 −
更新时间：29-Sep-2021
1K+ 次浏览
广告