React 签字手写签名组件 react-signature

news/2024/6/23 20:32:27

在这里插入图片描述

安装依赖包

npm install @uiw/react-signature

示例代码

import React, { useRef } from "react";
import Signature from '@uiw/react-signature';export default function App() {const $svg = useRef(null);const handle = (evn) => $svg.current?.clear();return (<><Signature ref={$svg} /><button onClick={handle}>Clear</button></>);
}

Readonly

import React, { useRef, useEffect } from "react";
import Signature from '@uiw/react-signature';const points = {"path-01": [[81.546875,38.87890625],[82.34375,37.55078125],[84.27734375,35.2265625],[87.73046875,33.2421875],[94.98046875,30.87890625],[106.29296875,28.6796875],[118.23828125,27.71875],[126.6953125,29.45703125],[134.9375,36.22265625],[141.8359375,47.13671875],[143.9765625,59.53515625],[141.8671875,76],[128.1484375,98.9609375],[106.203125,118.87109375],[95.04296875,125.8203125],[94.5859375,125.04296875],[94.7265625,122.04296875],[97.90234375,115.30859375],[109.28515625,102.3046875],[129.75390625,86.796875],[155.27734375,76.14453125],[184.99609375,71.8828125],[218.16015625,73.33984375],[249.26953125,77.8671875],[264.2421875,81.10546875],[266.51171875,82.35546875],[267.69921875,82.99609375],[267.64453125,83.08203125],[267.73046875,82.6875],[267.73828125,80.4921875],[267.83203125,75.4765625],[268.36328125,66.6484375],[268.84765625,56.4609375],[268.421875,46.88671875],[266.9296875,40.86328125],[264.90625,38.4765625],[262.87890625,37.30859375],[258.68359375,39.13671875],[251.265625,43.80078125],[242.21484375,51.79296875],[232.60546875,63.21484375],[222.6484375,78.53125],[213.01171875,94.58984375],[206.3203125,104.57421875],[201.64453125,109.59375],[198.61328125,111.87109375],[197.24609375,111.3671875],[195.421875,109.23828125],[193.87890625,104.91015625],[193.7265625,99.140625],[198.671875,89.87109375],[214.1015625,75.14453125],[243.25390625,54.8671875],[290.3671875,29.3515625],[329.31640625,10.6875],[338.9609375,6.70703125],[338.5234375,9.07421875],[336.8671875,15.4453125],[331.4296875,28.4140625],[323.234375,43.5234375],[312.70703125,57.9609375],[302.296875,66.97265625],[293.85546875,70.734375],[287.6484375,72.25],[283.45703125,70.9453125],[280.51171875,68.09375],[279.5390625,64.13671875],[280.828125,60.0234375],[284.98828125,56.40625],[294.63671875,54.62109375],[307.8984375,56.17578125],[316.7890625,62.65234375],[317.5859375,74.11328125],[309.1640625,92.50390625],[295.12109375,110.55859375],[282.93359375,123.125],[278.58203125,129.00390625],[279.46875,129.80859375],[285.25390625,129.26953125],[299.71484375,125.71875],[321.41015625,118.89453125],[349.296875,108.58203125],[372.53125,98.8671875],[387.57421875,91],[395.23046875,84.53125],[396.7421875,79.3046875],[395.31640625,75.45703125],[389.86328125,73.57421875],[374.875,77.3203125],[347.36328125,88.46875],[310.44140625,107.75],[273.14453125,130.30078125],[252.08984375,145.77734375],[246.2890625,152.421875],[245.4609375,153.8046875],[245.3671875,153.1640625],[245.78515625,148.46875],[247.5859375,136.29296875],[250.55078125,119.38671875],[253.1796875,107.87890625],[255.4765625,102.29296875],[257.40625,99.61328125],[260.58203125,99.8125],[273.9453125,105.66015625],[296.24609375,118.10546875],[326.40234375,138.03125],[355.63671875,158.3515625],[368.66796875,167.1796875],[373.015625,170.12109375],[374.7578125,170.8203125],[374.73046875,169.78125],[374.6953125,167.3203125],[374.765625,161.75],[375.6328125,154.09375],[377.94921875,146.08984375],[380.94921875,140.23046875],[383.6640625,136.3046875],[385.0546875,134.08203125],[385.19140625,133.45703125],[384.81640625,132.41015625]],"path-02": [[335.0078125,77.8828125],[335.31640625,77.984375],[336.16796875,78.30078125],[337.640625,79.0546875],[339.65234375,80.44140625],[342.88671875,82.921875],[347.0625,86.28125],[353.9296875,91.546875],[358.88671875,95.125],[359.7734375,95.6875],[360.48828125,96.19921875],[360.2265625,96.42578125]]
}export default function App() {return (<Signature defaultPoints={points} readonly fill="#6b85e4" />);
}

