資料結構
網路
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+ 次瀏覽
廣告