通过属性面板输入框修改属性： 《图形编辑器：修改图形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 计算机图形学：变换矩阵 求向量的角度 图形编辑器开发：以光标为中心缩放画布 图形编辑器开发：参考线吸附效功能，让图形自动对齐
今天来介绍如何实现图形绘制工具，实现绘制任意的图形。...编辑器 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：编辑器版本。...相关阅读， 图形编辑器开发：模块间如何通信？...图形编辑器开发：绘制图形工具 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：工具管理和切换 图形编辑器：底层设计 图形编辑器：对齐功能的实现 图形编辑器：历史记录设计
本文链接：https://blog.csdn.net/weixin_42449444/article/details/90723302 我弄的这个图形验证码是通过伪随机验证码+label控件+背景图来实现的...，我觉得我这个图形验证码写得比较low，用代码实现起来也特别简单。...点击更换验证码的实现： 要是看不清图形验证码怎么点击更换呢？...我们可以在窗体中双击lable对它添加一个Click事件，当鼠标点击label时，调用静态类Program中的静态方法CreateRandomCode(length)来生成一个新的图形验证码，从而实现"
图形编辑器，随着功能的增加，通常都会愈发复杂，良好的架构是保证图形编辑器持续开发高效的重要技术。 根据功能拆分成一个一个的小模块基本是家常便饭。那么模块之间是如何配合以及进行数据传输的呢？...编辑器 github 地址： https://github.com/F-star/suika 线上体验： https://blog.fstars.wang/app/suika/ 注入 Editor 实例...editor.zoomManager.emitter.off('zoomChanged', handler); }; } }, []); } 结尾 本文简单介绍了图形编辑器架构中...我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。...相关阅读， 图形编辑器：底层设计 图形编辑器：工具管理和切换 图形编辑器开发：绘制图形工具 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：对齐功能的实现 图形编辑器：历史记录设计
最近我给图形编辑器增加了参照线吸附功能，讲讲我的实现思路。...感觉这个图形编辑器突然变得灵动起来，有了灵魂一般。 为什么需要参照线吸附功能？...我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。...相关阅读， 图形编辑器开发：缩放至适应画布 图形编辑器开发：以光标为中心缩放画布 图形编辑器：场景坐标、视口坐标以及它们之间的转换 图形编辑器：标尺功能的实现 图形编辑器开发：最基础但却复杂的选择工具...图形编辑器：工具管理和切换 图形编辑器：底层设计
如果你不理解它们，请看我的这篇文章： 《图形编辑器开发：以光标为中心缩放画布》 总体思路： 计算包裹住所有图形的大包围盒 bbox（AABB 包围盒，不带旋转的）； 计算新的缩放比 newZoom。...newViewportY = composedBBox.y - (viewport.height / newZoom - composedBBox.height) / 2; 这个算法可以看我写的文章： 《图形编辑器...同前面的让所有图形适应画布，bbox 换成选中的图形即可。...我是前端西瓜哥，欢迎关注我，学习开发一个图形设计工具。...相关阅读， 图形编辑器开发：以光标为中心缩放画布 图形编辑器：场景坐标、视口坐标以及它们之间的转换 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：工具管理和切换 图形编辑器：底层设计
今天来讲讲如何在图形编辑器中使用自定义光标，并对光标其进行管理。...但对于一个成熟的图形编辑器来说，这还远远不够。 我们还需要一些 更具体的光标样式来向用户传递信息，比如： 旋转光标：表示图形可旋转。...我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。...相关阅读， 图形编辑器开发：实现缩放图形 图形编辑器开发：快捷键的管理 图形编辑器开发：实现图形的复制粘贴 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：历史记录设计 图形编辑器：工具管理和切换...图形编辑器：底层设计
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 标准化》 最后 画一张图总结一下。
Canvas图形编辑器-数据结构与History(undo/redo) 描述 对于编辑器而言，History也就是undo和redo是必不可少的能力，实现历史记录的方法通常有两种: 存储全量快照，也就是说我我们每进行一个操作...那么在这里我认为任何元素都是矩形，因为绘制矩阵是比较简单的，所以图形元素基类的x, y, width, height属性是确定的，再加上还有层级结构，那么就再加一个z，此外由于需要标识图形，所以还需要给其设置一个...那么现在已经有了基本的数据结构，我们可以设想一下究竟应该有哪几种操作，经过考虑大概无非是 插入INSERT、删除DELETE、移动MOVE、调整大小RESIZE、修改属性REVISE，这五个Op就可以覆盖我们对于当前编辑器图形的所有操作了...ops.forEach(op => this.editor.state.apply(op, { source: "redo", undoable: false })); } 最后 本文我们介绍总结了我们的图形编辑器中数据结构的设计以及...History模块的实现，虽然暂时不涉及到Canvas本身，但是这都是作为编辑器本身的基础能力，也是通用的能力可以学习。
画布缩放是图形设计工具中很重要的基础能力。...通过它，我们可以像举着一台摄影机，在图形所在的世界到处游逛，透过镜头，可以只看自己想看的图形；可以拉近摄影机，看到图形的细节；也可以拉远摄影机，总览多个图形之间的关系。...场景坐标系 就是图形所在的二维平面世界所使用的坐标系。...我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。...相关阅读， 计算机图形学：变换矩阵 图形编辑器：场景坐标、视口坐标以及它们之间的转换 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：工具管理和切换 图形编辑器：底层设计
挺久没写图形编辑器开发系列了，今天来讲讲控制点，它是图形编辑器的不可缺少的基础功能。 控制点是吸附在图形上的一些小矩形和圆形点击区域，在控制点上拖拽鼠标，能够实时对被选中进行属性的更新。...学习更多图形编辑器知识。...相关阅读， 图形编辑器开发：实现自定义规则输入框组件 图形编辑器开发：实现缩放图形 简单介绍一下我在做的图形编辑器 图形编辑器开发：属性显示与格式转换 图形编辑器开发：快捷键的管理 图形编辑器开发...：实现图形的复制粘贴 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：历史记录设计 图形编辑器开发：模块间如何通信？...图形编辑器：工具管理和切换 图形编辑器：底层设计
选区矩形会和图形进行碰撞检测判断，决定将哪些图形是被框选中的。...如果你对碰撞检测的细节感兴趣，可以看我之前写的文章： 《图形编辑器——矩形选区是如何实现选中多个图形的？》 《几何算法：矩形碰撞和包含检测算法》 框选可以和多选结合。...，我开发的编辑器还没实现完整。...---- 相关阅读， 图形编辑器：工具管理和切换 图形编辑器：底层设计 图形编辑器：对齐功能的实现 图形编辑器：绘制图形需要用到的填充算法 图形编辑器：历史记录设计 图形编辑器：防误操作之拖拽阻塞...图形编辑器：修改图形x、y、width、height、rotation
我写的一系列图形编辑器的文章，是基于我一个叫做 suika 的个人项目总结抽象而来的。 毕竟不落地，我写的文章就不真实。...项目起源 suika 是我在持续开发的一款开源图形编辑器项目，基本上是模仿 Figma。 的初级功能。...图形库简单封装，在 scene 目录里。 然后编辑器内核，管理所有的编辑器线管逻辑，对应 editor 文件夹。 最后是 UI 层在 components 文件夹。...图形编辑器相关的文章很慢，要学的东西太多了，同时需要花费精力在项目中落地，另外也会穿插一些图形编辑器具体实现 之外的文章，比如一些渲染引擎的底层实现，各位见谅。...相关阅读， 图形编辑器开发：最基础但却复杂的选择工具 图形编辑器：历史记录设计 图形编辑器开发：模块间如何通信？ 图形编辑器：工具管理和切换 图形编辑器：底层设计 图形编辑器：防误操作之拖拽阻塞
本文将探究图形编辑器中钢笔工具的功能，算是一篇简单说明书。 只有理解了需求，尤其是复杂的需求，才能更好地进行功能开发，写出诗一样的高鲁棒性代码。...甚至你可以在设计图形类的时候，仅仅用一个 Path 类，完全足够的。 至于铅笔工具，其实就是将连续的多段直线线段通过算法进行平滑化处理，转换为三阶贝塞尔曲线组成的路径。...我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
