前端西瓜哥

你好，我是瓜某。 前几天群里有人问了我一个有意思的问题，就是 Figma 创建图形，它的命名规则是怎样的？ 这个问题挺有趣的，不妨展开说说。 绘制图形场景 Figma 中通过绘制创建图形，图形名称会给

大家好，我是前端西瓜哥。 之前给我的图形编辑器加上了文本编辑功能。 详见文章：《图形编辑器：基于 canvas 的所见即所得文本编辑》 最近在这个基础上陆陆续续又加了点新功能。主要是： 引入 open

PM 看到产品 A 的 a1、a2 功能，又看到产品 B 的 b1、b2 功能。 最后他会说，我要 a1 和 b2，再加个自创的 c3，于是我们得到一个五彩斑斓的黑。 回到正题，我们看看不同主流软件的

之前引入了 opentype.js 库做字体解析，有了这个打底的话，就可以快乐地做一些简单文字排版功能了。 周末努了把力，给 Suika 图形编辑器加上了 手动回车换行 的支持。 解除了之前只能输入一

大家好，我是前端西瓜哥。 也是有一个月没写文章了。主要是 AI 太强了，简单的东西已经没有写的必要的，复杂的不好写。但多少还是要写点。 今天我们来绘制 Figma 的星形。 星形的绘制，比较简单，其实

大家好，我是前端西瓜哥。 在协同编辑中，同步用户状态是必不可少的功能。通过感知到其他用户的状态，我们可以有意识地避免操作同一个对象，导致冲突和相互覆盖。 下面我们看看 Figma 是怎么进行用户状态的

大家好，我是前端西瓜哥。 前段时间将图形编辑器的文字渲染做了下改造。 原来的文字渲染使用的是 Canvas 2d 的 fillText 方法，现在改成了用 opentype.js 解析字体获取字形（g

大家好，我是前端西瓜哥。 我们经常需要将图形放到到特定的矩形容器中，常用的的有两种策略：fit 和 fill。 fit fit，合身、适应、匹配之意。 也有些地方叫做 contain（比如 CSS），

大家好，我是前端西瓜哥。 今天来看看如何对多边线进行光滑处理。 多边线光滑化，指的是提供一个多边形和圆角半径值，将多边线的角点转换为圆弧，如下图所示。 image-20251012165457385