- 博客(178)
- 收藏
- 关注
RSS订阅原创 给定一个边与边可能相交的多边形，求它的轮廓线
大家好，我是前端西瓜哥。最近遇到一个需求，。需要注意的是，轮廓线多边形内不能有空洞，使用的不是常见的非零绕数规则（nonzero）以及奇偶规则（odd-even）。
2024-02-24 21:42:12
850
原创 什么？Figma 的 fig 文件格式居然被破解出来了
大家好，我是前端西瓜哥。上周图形编辑器交流群里有人问，对于 Figma 导出的 fig 文件，该如何解析其格式，拿到可读数据。经过群友的一番讨论，这个问题最后算是解决了。
2023-12-18 21:40:04
1251
原创 图形遍历效率低？试试 R 树
大家好，我是前端西瓜哥。今天我们来看看 R 树是什么？以及它为什么能够提高图形的检索速度。R 树（R-tree）是一种。思路和其他索引算法（比如 B 树、跳表）有点像，但。R 树的 “R” 指的是矩形（Rectangle）。举个具体的例子，假设有一张地图，上面有几百万个节点，要快速找某个位置半径 2 公里的所有餐馆的信息。低效的做法是遍历这几百万的节点的位置，判断距离是否小于 2 公里。但如果用上索引技术，比如 R 树，我们就能利用索引去，快速拿到特定范围的节点超集，比如几千个。
2023-12-06 20:55:04
1051
原创 图形编辑器开发：快捷键的管理
大家好，我是前端西瓜哥。快捷键操作在图形编辑器中是很高频的操作，能让用户快速高效地执行特定命令，今天讲讲图形编辑器如果管理快捷键。
2023-11-27 23:27:09
1202
原创 图形编辑器开发：缩放和旋转控制点
大家好，我是前端西瓜哥。好久没写图形编辑器开发的文章了。今天来讲讲控制点。它是图形编辑器的不可缺少的基础功能。控制点是吸附在图形上的一些小矩形和圆形点击区域，在控制点上拖拽鼠标，能够实时对被选中进行属性的更新。比如使用旋转控制点可以更新图形的旋转角度，使用缩放控制点调整图形的宽高。这两个都是通用的控制点，此外还有给特定图形使用的专有控制点，像是矩形的圆角控制点，可拖动调整圆角大小。这些比较特别。后面会专门出一篇文章讲这个。
2023-11-25 20:20:58
1461
原创 老牌开源 SVG 编辑器 SVGEdit 是如何架构的？
大家好，我是前端西瓜哥。这次简单看看 SVGEdit 的架构。SVGEdit 的版本为 7.2.0。SVGEdit 一款非常老牌的 SVG 图形编辑器，用于编辑处理 SVG，start 数目前是 5.8k。。缺点是，提交很少，大概一个月一提交，最新版 7.2.0 也是 22 年 8 月的时候了。，很简单就能看到一些 UI bug。，这个 UI 好看很多。它 fork 了 SVG-Edit 并做了一些改造。Method-Draw 标榜简单易用，所以有意去掉了 SVGEdit 的一些高级功能，比如图层。
2023-11-25 00:22:23
2366
原创 图形编辑器开发：自定义光标管理
光标（游标）在图形界面交互中是非常基础的一环。它是一个指针，悬浮在屏幕的最上层。除了可以标记出指针的当前位置，同时也会通过它独特的样式，提示用户此时可以执行怎么的操作。比如抓手（grab）光标，是一个展开的手掌，表示可以对目标进行拖拽操作。缩放（xx-resize）光标，是一个有方向的单（双）箭头，表示可以往特定方向移动以改变目标大小。长得像英文字母I的文字（text）光标，则提示可以进行文字的操作，细瘦的垂直线是为了更好地点中字符之间的空白区域。
2023-11-21 21:50:01
856
1
原创 解析几何：计算两条线段的交点
大家好，我是前端西瓜哥。今天来实现计算两条线段的交点的解析几何算法。我们要实现 getLineSegIntersection 方法：提供两条线段，计算它们的交点。每条线段会用两个点坐标表示。
2023-10-17 08:46:51
329
原创 AutoCAD 产品设计：图形单位
本文讲解 AutoCAD 产品的图形单位功能产品设计，没有任何代码实现。使用的 AutoCAD 为 2020 版本。
2023-10-03 11:59:09
236
原创 WebGPU 入门：绘制一个三角形
大家好，我是前端西瓜哥。今天我们来入门 WebGPU，来写一个图形版本的 Hello World，即绘制一个三角形。
2023-10-03 11:53:14
265
原创 图形编辑器开发：是否要像 Figma 一样上 wasm
大家好，我是前端西瓜哥。wasm 拿来做 Web 端的图形编辑器貌似是不错的选择。因为图形处理会有相当多无法利用到 WebGL GPU 加速的 CPU 密集的计算。比如对一条复杂贝塞尔曲线进行三角化，对多个图形进行复杂图形的布尔运算。图形编辑器性能天花板 Figma 用了 wasm，我们也该用吗？
2023-07-25 21:45:00
1729
原创 图形编辑器开发：一些会用到的简单几何算法
大家好，我是前端西瓜哥。开发图形编辑器，你会经常要解决一些算法问题。本文盘点一些我开发图形编辑器时遇到的简单几何算法问题。
2023-07-16 10:28:28
998
原创 图形编辑器开发：参考线吸附功能，让图形自动对齐
总结一下，参考线吸附的实现，就是找出最近的垂直线和水平线，计算出 offsetX 和 offsetY，修正被移动图形的 x 和 y，并记录并绘制出最终重合的参考线。我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。
2023-07-11 22:30:38
1511
1
原创 图形编辑器开发：缩放至适应画布
大家好，我是前端西瓜哥。之前我们实现了画布缩放的功能，本文来讲讲如何让内容缩放至适应画布大小（Zoom to fit）。我们看看效果。
2023-06-23 17:00:00
818
原创 图形编辑器开发：以光标位置缩放画布
大家好，我是前端西瓜哥。画布缩放是图形设计工具中很重要的基础能力。通过它，我们可以像举着一台摄影机，在图形所在的世界到处游逛，透过镜头，可以只看自己想看的图形；可以拉近摄影机，看到图形的细节；也可以拉远摄影机，总览多个图形之间的关系。ok，那么我们看看如何实现缩放画布功能。
2023-06-22 17:06:17
1307
1
原创 一起学 WebGL：纹理对象学习
大家好，我是前端西瓜哥，今天我们来了解 WebGL 的纹理对象（Texture）纹理对象，是将像素（texels）以数组方式传给 GPU 的对象，常见场景是贴图，就是将图片的数据应用到 3D 物体上。
2023-06-16 23:56:51
1210
原创 图形编辑器开发：最基础但却复杂的选择工具
大家好，我是前端西瓜哥。对于一个图形设计软件，它最基础的工具是什么？。但这个选择工具，却是相当的复杂。这次我来和各位，细说细说选择工具的一些弯弯道道。
2023-06-12 21:29:26
1941
原创 PixiJS 源码深入解读：用于循环渲染的 Ticker 模块
大家好，我是前端西瓜哥。这次来看看 PixiJS 的 Ticker 模块源码。Ticker 的作用是，PixiJS 使用它来。版本为 7.2.4。
2023-05-29 08:33:04
1488
原创 PixiJS 源码解读：绘制矩形，底层都做了什么？
大家好，我是前端西瓜哥，今天带大家看一下 PixiJS 的源码实现。PixiJS 是一个非常流行的 Canvas 库，start 数将近 4w。使用 PixiJS 简单易用的 API，我们可以在浏览器页面的 Canvas 元素上高性能地绘制图形，实现流畅的动画。它的底层是 WebGL。渲染结果：这些代码的底层究竟做了什么呢？这次西瓜哥就带大家来一探究竟。使用的 PixiJS 版本为 7.2.4。
2023-05-23 22:46:36
1456
原创 一起学 WebGL：绘制图片
大家好，我是前端西瓜哥。本文为系列文章中的一篇，请先阅读：纹理映射会根据纹理图像，将光栅化后的每个片元（像素点）设置对应颜色值。这些像素也称为。
2023-05-05 23:37:10
1754
原创 用 Yjs + React 写一个支持协同的 TODO 应用
大家好，我是前端西瓜哥。为了测试 Yjs 的协同能力，我实现了支持协同简单的 TODO 应用。
2023-05-05 23:35:13
1411
原创 Yjs + quill：快速实现支持协同编辑的富文本编辑器
大家好，我是前端西瓜哥，这次来看看 Yjs 如何帮助我们实现协同编辑能力的。Y.js 是一个支持的开源库。只要我们将自己的数据转换为 Y.js 提供的Y.ArrayY.Map类型，Y.js 就会自动帮我们做数据的一致性处理和同步。
2023-05-05 23:34:02
2842
1
原创 图形编辑器：历史记录设计
大家好，我是前端西瓜哥。今天讲一下图形编辑器如何实现历史记录，做到撤销重做。其实就是版本号的更替。每个版本保存一个状态。
2023-04-29 16:44:40
1768
原创 一起学 WebGL：感受三维世界之视图矩阵
大家好，我是前端西瓜哥。之前绘制的图形都是在 XY 轴所在的平面上，这次我们来加入一点深度信息 z，带你走入三维的世界。
2023-04-22 00:34:23
1110
原创 一起学 WebGL：三角形加上渐变色
大家好，我是前端西瓜哥。之前教大家绘制一个红色的三角形，这次我们来画个有渐变的三角形。本文为系列文章，请先阅读如何绘制红色三角形的文章：原来的写法，颜色是在片元着色器中写死的，这次我们来像传顶点数据一样，声明一个颜色数据传递过去。颜色需要在片元着色器中赋值给内部变量，但 attribute 动态类型却不能在片元着色器中使用。这时候就要用到一个新的类型 varying 了。（意思为：“变化的“）。
2023-04-20 23:22:04
1207
原创 一起学 WebGL：复合矩阵
大家好，我是前端西瓜哥。之前讲了平移矩阵、旋转矩阵以及缩放矩阵，以及演示了在 WebGL 中的单独应用的效果。这次我们看看同时进行多次矩阵变换的组合写法。我们将会对一个三角形先平移，然后旋转。
2023-04-20 23:18:51
1290
原创 一起学 WebGL：图形变形以及矩阵变换
之前绘制了三角形，我们现在给它做一个变形操作。对一个三角形进行变形，其实就是重新这个三角形的三个顶点的位置，计算完后再绘制出来，相比原来就发生了变形。变形常见的有位移、选择、缩放。位移，其实就是给每个顶点的各个坐标值加上偏移量 dx、dy、dz。旋转稍微复杂些，用到了三角函数。最后是缩放，就是简单地各个分量乘以缩放比例系数。这些变换可以抽象简化成对应的变换矩阵，方便我们用统一的方式作表达，并配合矩阵乘法的结合律，将多个变形矩阵合并成一个复合矩阵，减少计算量。
2023-04-15 00:39:57
1351
原创 一起学 WebGL：图元的类型
大家好，我是前端西瓜哥，今天来说说 WebGL 中的三种图元。在 WebGL 中，图元有三种：点、线、以及三角形。这里的 mode 就是要绘制的图元类型。我们绘制 4 个点，下面是示意图，并按顺序标明绘制方向。下面来看看这四个顶点在不同图元类型下的效果。
2023-04-15 00:33:00
987
原创 一起学 WebGL：绘制三角形
大家好，我是前端西瓜哥。画了好几节课的点，这次我们来画三角形了。三角形可太重要了，再复杂的三维模型都是由一个个小三角形组合而成，越多越精细越真实。
2023-04-15 00:29:23
1024
原创 一起学 WebGL：动态绘制点
大家好，我是前端西瓜哥。上一篇文章讲解了如何绘制一个点。但这个点的信息是写死在渲染器源码中的，也就是硬编码。这是系列文章，如果你是初学者，你需要看上一篇文章才好理解这节课的内容。如果我们要频繁地改变点的位置去绘制，根据我们之前学到的知识点，那只能通过替换整个着色器代码字符串，不断地编译的方式去修改了，非常不便。这节课我们会通过 JavaScript 给着色器动态提供数据，而不需要重新编译着色器。
2023-04-08 12:27:57
913
原创 图形编辑器：排列移动功能的实现
大家好，我是前端西瓜哥。这次来实现一下图形编辑器排列（arrange）功能的实现。先看效果。需要注意保持被移动图形，要
2023-04-02 11:50:03
820
原创 一起学 WebGL：坐标系
大家好，我是前端西瓜哥，今天我们来学习 WebGL。WebGL 的世界坐标系是三维的。默认使用笛卡尔坐标系的右手坐标系，满足右手定则，即 x 轴向右，y 轴向上，z 轴向着观察者，原点位于画布中心。然后是比较微妙的东西是坐标值，使用的是百分比。比如对于 x 维度，取值范围为[-1, 1]。比如 -1 表示在屏幕的最左侧，1 表示在屏幕的最右侧，0 则是在原点，0.5 表示在 x 正半轴的 1/2 处。其他维度同理。
2023-03-21 23:31:54
594
原创 几何算法：矩形碰撞和包含检测算法
大家好，我是前端西瓜哥。今天来讲讲几何算法中，比较经典的算法：矩形碰撞和包含检测算法。矩形碰撞检测是被广泛使用的算法。比如在游戏中，为了优化图形碰撞判断效率（复杂不规则图形之间的碰撞算法很复杂），经常会使用到包围盒。所谓包围盒子是一个矩形，通常正好包围住一个规则或不规则的图形。如果两个图形的包围盒没有发生碰撞，那这两个图形一定不会发生碰撞，因为矩形的碰撞算法很简单，所以能够很好地优化性能。
2023-03-16 21:29:42
2454
6
原创 实现 TypeScript 类型安全的 EventEmitter，这下不用怕写错事件名了
如果要给一个已经固定了类型的实例，临时加一个事件，可以用交叉类型扩展一下。// 用 & 扩展 const ee2 = ee as EventEmitter < Events & {} >;// 不报错 ee2 . emit('customA' , true) // 或者(ee as EventEmitter < Events & {
2023-03-05 23:55:09
823
原创 如何防止用户打开浏览器开发者工具？
大家好，我是前端西瓜哥。作为一名前端开发，在浏览一些网页时，有时会在意一些交互效果的实现，会打开开发者工具查看源码实现。但有些网站做了防窥探处理，打开开发者工具后，会无法再正常进行网页的操作。它是怎么做到的呢？
2023-03-05 18:47:02
1654
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人