前端西瓜哥

大家好，我是前端西瓜哥。 前段时间给我的 suika 图形编辑器重写了文本编辑功能，基本支持了所见即所地编辑文本了，这篇文章总结一下实现这个功能需要做的一些工作。 简单演示...

Figma 是目前最成功的矢量图形编辑工具之一，它提供了基于web形式的图形编辑界面，让用户不需要额外安装或下载工具即可直接共享、协作和编辑其图形内容。分享下Figma的插...

大家好，我是前端西瓜哥。 图形编辑器中，我们有时候希望在 path 中微调一条曲线，在中间新增一个锚点，然后调整这个锚点和它的控制点。 为了实现这个功能，我们需要实现算法：...

大家好，我是前端西瓜哥。 很多图形编辑器实现路径 path 编辑，**只会用三阶贝塞尔和直线来表达**。 不用二阶贝塞尔曲线，因为它相比三阶贝塞尔曲线，表达不够灵活自由，表...

大家好，我是前端西瓜哥。 布尔运算是相当复杂的算法，需要考虑各种各样的图形，并匹配不同的布尔模式，有相当多的边缘场景。 通常我们需要找一些算法库或图形库，用里面的布尔算法进...

今年 5 月份从北京离职做独立开发，最近几个月的收入慢慢赶超了北京的工资，把自己的一点点心得分享出来。...

大家好，我是前端西瓜哥。 canvaskit 类似 Canvas 2D，会维护画布的 当前矩阵（current matrix），之后通过 drawXx 渲染图形时，会应用这...

‍ ‍大家好，我是前端西瓜哥。 有些图形软件，其底层是以贝塞尔样条曲线为原始图形（primitives），也就说它就只支持渲染贝塞尔曲线，数据层的其他图形（比如圆）的表达，...

大家好，我是前端西瓜哥。 这篇文章简单过一下 canvaskit 的高级功能，布尔运算。 用法 canvaskit 支持布尔运算，用法是创建两个 path 对象 path1...

大家好，我是前端西瓜哥。 本文介绍 canvaskit 的简单用法，如何绘制几种基本图形，对 canvaskit 做一个简单入门。 canvaskit 是 skia 的 w...

大家好，我是前端西瓜哥。 因为在做开源的 suika 图形编辑器，交互参考了 Figma，所以我总结了 Figma 的选中交互设计。 点选 按下鼠标，此时有多种场景。 1、...

大家好，我是前端西瓜哥。 在二维中，对于图形（模型），它会有一个模型矩阵 matrix 来表达图形的形变。 比如图形先做了缩放，然后再位移，则模型矩阵为缩放矩阵左乘位移矩阵...

我西瓜。 今天过一下 Web 图形渲染的各种方案。 渲染方案 Web 端的图形渲染的方案有 4 种，分别为： HTML + SVG Canvas 2D WebGL WebG...

大家好，我是前端西瓜哥。 今天我们来简单了解一些常用字体标准。 字体发展简史 不过首先我们简单过过桌面字体的发展历史。 在很久前，桌面排版使用的是点阵图，不支持所见即所得，...

大家好，我是前端西瓜哥。 opentype.js 是一个 JavaScript 库，支持浏览器和 Node.js，可以解析字体文件，拿到字体信息，并提供一些渲染方法。 虽然...

大家好，我是前端西瓜哥。 我整理了一下 AutoCAD 实体的常用几何属性。 属性基于实体的特性面板，并做一定调整尽量贴合数据层（接近 dwg 图纸），但不保证完全一致。 ...

大家好，我是前端西瓜哥。 之前我们 用原生的 WebGL 绘制图形，会发现调用的 API 和参数都很多很冗余，对此我们可以考虑用 pixi.js 来写 WebGL。 pix...

大家好，我是前端西瓜哥。 本文讲解如何实现画布缩放后线宽（strokeWIdth）保持为 1px。 我们需要的效果 画布缩放，就是用滚轮放大或缩小整个画布，会导致画布中的图...

今天我们来简单了解如何 给图形编辑器加上多人协同编辑功能。 多人协同，需要一种协同编辑算法，有 OT 和 CRDT 两种主流算法。 OT 涉及算法比较复杂难懂，且泛用性和扩...

大家好，我是前端西瓜哥。 今天我们来实现求三阶贝塞尔曲线和直线交点的方法。 方法需要接收的参数为： 三阶贝塞尔曲线的 4 个点； 直线的 2 个点。 返回结果为交点集合，和...