react-signature-canvas 实现画笔与橡皮擦功能

react-signature-canvas git 地址

代码示例

import React, { Component } from 'react'
import { createRoot } from 'react-dom/client'import SignaturePad from '../../src/index.tsx'import * as styles from './styles.module.css'class App extends Component {state = { trimmedDataURL: null }isErasing = false;sigPad = {}clear = () => {this.sigPad.clear()}trim = () => {this.setState({trimmedDataURL: this.sigPad.getTrimmedCanvas().toDataURL('image/png')})}// 恢复画笔功能bruser = ()=>{this.isErasing = false;const canvas = this.sigPad._canvas;if (!this.isErasing && canvas) {const ctx = canvas.getContext('2d');ctx.globalCompositeOperation = 'source-over';}}//橡皮擦功能handleErase  = () => {this.isErasing = !this.isErasing;const canvas = this.sigPad._canvas;// 设置橡皮擦属性及样式if (this.isErasing && canvas) {const ctx = canvas.getContext('2d');ctx.fillStyle = '#e21061';ctx.globalCompositeOperation = 'destination-out';ctx.beginPath();ctx.arc(canvas.offsetLeft, canvas.offsetTop, 10, 0, 2 * Math.PI);ctx.fill();}}render() {const { trimmedDataURL } = this.statereturn <div className={styles.container}><div className={styles.sigContainer}><SignaturePad canvasProps={{className: styles.sigPad, }}options={{minWidth: 0.5, // 最小线条宽度maxWidth: 2, // 最大线条宽度penColor: "black" // 笔的颜色}}ref={(ref) => { this.sigPad = ref }} /></div><div style={{display:'flex',alignItems:'center',justifyContent:'space-around'}}><button className={styles.buttons} onClick={this.clear}>Clear</button><button className={styles.buttons} onClick={this.trim}>Trim</button><button className={styles.buttons} onClick={this.bruser}>Bruser</button><button className={styles.buttons} onClick={this.handleErase}>Erase</button></div>{trimmedDataURL? <img className={styles.sigImage} alt='signature'src={trimmedDataURL} />: null}</div>}
}createRoot(document.getElementById('container')).render(<App />)

 画笔成果展示:

橡皮擦擦除之后的效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/883780.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kafka 解决消息丢失、乱序与重复消费

一、引言 在分布式系统中&#xff0c;Apache Kafka 作为一种高吞吐量的分布式发布订阅消息系统&#xff0c;被广泛应用于日志收集、流式处理、消息队列等场景。然而&#xff0c;在实际使用过程中&#xff0c;可能会遇到消息丢失、乱序、重复消费等问题&#xff0c;这些问题可能…

Java知识巩固(十二)

I/O JavaIO流了解吗&#xff1f; IO 即 Input/Output&#xff0c;输入和输出。数据输入到计算机内存的过程即输入&#xff0c;反之输出到外部存储&#xff08;比如数据库&#xff0c;文件&#xff0c;远程主机&#xff09;的过程即输出。数据传输过程类似于水流&#xff0c;因…

中间件安全(三)

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 前言: 本文主要讲解apache命令执行漏洞&#xff08;cve_2021_41773&#xff09;。 靶场链接&#xff1a;Vulfocus 漏洞威胁分析平台 一&#xff0c;漏洞简介。 cve_2021_41773漏洞…

工欲善其事必先利其器——Anaconda安装教程(2024版本)

前言 在数据科学、机器学习、科学计算等领域&#xff0c;Python 因其简洁的语法和强大的库支持而广受欢迎。Anaconda 是一个流行的Python发行版&#xff0c;它包含了大量的科学计算和数据分析库&#xff0c;极大地方便了开发者和研究者的工作。本文将为您提供2024版本的Anacon…

ctfshow(155->158)--文件上传漏洞--绕过黑名单

Web155 进入界面&#xff1a; 审计&#xff1a; 前端校验&#xff1a;限制传入文件的后缀为.png MIME验证 黑名单过滤 思路/EXP&#xff1a; 先上传.user.ini文件&#xff1a; 将.user.ini.png文件上传&#xff0c;然后抓包去掉.png后缀&#xff0c;就同时绕过了前端校验…

第7次CCF CSP认证真题解

1、折点计数 题目链接&#xff1a;https://sim.csp.thusaac.com/contest/7/problem/0 100分代码&#xff1a; #include <iostream> using namespace std; int main(int argc, char *argv[]) {int n;cin >> n;int a[1010];for(int i 0; i < n; i){cin >&g…

我谈Canny算子

在Canny算子的论文中&#xff0c;提出了好的边缘检测算子应满足三点&#xff1a;①检测错误率低——尽可能多地查找出图像中的实际边缘&#xff0c;边缘的误检率&#xff08;将边缘识别为非边缘&#xff09;低&#xff0c;且避免噪声产生虚假边缘&#xff08;将非边缘识别为边缘…