Background Color & Text color

背景透明度可以通过 --w-signature-background:transparent; 设置

import React, { useRef } from "react";
import Signature from '@uiw/react-signature';export default function App() {const $svg = useRef(null);const handle = (evn) => $svg.current?.clear();return (<><Signature ref={$svg} fill="red" style={{ "--w-signature-background": "#e4e6ef" }} /><button onClick={handle}>Clear</button></>);
}

Create Points

import React, { useRef, useState, useCallback, useEffect } from "react";
import Signature from '@uiw/react-signature';export default function App() {const $svg = useRef(null);const [points, setPoints] = useState([])const handle = (evn) => {$svg.current?.clear();setPoints([])}const handlePoints = (data) => {if (data.length > 0) {setPoints([ ...points, JSON.stringify(data) ]);}}return (<><Signature ref={$svg} onPointer={handlePoints} /><button onClick={handle}>Clear</button>{points.map((item, idx) => {return <pre key={idx} style={{ whiteSpace: 'pre-wrap' }}>{item}</pre>})}</>);
}

Render Path

import React, { useRef, useEffect } from "react";
import Signature from '@uiw/react-signature';const points = {"path-1": [[83.52734375,63.6015625],[83.22265625,64.02734375],[81.86328125,66.0390625],[78.69140625,70.90625],[72.76171875,80.44140625],[67.01171875,91.421875],[64.5390625,98.19921875],[63.83203125,101.25390625],[63.640625,102.5078125],[63.62109375,102.7109375],[63.96484375,102.22265625],[64.890625,100.87890625],[66.3671875,98.515625]],"path-2": [[116.5546875,65.8359375],[117.3125,65.8359375],[119.23046875,65.90625],[122.078125,66.39453125],[125.44140625,67.51171875],[128.33203125,69.2421875],[130.6484375,71.53515625],[131.94140625,73.6796875],[132.28125,75.65234375],[132.0625,77.5],[130.33203125,79.78125],[126.4921875,83.24609375],[120.9375,87.5234375],[114.859375,91.13671875],[108.09765625,93.66796875],[101.8359375,94.7734375],[96.26953125,94.7734375],[92.23828125,94.90625],[89.94921875,94.96484375],[88.234375,95.04296875],[88.03515625,95.08984375],[89.6015625,95.4296875],[94.75,96.640625],[107.55859375,98.640625],[123.6171875,100.09375],[135.5546875,100.734375],[141.140625,101.03515625],[142.2578125,101.08984375]]
}export default function App() {return (<SignaturedefaultPoints={points}renderPath={(path, keyName) => {if (keyName === 'path-1') {return <path d={path} fill="red" />}if (keyName === 'path-2') {return <path d={path} fill="blue" />}}}/>);
}

Stroke

