通过属性面板输入框修改属性： 《图形编辑器：修改图形x、y、width、height、rotation》 width 和 height 为图形的宽高，这个没什么好说的。...《图形编辑器开发：属性显示与格式转换》 旋转度数通常要配合一个变换中心（origin），这个可以作为一个属性让用户设置。...一些编辑器是支持用户自己设置的，比如 AutoCAD 可通过图形单位命令，设置旋转方向和基准角度。 缩放实现思路 进入正题，对图形进行缩放。...结尾 本文实现了图形缩放的功能，希望对你有所帮助。 相关阅读， 计算机图形学：变换矩阵 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：历史记录设计 图形编辑器开发：模块间如何通信？...图形编辑器：工具管理和切换 图形编辑器：底层设计 图形编辑器：防误操作之拖拽阻塞
我开发的图形编辑器，原本选中图形是基于选区是否完全包含对应图形来判断其是否被选中，使用的是矩形包含判断。...编辑器 github 地址： https://github.com/F-star/suika 线上体验： https://blog.fstars.wang/app/suika/ 但用着用着，我发现包含可能并不是一个好策略...我是前端西瓜哥，欢迎关注我，学习更图形编辑器知识。...---- 相关阅读， 几何算法：判断两条线段是否相交 图形编辑器开发：颜色 hex 标准化 图形编辑器开发：一些会用到的简单几何算法 几何算法：矩形碰撞和包含检测算法 在容器内显示图片的五种方案...：contain、cover、fill、none、scale-down 计算机图形学：变换矩阵 求向量的角度 图形编辑器开发：以光标为中心缩放画布 图形编辑器开发：参考线吸附效功能，让图形自动对齐
上一篇文章我们讲了为什么以及如何用 transform、width 和 height 表达图形。 这篇文章我们来看看基于 transform 的这种表达形式，要如何实现图形的缩放（resize）。...对于图形，其实就是将原来图形上的每一个点做了重映射，然后得到图形的缩放、旋转、位移等效果。...(viewportPt -> globalPt)； 光标场景坐标，转换为图形的本地坐标。...，只需要给光标点用图形的 transform 做一个逆矩阵。...缩放多个图形稍微又有点点不一样，我们下篇文章再聊。 我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。
今天来介绍如何实现图形绘制工具，实现绘制任意的图形。...编辑器 github 地址： https://github.com/F-star/suika 线上体验： https://blog.fstars.wang/app/suika/ 我之前讲过如何实现工具类管理类的...： 《图形编辑器：工具管理和切换》 对应的工具类的实现会围绕用户的 按下鼠标、拖拽、释放 这 3 个行为，图形绘制工具同样如此。...实现了这个图形绘制基类后，我们理论上就可以绘制任何图形了，甚至用户自定义的图形，只要这些图形对象使用 x、y、 width、height。 我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。...相关阅读， 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：工具管理和切换 图形编辑器：底层设计 图形编辑器：对齐功能的实现 图形编辑器：历史记录设计 图形编辑器：防误操作之拖拽阻塞 图形编辑器
今天这篇文字来讲解一下图形编辑器如何实现图形的复制粘贴。 粘贴的范围 首先需要确认一下粘贴的范围。...如果只支持粘贴到当前编辑器下，方案很简单：只需要监听 Ctrl + C 键盘事件深拷贝一份选中图形对象，然后再监听 Ctrl + V 事件，将拷贝出来的对象添加到图形树的末尾。...除了图形对象 data，我们还要保存一些必要的元信息。 最后我们要保存的信息有： data：选中图形的数组（只有属性值）； appVersion：编辑器版本。...相关阅读， 图形编辑器开发：模块间如何通信？...图形编辑器开发：绘制图形工具 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：工具管理和切换 图形编辑器：底层设计 图形编辑器：对齐功能的实现 图形编辑器：历史记录设计
背景 由于笔者目前从事开发图形编辑器，在开始的那段时间里，调研和研究了非常多的图形编辑器，图像编辑器之类的软件，开源，闭源的，免费的，商业的都有。今天的这篇文章就来简单概述一下我调研的结果和过程。...图形或图像编辑器 其实图像和图形是有很大区别的， 图形更倾向于矢量图形，如svg的编辑。图像更倾向于位图，png，jpg图片的编辑。...图形编辑器常用于logo设计，矢量图形开发，svg开发 图像编辑器常用于图像处理，如证件照，在线海报制作 两者有联系，也有侧重点。...下面列一下开源的图像编辑器和图形编辑器 开源的图形编辑器 https://github.com/SVG-Edit/svgedit https://github.com/excalidraw/excalidraw...做这种图像，图形编辑器，基本就是这几个库了。
合并包围盒 我们需要计算并渲染选中多个图形的包围盒。...因为我们缩放的是多个图形，算出的整体新的 width 和 height 没有什么用。...我们把这个 scaleTf 矩阵拿去 遍历每个选中图形，去左乘 transform，就能实现对每个图形缩放了。 但是，会出现我们上篇文章遇到的问题，strokeWidth 也被缩放了。...缩放单个图形的时候，我们直接在 resizeRect 就修正了 width 和 height。 但这次因为有多个图形，它们的宽高不一样，所以要在应用 transform 后再修正。...结尾 我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。
图形编辑器，随着功能的增加，通常都会愈发复杂，良好的架构是保证图形编辑器持续开发高效的重要技术。 根据功能拆分成一个一个的小模块基本是家常便饭。那么模块之间是如何配合以及进行数据传输的呢？...编辑器 github 地址： https://github.com/F-star/suika 线上体验： https://blog.fstars.wang/app/suika/ 注入 Editor 实例...editor.zoomManager.emitter.off('zoomChanged', handler); }; } }, []); } 结尾 本文简单介绍了图形编辑器架构中...我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。...相关阅读， 图形编辑器：底层设计 图形编辑器：工具管理和切换 图形编辑器开发：绘制图形工具 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：对齐功能的实现 图形编辑器：历史记录设计
本文链接：https://blog.csdn.net/weixin_42449444/article/details/90723302 我弄的这个图形验证码是通过伪随机验证码+label控件+背景图来实现的...，我觉得我这个图形验证码写得比较low，用代码实现起来也特别简单。...点击更换验证码的实现： 要是看不清图形验证码怎么点击更换呢？...我们可以在窗体中双击lable对它添加一个Click事件，当鼠标点击label时，调用静态类Program中的静态方法CreateRandomCode(length)来生成一个新的图形验证码，从而实现"
应用场景 我们当用户登录系统时经常会用到图形验证码技术，要求用户识别图片中的内容，并正确输入，方可尝试登录。类似的场景还有用户注册或者涉及频繁敏感操作的提交表单。...因此，图形验证码是一个网络安全技术手段，防止恶意程序自动攻击执行。尽量能够避免非法用于访问和操作受保护的资源。图形验证码的呈现形式有很多种，这里我们将介绍最基本的生成方式，字母及数字的呈现方式。...开发运行环境 操作系统： Windows Server 2019 DataCenter .net版本： .netFramework4.0 或以上 开发工具：VS2019 C# 设计 生成内容 GenerateCheckCode...其参数说明如下： 实现 核心代码 完整的代码如下： <script language="...生成验证码方法可以进一步改造生成符合我们需要的场景（如干扰线复杂度等） 还可考虑有效时效，过期需要重新刷新生成<em>图形</em>验证码，进一步提高安全性。
今天我们来实现一个比较少用到的功能：对选中图形做水平翻转和垂直翻转。 翻转实现分成这么 3 步： 计算选中图形的中心位置，作为翻转的翻转中心； 得到翻转矩阵； 给所有的图形应用翻转矩阵。...选中图形的中心 选中图形如果是单个，我们 选择图形的 OBB （带朝向的包围盒）的中点位置作为翻转中心。...选中图形如果是多个，就计算每个图形的 AABB 包围盒（包围图形的最小矩形），然后将它们合并成一个大包围盒，取这个大包围盒的中心作为翻转中心。...回到我们的对选中图形水平翻转。我们不是基于 y 轴做翻转，是对选中图形的中心做翻转。...结尾 我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。
最近我给图形编辑器增加了参照线吸附功能，讲讲我的实现思路。...感觉这个图形编辑器突然变得灵动起来，有了灵魂一般。 为什么需要参照线吸附功能？...我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。...相关阅读， 图形编辑器开发：缩放至适应画布 图形编辑器开发：以光标为中心缩放画布 图形编辑器：场景坐标、视口坐标以及它们之间的转换 图形编辑器：标尺功能的实现 图形编辑器开发：最基础但却复杂的选择工具...图形编辑器：工具管理和切换 图形编辑器：底层设计
如果你不理解它们，请看我的这篇文章： 《图形编辑器开发：以光标为中心缩放画布》 总体思路： 计算包裹住所有图形的大包围盒 bbox（AABB 包围盒，不带旋转的）； 计算新的缩放比 newZoom。...newViewportY = composedBBox.y - (viewport.height / newZoom - composedBBox.height) / 2; 这个算法可以看我写的文章： 《图形编辑器...同前面的让所有图形适应画布，bbox 换成选中的图形即可。...我是前端西瓜哥，欢迎关注我，学习开发一个图形设计工具。...相关阅读， 图形编辑器开发：以光标为中心缩放画布 图形编辑器：场景坐标、视口坐标以及它们之间的转换 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：工具管理和切换 图形编辑器：底层设计
今天我们来学习图形编辑器的网格模块要怎么设计和实现。...我正在开发的 suika 图形编辑器： https://github.com/F-star/suika 线上体验： https://blog.fstars.wang/app/suika/ 网格是什么？...网格通常渲染在图形的下方，并在画布缩放前后，维持线宽为 1 像素不变。 关于渲染实现，我之前写过 画布标尺的绘制的文章，思路其实是一样的。...这样有填充内容的图形不会覆盖和它重叠的网格，就能大概知道它占据了多少格子。 但这种情况下注意给网格线 设置滤镜效果或透明度，使在与其颜色相近的图形上方也能有一个较好的渲染效果，能够被分辨出来。...我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。
今天来讲讲如何在图形编辑器中使用自定义光标，并对光标其进行管理。...但对于一个成熟的图形编辑器来说，这还远远不够。 我们还需要一些 更具体的光标样式来向用户传递信息，比如： 旋转光标：表示图形可旋转。...我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。...相关阅读， 图形编辑器开发：实现缩放图形 图形编辑器开发：快捷键的管理 图形编辑器开发：实现图形的复制粘贴 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：历史记录设计 图形编辑器：工具管理和切换...图形编辑器：底层设计
Path 编辑器 图形编辑器有很多子模块，比如快捷键、工具的管理。 这样我们就可以通过 delete 键删除图形，将当前工具切换为绘制矩形工具以绘制矩形。...比如 Esc 键，原来的效果是回到选择工具以及取消图形选中，现在要改写为取消 Path 控制点的选中状态，以及退出 Path 编辑器。 此外还有 Enter 键，注册为退出 Path 编辑器。...这里不多说，基本上和选择工具大同小异，可以看这篇文章： 《图形编辑器开发：最基础但却复杂的选择工具》 Path 编辑器的进入和退出 虽然但是，Path 的进入和退出的场景有很多种，你需要注意有没有漏掉一些...最后 钢笔工具（和 Path 选择工具）是复杂工具，属于图形编辑器的核心工具，它有非常多的功能需要实现，目前我只搭了个框架而已。...它的背后其实是一个 Path 编辑器，一套不同的另一套编辑器体系，会接管改写原来图形编辑器部分能力。 我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。
在搭好图形编辑器的框架后，我们可能需要根据需求加入一些新的图形类型。 那么加入新的图形类型，需要做哪些工作呢？今天我们就来探究一下。...其他业务逻辑 此外就是新的图形类需要重写的各种其他逻辑。 这个就看图形编辑器支持的高级功能的多少了，比如 复制粘贴处理，需要处理关联的其他对象。...兼容旧版编辑器 如果是单机软件，会有版本兼容问题。 比如 2024 版新增的图形类型，在 2023 版是无法识别的，代码里就没有对应的处理逻辑。...因为用户每次打开网页，都是最新版的编辑器。此外，因为数据是保存在服务端的，甚至可以对已有图形类型进行破坏性修改，修复一些前期不合理的属性设计。...我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。
快捷键操作在图形编辑器中是很高频的操作，能让用户快速高效地执行特定命令。 那么今天就来学习图形编辑器是如何做快捷键的管理的。...如果你的图形编辑器并不复杂，用一些易用性不错的快捷键库是不错的选择。 快捷键高级能力 原生事件和一些常见的快捷键库可以处理一些简单的场景，但图形编辑器的场景往往更复杂。...结尾 我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。...相关阅读， 事件订阅的几种实现风格 用 TypeScript 实现类型安全的 EventEmitter，这下不用怕写错事件名了 图形编辑器开发：模块间如何通信？...图形编辑器：工具管理和切换 图形编辑器：底层设计 图形编辑器：防误操作之拖拽阻塞
最近做图形编辑器，有这么一个需求，在输入框输入颜色十六进制值（hex），自动转为对应 6 位长度的 hex。 如果值不合法，回退为上次合法输入。...我正在开发的图形设计工具： https://github.com/F-star/suika 线上体验： https://blog.fstars.wang/app/suika/ 颜色 hex 规则 颜色...hex.padEnd(6, hex); }; 符合经典规则（AABBCC 和 ABC）的情况： 找不到 hex 字符串的情况，会回退到上次的合法值 其他情况： 结尾 我是前端西瓜哥，关注我，学习更多前端图形知识...相关阅读， 几何算法：矩形碰撞和包含检测算法 在容器内显示图片的五种方案：contain、cover、fill、none、scale-down 计算机图形学：变换矩阵 求向量的角度 图形编辑器开发...：以光标为中心缩放画布 图形编辑器开发：参考线吸附效功能，让图形自动对齐
今天简单讲讲图形编辑器的显示属性值时，会遇到的格式转换问题。...编辑器 github 地址： https://github.com/F-star/suika 线上体验： https://blog.fstars.wang/app/suika/ 单位转换 图形编辑器中的数据...图形的旋转在数据源中，会用弧度（radian）表示。因为弧度更适合进行数学计算，且很多 API 比如 Math.sin(x) 都需要你提供弧度。...《图形编辑器开发：模块间如何通信？》 弧度还是比较简单的场景。...这里有一个例子，是关于用户输入的 hex 颜色值的检验和修复，可以看我的这篇文章： 《图形编辑器开发：颜色 hex 标准化》 最后 画一张图总结一下。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
