开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在SVG中实现橡皮擦功能？

在SVG中实现橡皮擦功能，可以通过以下几个步骤：

创建一个SVG元素，用于存储所有的绘制内容。
创建一个SVG元素，用于存储橡皮擦的绘制内容。
在SVG元素上绑定鼠标事件，如mousedown、mousemove和mouseup事件。
在mousedown事件中，记录鼠标的位置，并在橡皮擦SVG元素上创建一个圆形元素，用于表示橡皮擦的大小和形状。
在mousemove事件中，计算鼠标的位置与上一个位置之间的距离，并根据距离创建一个新的圆形元素，用于表示橡皮擦的移动路径。
在mouseup事件中，清除鼠标位置的记录。
为橡皮擦元素设置一个透明的填充颜色，以实现橡皮擦的效果。

以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <title>SVG橡皮擦示例</title>
 <style>
    svg {
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <svg id="svg" width="500" height="500"></svg>
 <script>
    const svg = document.getElementById('svg');
    const eraser = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    eraser.setAttribute('r', '10');
    eraser.setAttribute('fill', 'transparent');
    eraser.setAttribute('stroke', 'black');
    eraser.setAttribute('stroke-width', '20');
    eraser.style.pointerEvents = 'none';
    svg.appendChild(eraser);

    let lastX = 0;
    let lastY = 0;

    svg.addEventListener('mousedown', (event) => {
      lastX = event.clientX;
      lastY = event.clientY;
    });

    svg.addEventListener('mousemove', (event) => {
      if (lastX === 0 && lastY === 0) return;

      const x = event.clientX;
      const y = event.clientY;
      const distance = Math.sqrt(Math.pow(x - lastX, 2) + Math.pow(y - lastY, 2));

      for (let i = 0; i< distance; i += 10) {
        const ratio = i / distance;
        const cx = lastX + (x - lastX) * ratio;
        const cy = lastY + (y - lastY) * ratio;
        const circle = eraser.cloneNode();
        circle.setAttribute('cx', cx);
        circle.setAttribute('cy', cy);
        svg.appendChild(circle);
      }

      lastX = x;
      lastY = y;
    });

    svg.addEventListener('mouseup', () => {
      lastX = 0;
      lastY = 0;
    });
  </script>
</body>
</html>

这个示例中，我们创建了一个SVG元素，并在其中添加了一个橡皮擦元素。我们通过监听鼠标事件，实现了橡皮擦的绘制功能。在绘制过程中，我们根据鼠标的位置计算出橡皮擦的移动路径，并创建一个新的圆形元素来表示橡皮擦的位置和大小。最后，我们将这些圆形元素添加到SVG元素中，从而实现了橡皮擦的效果。

相关搜索:如何在SVG中实现嘴巴动画？在Qt/C++中实现撤消功能(如Ctrl + Z)如何在mousepressevent中实现多种功能如何在C中实现转换功能？如何在Dropbox中实现同步功能？如何在Lua中实现异步功能？如何在GEKKO中实现细分功能？如何在BIGQUERY中实现GETBIT功能如何在Angular中实现删除功能如何在winappdriver中实现保存功能？如何在Phaser JS中实现sprint功能？如何在JSX中实现CSS :hover功能？如何在网站中实现搜索功能？如何在PHP中实现"谁在线"功能？如何在类中实现接口的功能？github主题功能如何在javascript中实现如何在Wiremock中实现回调功能？如何在VBA中实现重算功能？如何在oracle中实现以下功能？如何在MERN应用中实现登录功能？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

WPF 实现自定义的笔迹橡皮擦

在 WPF 里面，对于笔迹来说，应该放在 Stroke 类里面，而不是作为点的集合存储。在 Stroke 类里面将作为管理笔迹的类提供笔迹的渲染和橡皮擦等功能。咱下面将从 Stroke 类开始，自己定义笔迹橡皮擦。阅读本文，你将了解如何自定义橡皮擦，如自定义橡皮擦的外观样式，了解如何不依赖 InkCanvas 来实现笔迹的擦除

02

Fabric.js 橡皮擦的用法（包含恢复功能）

Fabric.js 的基础包并没有包含橡皮擦模块，如果你的项目需要使用橡皮擦，要使用定制版的 Fabric.js 。

03

【说站】ps橡皮擦圆圈不见了

1、处于魔法橡皮擦工具状态。这时候只需要点开它的三角形，选择橡皮擦工具或者Shift+E就可以了。

02

Python数据分析库之pandas，你该这么学！No.1

你只要这样，这样，然后在这样，中间出现问题，百度一下，这样，这样，就好了... ...

04

Android画板开发之橡皮擦功能

在Andriod有个图像混合（Xfermode）概念，利用这个概念我们就可以实现橡皮擦功能。

01

【说站】ps橡皮擦怎么擦出白色

以上就是ps橡皮擦出白色的方法，同样如果想换成其他的颜色，可以更改有关的设置，大家学会后也来试试吧。更多ps学习指路：ps教程

01

66K star!这个开源白板不一般！

作为开发者，无论是工作还是学习都少不了要画流程图，一款高颜值的画图工具，有利于提升自己的工作效率，让人越画越想画，今天给大家推荐一款高颜值的开源虚拟手绘风格白板——Excalidraw

01

揭秘！价值百万的像素填色解决方案，想开发绘本应用的有福了！

大家好，我是麦芽的香气，一个喜欢解决产品来解决需求的开发者。4年Cocos Creator小游戏、教育App开发，今天给大家分享一些我在工作中积累的小经验Demo。

03

#抬抬小手学Python# 类函数、成员函数、静态函数、抽象函数、方法伪装属性

本篇博客是滚雪球学 Python 第二轮的最后一篇博客，我们将内容继续提升到面向对象部分，为你补充类里面的一些装饰器，学习之后，希望你的 Python 基础知识可以更上一层楼。

03

Photoshop软件2020软件下载安装教程-PS全版本最新版本软件安装包

Photoshop软件是一款非常强大的图像处理软件，可以帮助用户进行各种图片处理、编辑、设计等工作。

00

如何在不影响主体的情况下，擦除我们的背景呢？

📷 1、点击[橡皮擦工具] 📷 2、点击[背景橡皮擦工具] 📷 3、点击[图片] 📷

04

绘画软件SketchBook妙笔生花中文版，SketchBook软件下载安装过程

SketchBook软件是一款专业的数字绘画和设计软件，它被广泛应用于电影、电视、游戏等领域，可以帮助用户创造出具有艺术感和创意性的绘画作品。下面我们将从使用者的角度，介绍SketchBook软件的主要功能和特点。

04

【ps学习记录】0224练习

3.磁性套索工具：具有磁性，可以识别物体边缘（边缘清晰），操作发生偏移可以通过delete进行点的删除（回车可快速成选区）

02

一款支持手绘风格的开源图表工具—Excalidraw

优秀的作图工具有许多，例如文本绘图工具 PlantUML，流程图设计工具 Draw.io，还有专业绘图工具 Sketch 和 Figma 等，但是最推荐的还是手绘风格的绘图工具——Excalidraw。

01

看一篇，学一篇，今日份的pandas，你该这么学！No.2

对象的方法就是，你能干啥你能随风奔跑你能跳过泥坑你能用手指打98K 你还能跳C哩C

02

强烈推荐，Android图片处理的超强SDK

今天给大家推荐一个比较好的图片处理SDK,应该对大家有所帮助，最近快春节了，年底太忙了，希望大家见谅，可能推送的内容不及时或者少了些。你们放心，我的口号就是：你们只负责学习和提高，我帮你们寻找和分享，保证篇篇精彩和经典。功能和介绍： 1，图片编辑(图片添加，文字添加)，实现图片编辑中的图片添加，旋转，缩放，删除；文字的添加，大小缩放，字体更换，颜色更换，删除； 2，基本滤镜实现与接口封装；涂鸦(画笔的样式，粗细，颜色，橡皮擦，贴图)；相框(简单相框，酷炫相框)；马赛就克(基本马赛克，酷炫马赛克，

07

福利 | PUPU ╳ M&G晨光十二生肖橡皮盲盒开售！

PUPU ALIENS ╳ M&G晨光联名公仔橡皮盲盒十二生肖限定中国传统文化近年受到年轻一代的喜爱与追捧，PUPU此次结合中国传统属相文化“十二生肖”打造出全新一代十二生肖版主题盲盒橡皮擦。十二生肖作为传统民俗文化，具有悠久的历史含蕴，承载着吉祥与祝福的意义。PUPU与之的结合，将传统文化创新化运用，同时传承和赋予新的活力与呈现。 1、产品概述本次产品共计十三款造型，将PUPU与十二生肖中的十二种动物，分别是子（鼠）、丑（牛）、寅（虎）、卯（兔）、辰（龙）、巳（蛇）、午（马）、未

04

Photoshop ps 快捷键

ctrl+shift+n 新建图层 ctrl+alt+shift+t 再次变化应用（附加新图层） crtl+e 合并图层 ctrl+t 快速缩放、自由变换 ctrl+j 快速贴入图层（选区内的画面为内容新建一个图层）【或】画笔放大缩小（失灵时，ctrl+ 空格） crtl+shift+i 反向选择 ctrl+D 取消选区选择 ctrl+鼠标左键选择图层选区载入选区空格键拖动选区没画好空格键拖动区域内拖动已经画好选区了 alt+鼠标滚轮、ctrl+加号 ctrl + 加/减

03

2. 无门槛学会数据类型与输入、输出函数，滚雪球学 Python python 入门教程非常详细

对于任何一门语言都存在一些基本类型，Python 也不例外，只不过数据类型在 Python 中要远远比其他语言简单，基本分为以下几种。

01

python-for循环与while循环

for 循环的循环次数受限于容器类型的长度，而while循环的循环次数需要自己控制。for循环也可以按照索引取值

01

Artstudio Pro Mac(绘图与图片编辑软件)

Artstudio Pro Mac是一款非常不错的绘画与图片编辑软件，为用户提供了27种工具：移动、选择、裁剪、吸管、油漆、湿漆、橡皮擦、油漆桶等，且允许同时操作多个文档，支持大尺寸画布和无限数量的图层，为你创造出完美的绘图提供了方便！

01

1. 这才是 Python 学习的正确起手姿势，滚雪球学 Python，python入门教程

从本篇博客开始，我将真正的从 0 到 1，完完整整给你写一套 Python 语言的教程，把如何快速学会 Python 技巧告诉你。

04

鼠绘（1）

顾名思义，鼠绘是指用鼠标（注意：是鼠标，不是数位板），使用画图软件（如：photoshop）进行绘画的活动。

01

5. Python 循环的本质就是一段代码懒得重复写

程序中的循环概念非常容易理解，一段相似的代码不想重复去写，然后让程序去完成这个操作就是循环。例如从 1 加到 100，如果你依次去加会发现，代码又臭又长，最好的写法当然是让程序通过循环依次去累加。

02

如何使用PS简单抠图

哈喽！各位小伙伴大家好呀！之前写到了制作电子邀请函，本期就来说说如何制作一些素材，也就是如何用PS抠图，看见一些好的图也能自己抠了。开始之前当然是需要软件了，小编演示是用的PS 2015 64位

04

Ps软件下载，adobe photoshop版本大全，photoshop2023中文版下载

Photoshop，简称PS，是一款功能强大的图像处理软件，它可以帮助我们完成各种图像的处理和编辑。无论是照片修饰、海报设计还是数字绘画，PS都能满足你的需求。

01

从头开始教你制作ArcGIS Pro样式

原理就是使用一张透明背景的图片，来对替换地图中的，点，线，面符号进行替换，已知原理，那么开始行动吧~

02

canvas简易画布

今天学习了canvas，利用它做了一个简易版的画板，校验自己所学的知识，分享出来以供大家学习指教。先上效果图。

03

9K Star开源一款支持PDF手写注释的笔记软件,支持 Linux,Windows,macOS平台

02

PS软件2017-2023中文版安装流程，PS软件全版本下载安装包安装

Photoshop，全称Adobe Photoshop，是由Adobe公司开发和发行的图像处理软件。它主要用于处理以像素所构成的数字图像，具有众多的编修与绘图工具，可以有效地进行图片编辑和创作工作。无论是社交媒体贴子、修饰相片，还是设计横幅、制作精美网站，Photoshop都可以帮助用户创造出更加优秀的作品。Photoshop的功能十分强大，涵盖了图像、图形、文字、视频、出版等各个领域，在数字图像处理方面一直处于行业领先水平。

03

有了它，再也不用担心我的截图了

Snipaste 是一款简单但强大的截图工具，也可以让你将截图贴回到屏幕上！下载并打开 Snipaste，按下 F1 来开始截图，再按 F3，截图就在桌面置顶显示了。就这么简单！你还可以将剪贴板里的文字或者颜色信息转化为图片窗口，并且将它们进行缩放、旋转、翻转、设为半透明，甚至让鼠标能穿透它们！如果你是程序员、设计师，或者是大部分工作时间都在电脑前，贴图功能将改变你的工作方式、提升工作效率。接下来阿Q就给大家具体讲讲Snipaste的功能。

02

Adobe Ch 2022人机交互设计软件，创造出优美、具有创意数字体验+全版本安装包

Adobe Ch 2022是一款业内著名的数字媒体设计软件，它是Adobe Creative Suite的一部分，旨在提供专业级别的图形设计和图片编辑工具，以满足广大设计师和开发人员的需求。

00

5. Python 循环的本质就是一段代码懒得重复写

程序中的循环概念非常容易理解，一段相似的代码不想重复去写，然后让程序去完成这个操作就是循环。例如从 1 加到 100，如果你依次去加会发现，代码又臭又长，最好的写法当然是让程序通过循环依次去累加。

03

Artstudio Pro Mac(绘图与图片编辑软件) 5.1 特别版

Artstudio Pro Mac是一款非常不错的绘画与图片编辑软件，为用户提供了27种工具：移动、选择、裁剪、吸管、油漆、湿漆、橡皮擦、油漆桶/图案/渐变填充、涂抹、减淡、燃烧、海绵、文字、修复、克隆等，且允许同时操作多个文档，支持大尺寸画布和无限数量的图层，为你创造出完美的绘图提供了方便！

01

Artstudio Pro Mac(绘图与图片编辑软件)

Artstudio Pro Mac是一款非常不错的绘画与图片编辑软件，为用户提供了27种工具：移动、选择、裁剪、吸管、油漆、湿漆、橡皮擦、油漆桶/图案/渐变填充、涂抹、减淡、燃烧、海绵、文字、修复、克隆等，且允许同时操作多个文档，支持大尺寸画布和无限数量的图层，为你创造出完美的绘图提供了方便！

02

ps软件怎么下载？Adobe ps中文版2021 win/mac电脑下载安装

Photoshop软件是一款广泛使用的图像处理和创意设计软件，它在设计师和艺术家之间都享有很高的声誉。本文将全面介绍Photoshop软件的特色和使用方法，帮助读者更好地了解和掌握这款软件。

02

【第6期】PS入门课程笔记

昨天晚上花了点时间，把第一期的PS作业做了。其实原理非常简单，就是将一张白色底的证件照做成蓝色底的、红色底的。因为是第一期的作业，掌握的PS技能还不是非常熟练，所以换底的时候主要使用的是橡皮擦这个工具。

01

2022年最新大众点评的字体反爬，落地技术也是绝了，Python实现

打开开发者工具刷新站点，可以得到如下字体文件请求，打开开发者工具碰到无限 debugger，取消掉即可。

03

12年经验的大龄程序员，你猜他用什么写API文档？

今天这次我们深度 “盘” 一下 Eolink 这款免费 API 协作平台，围绕【智能生成+盘活 API 资产】这一功能上，到底投入了多大的开发成本，给我们带来了多少惊喜！

02

CSS基础知识学习：CSS绘制铅笔

铅笔，距今已有四百多年的历史，其中，绘画素描的铅笔分为诸多类型，它分成三个发展阶段，分为石墨、木制笔杆、带帽铅笔。

01

利用 Canvas 实现 Valine 评论画板涂鸦

前几天在 Joe（https://ae.js.cn/）网站上留言的时候发现了一个叫“画图模式”的东西，点进去后自动切换文本框到画板了（类似QQ涂鸦，你画我猜那种画板），然后可以在画板上画画，还可以选择画笔粗细、颜色等等，画错了还能撤销各种功能，欸感觉挺有意思的，当时也猜到了应该是用 canvas 做的，不过自己也不太了解这块，但就是感觉挺有意思的，加上我又喜欢魔改 valine 评论，所以立下计划决定给评论系统加上这么一个好玩的功能。

01

Android画板开发之添加文本文字

添加文本，也是属于一个比较简单的功能，在第二篇的时候，添加了橡皮擦，在橡皮擦里面通过一个模式的形式进行画笔的判断，当然文本也是如此，添加一个文本模式，在onTouchDown的时候，弹出PopupWindow，输入文本，然后PopupWindow消失的时候，利用staticLayout绘制到画布上即可。当然也有些需要注意的地方

01

中文起点，Python 字体反爬实战案例，再一篇~

本次采集的案例是点起中文，你可以随机打开一本目标书籍，检查一下网络请求中是否存在字体文件响应数据。

02

让世界充满爱的图片处理工具 | 码云周刊第 30 期

让世界充满爱的图片处理工具壹项目名称：图片实时处理使用工具 iOS-GPUImage 项目简介：本项目是基于 ios 的图片处理 App，完全模仿 QQ 影像2.0，使用 QQ 影像资源。其主要

05

华为OD机试注意事项，来自已考人员的经验

由于华为 Od 机试从收到邮件开始，一周内都有效，所以每天都有人在参加机试，本系列文章将为大家同步每日的机考最新信息，相信这些对你一定有所帮助。

01

关于FACEBOOK 的 REACT 专利许可证

随着Apache、百度、Wordpress都在和Facebook的React.js以及其专利许可证划清界限，似乎大家又在讨论Facebook的这个BSD+PATENT的许可证问题了。这让我想起了之前在Medium读过的一篇文章——《React, Facebook, and the Revocable Patent License, Why It’s a Paper》，我觉得那篇文章写的不错，而且还是一个会编程的律师写的，所以有必要把这篇文章传播到中文社区这边来。注意，我不会全部翻译，我只是用我的语言来负责搬运内容和观点，我只想通过这篇文章让大家了解一下这个世界以及专利相关的知识，这样可以避免你看到某乎的“怎么看待XXX”这类的问题时人云亦云，能有自己的独立思考和自我判断。;-)

01

Fabric.js 让用户手动加粗文本

如果你还不清楚 Fabric.js 有什么用，我强烈推荐你阅读《Fabric.js 从入门到目中无人》。该文能让你的前端技术再点亮一个技能点。

03

#小手一抬学Python# Python字典已经掌握了【附源码】

已经学完了列表与元组，那这两个都是按照顺序排列的，所以可以用索引取到值，本篇博客要学习的是字典，由上文可知，字典肯定就是不能按照索引取到值，就是没顺序，非序列的数据结构。

01

使用HTML5和Javascript设计绘图程序

首先，我们来设计下这个绘图程序将会拥有什么功能。在这个简单的绘图程序中，首先要有的是一块能给用户涂鸦的画布区域，上面有一只可爱的小鸭，然后我们准备了4种不同颜色的蜡笔，可以给用户给这只小鸭上色，同时也要提供橡皮擦的功能，以方便随时擦除这个小鸭。而除了蜡笔外，也提供了普通的油画笔的效果，当然也指定了每次绘画时笔触范围的大小，这里设定了4个选择。设计好后的绘图应用，效果如下图：

02

Android利用SRC_OUT模式下的Xfermode实现橡皮擦效果

SRC_OUT模式和SRC_IN相反，相对位置，目标像素的透明度越高，原像素的透明度越低，目标像素不透明，则原像素透明，利用这个可以实现橡皮擦效果定义一些变量 private Bitmap bitmapSrc; //path的paint private Paint mPathPaint = new Paint(); private Paint mPaint = new Paint(); private Bitmap bitmapDst; //手势轨迹

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