import React, { useRef, useEffect } from "react";
import Signature from '@uiw/react-signature';const points = {"path-1": [[83.52734375,63.6015625],[83.22265625,64.02734375],[81.86328125,66.0390625],[78.69140625,70.90625],[72.76171875,80.44140625],[67.01171875,91.421875],[64.5390625,98.19921875],[63.83203125,101.25390625],[63.640625,102.5078125],[63.62109375,102.7109375],[63.96484375,102.22265625],[64.890625,100.87890625],[66.3671875,98.515625]],"path-2": [[116.5546875,65.8359375],[117.3125,65.8359375],[119.23046875,65.90625],[122.078125,66.39453125],[125.44140625,67.51171875],[128.33203125,69.2421875],[130.6484375,71.53515625],[131.94140625,73.6796875],[132.28125,75.65234375],[132.0625,77.5],[130.33203125,79.78125],[126.4921875,83.24609375],[120.9375,87.5234375],[114.859375,91.13671875],[108.09765625,93.66796875],[101.8359375,94.7734375],[96.26953125,94.7734375],[92.23828125,94.90625],[89.94921875,94.96484375],[88.234375,95.04296875],[88.03515625,95.08984375],[89.6015625,95.4296875],[94.75,96.640625],[107.55859375,98.640625],[123.6171875,100.09375],[135.5546875,100.734375],[141.140625,101.03515625],[142.2578125,101.08984375]]
}export default function App() {return (<SignaturedefaultPoints={points}options={{size: 6,}}renderPath={(path, keyName) => {return (<><pathd={path}strokeWidth="3"stroke="blue"fill="transparent"strokeLinejoin="round"strokeLinecap="round"pointerEvents="all"/><pathd={path}strokeWidth="0"stroke="transparent"fill="#dadada"strokeLinejoin="round"strokeLinecap="round"pointerEvents="all"/></>)}}/>);
}

https://www.xjx100.cn/news/3118983.html

相关文章

uniapp开发小程序使用axios进行网络请求 uniapp 小程序调试

前言 本篇最好放到项目的【README.md】文件中,方便每次发布的时候检查纠错,毕竟好记性不如烂笔头。而且其他开发者帮忙修改bug、发布新版本的时候,只需要根据这个事项就能实现整个流程的提审发布,提高效率。 1、微信小程序配置 1.1、检查APPID是否正确 测试:wx--------…

第八天:信息打点-系统端口CDN负载均衡防火墙

信息打点-系统篇&端口扫描&CDN服务&负载均衡&WAF防火墙 一、知识点 1、获取网络信息-服务器厂商&#xff1a; 阿里云&#xff0c;腾讯云&#xff0c;机房内部等。 网络架构&#xff1a; 内外网环境。 2、获取服务信息-应用协议-内网资产&#xff1a; FTP…

OpenHarmony 4.0 Release 编译及报错

1、环境准备 安装下面这三东西&#xff0c;是为了下载 Harmony 源码 sudo apt install curl sudo apt install python3-pip sudo apt install git-lfs 安装下面这五个东西&#xff0c;是为了解决编译到最后报错(头铁不信的&#xff0c;你可以试试&#xff0c;等最后再安装) …

Web实现悬浮球-可点击拖拽禁止区域

这次要实现的是这种效果&#xff0c;能够在页面上推拽和点击的&#xff0c;拖拽的话&#xff0c;就跟随鼠标移动&#xff0c;点击的话&#xff0c;就触发新的行为&#xff0c;当然也有指定某些区域不能拖拽&#xff0c;接下来就一起来看看有什么难点吧~ 需要监听的鼠标事件 既…

docker基础操作及部署springboot项目流程

一、安装docker及基础命令 1.centos系统安装https://www.runoob.com/docker/ubuntu-docker-install.html curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun2.启动docker服务 systemctl start docker3.查看docker服务是否启动成功 docker info4.设置开机…

Leetcode2336 无限集中的最小数字

题目&#xff1a; 现有一个包含所有正整数的集合 [1, 2, 3, 4, 5, ...] 。 实现 SmallestInfiniteSet 类&#xff1a; SmallestInfiniteSet() 初始化 SmallestInfiniteSet 对象以包含 所有 正整数。int popSmallest() 移除 并返回该无限集中的最小整数。void addBack(int nu…

【STM32】OLED显示屏

1 调试方式 1. 串口调试&#xff1a;通过串口通信&#xff0c;将调试信息发送到电脑端&#xff0c;电脑使用串口助手显示调试信息 2. 显示屏调试&#xff1a;直接将显示屏连接到单片机&#xff0c;将调试信息打印在显示屏上 3. Keil调试模式&#xff1a;借助Keil软件的调试模…

一文秒懂|Linux字符设备驱动

我的圈子&#xff1a; 高级工程师聚集地 我是董哥&#xff0c;高级嵌入式软件开发工程师&#xff0c;从事嵌入式Linux驱动开发和系统开发&#xff0c;曾就职于世界500强公司&#xff01; 创作理念&#xff1a;专注分享高质量嵌入式文章&#xff0c;让大家读有所得&#xff01; …