STM32-Cube定时器TIM

一、内部时钟源 1、创建项目 File → New → STM32 project选择STM32F103C8T6单片机&#xff0c;命名TIM 2、配置单片机 1.打开USART1&#xff0c;方便我们与电脑连接查看数据 开启UART1并开启中断。 2、设置时钟源 开启外部高速晶振 将时钟频率设置为72MHz 设置调试模…

三款计算服务器配置→如何选择科学计算服务器?

科学计算在众多领域都扮演着关键角色&#xff0c;无论是基础科学研究还是实际工程应用&#xff0c;强大的计算能力都是不可或缺的。而选择一台合适的科学计算服务器&#xff0c;对于确保科研和工作的顺利进行至关重要。 首先&#xff0c;明确自身需求是重中之重。要仔细考虑计算…

uni-app @click.stop @click.stop.native均不生效

原因就是用了nvue导致的 vue等其他环境都可以 解决&#xff1a;e.stopPropagation() click"goExecute($event)" goExecute(e) {e.stopPropagation()}, uniApp官方真的是一坨大翔&#xff0c;不仅社区不维护&#xff0c;文档也写的跟粑粑一样&#xff0c;自创的nv…

从零开始:建立高效的数据清洗流程

从零开始&#xff1a;建立高效的数据清洗流程 在当今数据驱动的时代&#xff0c;数据质量直接决定了分析结果的准确性和业务决策的有效性。然而&#xff0c;原始数据往往包含错误、重复、缺失或不一致的信息&#xff0c;这要求我们在数据分析之前进行数据清洗。数据清洗是一个…

【SSM详细教程】-14-SpringAop超详细讲解

精品专题&#xff1a; 01.《C语言从不挂科到高绩点》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. 《SpringBoot详细教程》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12789841.html?spm1001.20…

Go 1.19.4 命令调用、日志、包管理、反射-Day 17

1. 系统命令调用 所谓的命令调用&#xff0c;就是通过os&#xff0c;找到系统中编译好的可执行文件&#xff0c;然后加载到内存中&#xff0c;变成进程。 1.1 exec.LookPath&#xff08;寻找命令&#xff09; 作用&#xff1a; exec.LookPath 函数用于在系统的环境变量中搜索可…

leetcode 763.划分字母区间

思路&#xff1a;贪心 其实这个题目并不难&#xff0c;只需要分析出来每一个字母最后出现的坐标就行。 我们根据字母最后出现的坐标数来判断最后划分的字符串。 比如说&#xff0c;字符串前面有abc&#xff0c;这三个字母最后出现的地方就是这个位置&#xff0c;那么我们直接…

numpy——数学运算

一、标量——矢量 import numpy as npa 3.14 b np.array([[9, 5], [2, 7]])print(a) print(b)# ---------- 四则运算 ---------- print(a b) # np.add print(a - b) # np.subtract print(a * b) # np.multiply print(a / b) # np.divide 二、矢量——矢量 import nump…

Redis混合持久化原理

文章目录 1.Redis混合持久化原理2.采用混合持久化时&#xff0c;用的aof文件和rdb分别记录的是什么时候的数据&#xff1f;Redis 宕机&#xff0c;数据会丢失么&#xff1f; 1.Redis混合持久化原理 Redis的混合持久化&#xff08;Hybrid Persistence&#xff09;是一种结合了R…

Presto

Presto 是一个高性能、分布式 SQL 查询引擎&#xff0c;最早由 Facebook 开发&#xff0c;用于实时处理大规模数据。它支持通过 SQL 查询多种数据源&#xff0c;特别是在大数据分析领域广泛使用。 1. Presto 的特点 高性能&#xff1a;Presto 采用内存计算&#xff0c;并行处理…

【JavaEE】【多线程】定时器

目录 一、定时器简介1.1 Timer类1.2 使用案例 二、实现简易定时器2.1 MyTimerTask类2.2 实现schedule方法2.3 构造方法2.4 总代码2.5 测试 一、定时器简介 定时器&#xff1a;就相当于一个闹钟&#xff0c;当我们定的时间到了&#xff0c;那么就执行一些逻辑。 1.1 Timer类 …

【HTML】之基本标签的使用详解

HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;是构建网页的基础。它不是一种编程语言&#xff0c;而是一种标记语言&#xff0c;用于描述网页的内容和结构。本文将带你了解HTML的基础知识&#xff0c;并通过详细的代码示例和中文注释进行讲…

PyMol3.0 Educational Version激活教程(激活一次可用半年)

访问网址&#xff1a;https://www.pymol.org/edu/ 填写学生信息表单然后pymol会给邮箱发一个邮件&#xff0c;点开邮件中的网址便可以下载license并且可以从官网下载pymol3.0版本&#xff08;推荐使用Windows EXE Installler&#xff09;安装好之后打开软件&#xff0c;然后会弹…