前端西瓜哥

大家好，我是前端西瓜哥。 之前我们通过字体解析库，拿到了文字的字形路径数据，实现了 手动换行。 但是对于换行，只有手动换行还是不够的。 在文字排版中，我们希望可以给定一个区...

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

给大家分享一下UP个人结合当前互联网大环境的现状和个人对于未来职业的规划发展，开始对自由职业道路的初次探索...

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

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

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

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

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

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

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

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

大家好，我是前端西瓜哥。 今天我们来学习三维渲染。 这里需要选定一个三维渲染引擎，这里选择最流行的 threejs。 threejs 是什么 threejs 是一个 jav...

大家好，我是前端西瓜哥。 最近在给我的开源图形编辑器 suika 做多 page 功能，需要记录每个 page 的视口信息，在切换 page 的时候进行复原。 发现原来的视...

大家好，我是前端西瓜哥。 图形编辑器算是 Web 前端开发领域的其中一个天花板了。 对于功能复杂的图形编辑器，经过迭代多年，几十多模块互相关联，包含各种细碎的业务细节，复杂...

大家好，我是前端西瓜哥。 经常用 pixijs 的小伙伴或许注意到了，在 pixijs 下绘制多边形并使用填充，在很多情况下渲染是正确的，如果多边形是自交的，填充就会有问题...

大家好，我是前端西瓜哥。 圆角矩形，其实就是在矩形的基础上在四个角上加上 4 个圆角。 属性上相比矩形多了名为 cornerRadius 属性。 在 CSS 中，这个属性叫...

大家好，我是前端西瓜哥。 今天讲解钢笔工具的新增锚点，和删除并连接锚点的实现。 新增锚点（insert），指的是在 path 的一条三阶贝塞尔曲线上，基于某个位置使曲线一分...

大家好，我是前端西瓜哥。 之前我们实现了三点求圆的算法，这次我们加一点强度，实现 三点求圆弧 算法。 示例演示 https://codesandbox.io/p/sandb...

大家好，我是前端西瓜哥。 今天我们来学习一个简单平面几何算法。 给出三个点，求出对应的唯一圆形。 示例演示 https://codesandbox.io/p/sandbox...