自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(178)
  • 收藏
  • 关注

原创 给定一个边与边可能相交的多边形,求它的轮廓线

大家好,我是前端西瓜哥。最近遇到一个需求,。需要注意的是,轮廓线多边形内不能有空洞,使用的不是常见的非零绕数规则(nonzero)以及奇偶规则(odd-even)。

2024-02-24 21:42:12 913

原创 什么?Figma 的 fig 文件格式居然被破解出来了

大家好,我是前端西瓜哥。上周图形编辑器交流群里有人问,对于 Figma 导出的 fig 文件,该如何解析其格式,拿到可读数据。经过群友的一番讨论,这个问题最后算是解决了。

2023-12-18 21:40:04 1463

原创 图形遍历效率低?试试 R 树

大家好,我是前端西瓜哥。今天我们来看看 R 树是什么?以及它为什么能够提高图形的检索速度。R 树(R-tree)是一种。思路和其他索引算法(比如 B 树、跳表)有点像,但。R 树的 “R” 指的是矩形(Rectangle)。举个具体的例子,假设有一张地图,上面有几百万个节点,要快速找某个位置半径 2 公里的所有餐馆的信息。低效的做法是遍历这几百万的节点的位置,判断距离是否小于 2 公里。但如果用上索引技术,比如 R 树,我们就能利用索引去,快速拿到特定范围的节点超集,比如几千个。

2023-12-06 20:55:04 1097

原创 图形编辑器开发:快捷键的管理

大家好,我是前端西瓜哥。快捷键操作在图形编辑器中是很高频的操作,能让用户快速高效地执行特定命令,今天讲讲图形编辑器如果管理快捷键。

2023-11-27 23:27:09 1216

原创 图形编辑器开发:缩放和旋转控制点

大家好,我是前端西瓜哥。好久没写图形编辑器开发的文章了。今天来讲讲控制点。它是图形编辑器的不可缺少的基础功能。控制点是吸附在图形上的一些小矩形和圆形点击区域,在控制点上拖拽鼠标,能够实时对被选中进行属性的更新。比如使用旋转控制点可以更新图形的旋转角度,使用缩放控制点调整图形的宽高。这两个都是通用的控制点,此外还有给特定图形使用的专有控制点,像是矩形的圆角控制点,可拖动调整圆角大小。这些比较特别。后面会专门出一篇文章讲这个。

2023-11-25 20:20:58 1526

原创 老牌开源 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 2587

原创 图形编辑器开发:自定义光标管理

光标(游标)在图形界面交互中是非常基础的一环。它是一个指针,悬浮在屏幕的最上层。除了可以标记出指针的当前位置,同时也会通过它独特的样式,提示用户此时可以执行怎么的操作。比如抓手(grab)光标,是一个展开的手掌,表示可以对目标进行拖拽操作。缩放(xx-resize)光标,是一个有方向的单(双)箭头,表示可以往特定方向移动以改变目标大小。长得像英文字母I的文字(text)光标,则提示可以进行文字的操作,细瘦的垂直线是为了更好地点中字符之间的空白区域。

2023-11-21 21:50:01 900 1

原创 解析几何:计算两条线段的交点

大家好,我是前端西瓜哥。今天来实现计算两条线段的交点的解析几何算法。我们要实现 getLineSegIntersection 方法:提供两条线段,计算它们的交点。每条线段会用两个点坐标表示。

2023-10-17 08:46:51 390

原创 AutoCAD 产品设计:图形单位

本文讲解 AutoCAD 产品的图形单位功能产品设计,没有任何代码实现。使用的 AutoCAD 为 2020 版本。

2023-10-03 11:59:09 561

原创 WebGPU 入门:绘制一个三角形

大家好,我是前端西瓜哥。今天我们来入门 WebGPU,来写一个图形版本的 Hello World,即绘制一个三角形。

2023-10-03 11:53:14 271

原创 开源白板工具 Excalidraw 架构解读

本文讲解开源白板工具 Excalidraw 的架构设计。版本 0.16.1。

2023-10-03 11:29:30 2131 1

原创 图形编辑器开发:是否要像 Figma 一样上 wasm

大家好,我是前端西瓜哥。wasm 拿来做 Web 端的图形编辑器貌似是不错的选择。因为图形处理会有相当多无法利用到 WebGL GPU 加速的 CPU 密集的计算。比如对一条复杂贝塞尔曲线进行三角化,对多个图形进行复杂图形的布尔运算。图形编辑器性能天花板 Figma 用了 wasm,我们也该用吗?

2023-07-25 21:45:00 1792

原创 不是吧?强大的 vite 居然不支持内 SVG 转 Base64 内嵌?

大家好,我是前端西瓜哥。

2023-07-18 21:52:56 1038 1

原创 图形编辑器开发:一些会用到的简单几何算法

大家好,我是前端西瓜哥。开发图形编辑器,你会经常要解决一些算法问题。本文盘点一些我开发图形编辑器时遇到的简单几何算法问题。

2023-07-16 10:28:28 1020

原创 图形编辑器开发:参考线吸附功能,让图形自动对齐

总结一下,参考线吸附的实现,就是找出最近的垂直线和水平线,计算出 offsetX 和 offsetY,修正被移动图形的 x 和 y,并记录并绘制出最终重合的参考线。我是前端西瓜哥,欢迎关注我,学习更多图形编辑器知识。

2023-07-11 22:30:38 1653 1

原创 图形编辑器开发:缩放至适应画布

大家好,我是前端西瓜哥。之前我们实现了画布缩放的功能,本文来讲讲如何让内容缩放至适应画布大小(Zoom to fit)。我们看看效果。

2023-06-23 17:00:00 835

原创 图形编辑器开发:以光标位置缩放画布

大家好,我是前端西瓜哥。画布缩放是图形设计工具中很重要的基础能力。通过它,我们可以像举着一台摄影机,在图形所在的世界到处游逛,透过镜头,可以只看自己想看的图形;可以拉近摄影机,看到图形的细节;也可以拉远摄影机,总览多个图形之间的关系。ok,那么我们看看如何实现缩放画布功能。

2023-06-22 17:06:17 1312 1

原创 一起学 WebGL:纹理对象学习

大家好,我是前端西瓜哥,今天我们来了解 WebGL 的纹理对象(Texture)纹理对象,是将像素(texels)以数组方式传给 GPU 的对象,常见场景是贴图,就是将图片的数据应用到 3D 物体上。

2023-06-16 23:56:51 1238

原创 图形编辑器开发:最基础但却复杂的选择工具

大家好,我是前端西瓜哥。对于一个图形设计软件,它最基础的工具是什么?。但这个选择工具,却是相当的复杂。这次我来和各位,细说细说选择工具的一些弯弯道道。

2023-06-12 21:29:26 1980

原创 PixiJS 源码深入解读:用于循环渲染的 Ticker 模块

大家好,我是前端西瓜哥。这次来看看 PixiJS 的 Ticker 模块源码。Ticker 的作用是,PixiJS 使用它来。版本为 7.2.4。

2023-05-29 08:33:04 1583

原创 PixiJS 源码解读:绘制矩形,底层都做了什么?

大家好,我是前端西瓜哥,今天带大家看一下 PixiJS 的源码实现。PixiJS 是一个非常流行的 Canvas 库,start 数将近 4w。使用 PixiJS 简单易用的 API,我们可以在浏览器页面的 Canvas 元素上高性能地绘制图形,实现流畅的动画。它的底层是 WebGL。渲染结果:这些代码的底层究竟做了什么呢?这次西瓜哥就带大家来一探究竟。使用的 PixiJS 版本为 7.2.4。

2023-05-23 22:46:36 1505

原创 一起学 WebGL:绘制图片

大家好,我是前端西瓜哥。本文为系列文章中的一篇,请先阅读:纹理映射会根据纹理图像,将光栅化后的每个片元(像素点)设置对应颜色值。这些像素也称为。

2023-05-05 23:37:10 1786

原创 用 Yjs + React 写一个支持协同的 TODO 应用

大家好,我是前端西瓜哥。为了测试 Yjs 的协同能力,我实现了支持协同简单的 TODO 应用。

2023-05-05 23:35:13 1491

原创 Yjs + quill:快速实现支持协同编辑的富文本编辑器

大家好,我是前端西瓜哥,这次来看看 Yjs 如何帮助我们实现协同编辑能力的。Y.js 是一个支持的开源库。只要我们将自己的数据转换为 Y.js 提供的Y.ArrayY.Map类型,Y.js 就会自动帮我们做数据的一致性处理和同步。

2023-05-05 23:34:02 3013 1

原创 图形编辑器:历史记录设计

大家好,我是前端西瓜哥。今天讲一下图形编辑器如何实现历史记录,做到撤销重做。其实就是版本号的更替。每个版本保存一个状态。

2023-04-29 16:44:40 1798

原创 一起学 WebGL:感受三维世界之视图矩阵

大家好,我是前端西瓜哥。之前绘制的图形都是在 XY 轴所在的平面上,这次我们来加入一点深度信息 z,带你走入三维的世界。

2023-04-22 00:34:23 1120

原创 一起学 WebGL:三角形加上渐变色

大家好,我是前端西瓜哥。之前教大家绘制一个红色的三角形,这次我们来画个有渐变的三角形。本文为系列文章,请先阅读如何绘制红色三角形的文章:原来的写法,颜色是在片元着色器中写死的,这次我们来像传顶点数据一样,声明一个颜色数据传递过去。颜色需要在片元着色器中赋值给内部变量,但 attribute 动态类型却不能在片元着色器中使用。这时候就要用到一个新的类型 varying 了。(意思为:“变化的“)。

2023-04-20 23:22:04 1223

原创 一起学 WebGL:复合矩阵

大家好,我是前端西瓜哥。之前讲了平移矩阵、旋转矩阵以及缩放矩阵,以及演示了在 WebGL 中的单独应用的效果。这次我们看看同时进行多次矩阵变换的组合写法。我们将会对一个三角形先平移,然后旋转。

2023-04-20 23:18:51 1329

原创 一起学 WebGL:图形变形以及矩阵变换

之前绘制了三角形,我们现在给它做一个变形操作。对一个三角形进行变形,其实就是重新这个三角形的三个顶点的位置,计算完后再绘制出来,相比原来就发生了变形。变形常见的有位移、选择、缩放。位移,其实就是给每个顶点的各个坐标值加上偏移量 dx、dy、dz。旋转稍微复杂些,用到了三角函数。最后是缩放,就是简单地各个分量乘以缩放比例系数。这些变换可以抽象简化成对应的变换矩阵,方便我们用统一的方式作表达,并配合矩阵乘法的结合律,将多个变形矩阵合并成一个复合矩阵,减少计算量。

2023-04-15 00:39:57 1366

原创 一起学 WebGL:图元的类型

大家好,我是前端西瓜哥,今天来说说 WebGL 中的三种图元。在 WebGL 中,图元有三种:点、线、以及三角形。这里的 mode 就是要绘制的图元类型。我们绘制 4 个点,下面是示意图,并按顺序标明绘制方向。下面来看看这四个顶点在不同图元类型下的效果。

2023-04-15 00:33:00 1002

原创 一起学 WebGL:绘制三角形

大家好,我是前端西瓜哥。画了好几节课的点,这次我们来画三角形了。三角形可太重要了,再复杂的三维模型都是由一个个小三角形组合而成,越多越精细越真实。

2023-04-15 00:29:23 1040

原创 一起学 WebGL:动态绘制点

大家好,我是前端西瓜哥。上一篇文章讲解了如何绘制一个点。但这个点的信息是写死在渲染器源码中的,也就是硬编码。这是系列文章,如果你是初学者,你需要看上一篇文章才好理解这节课的内容。如果我们要频繁地改变点的位置去绘制,根据我们之前学到的知识点,那只能通过替换整个着色器代码字符串,不断地编译的方式去修改了,非常不便。这节课我们会通过 JavaScript 给着色器动态提供数据,而不需要重新编译着色器。

2023-04-08 12:27:57 917

原创 一起学 WebGL:绘制一个点

大家好,我是前端西瓜哥。本文讲解如何用 WebGL 绘制一个点。

2023-04-08 12:27:09 972

原创 图形编辑器:排列移动功能的实现

大家好,我是前端西瓜哥。这次来实现一下图形编辑器排列(arrange)功能的实现。先看效果。需要注意保持被移动图形,要

2023-04-02 11:50:03 825

原创 图形编辑器:对齐功能的实现

大家好,我是前端西瓜哥。这次来简单说说实现图形编辑器对齐功能的思路。

2023-04-01 19:09:21 763

原创 一起学 WebGL:坐标系

大家好,我是前端西瓜哥,今天我们来学习 WebGL。WebGL 的世界坐标系是三维的。默认使用笛卡尔坐标系的右手坐标系,满足右手定则,即 x 轴向右,y 轴向上,z 轴向着观察者,原点位于画布中心。然后是比较微妙的东西是坐标值,使用的是百分比。比如对于 x 维度,取值范围为[-1, 1]。比如 -1 表示在屏幕的最左侧,1 表示在屏幕的最右侧,0 则是在原点,0.5 表示在 x 正半轴的 1/2 处。其他维度同理。

2023-03-21 23:31:54 637

原创 几何算法:矩形碰撞和包含检测算法

大家好,我是前端西瓜哥。今天来讲讲几何算法中,比较经典的算法:矩形碰撞和包含检测算法。矩形碰撞检测是被广泛使用的算法。比如在游戏中,为了优化图形碰撞判断效率(复杂不规则图形之间的碰撞算法很复杂),经常会使用到包围盒。所谓包围盒子是一个矩形,通常正好包围住一个规则或不规则的图形。如果两个图形的包围盒没有发生碰撞,那这两个图形一定不会发生碰撞,因为矩形的碰撞算法很简单,所以能够很好地优化性能。

2023-03-16 21:29:42 2639 6

原创 实现 TypeScript 类型安全的 EventEmitter,这下不用怕写错事件名了

如果要给一个已经固定了类型的实例,临时加一个事件,可以用交叉类型扩展一下。// 用 & 扩展 const ee2 = ee as EventEmitter < Events & {} >;// 不报错 ee2 . emit('customA' , true) // 或者(ee as EventEmitter < Events & {

2023-03-05 23:55:09 873

原创 【前端必看】极大提高开发效率的网页 JS 调试技巧

大家好,我是前端西瓜哥。本文讲解如何使用浏览器提供的工具进行 JS 代码的断点调试。

2023-03-05 19:16:00 1063

原创 如何防止用户打开浏览器开发者工具?

大家好,我是前端西瓜哥。作为一名前端开发,在浏览一些网页时,有时会在意一些交互效果的实现,会打开开发者工具查看源码实现。但有些网站做了防窥探处理,打开开发者工具后,会无法再正常进行网页的操作。它是怎么做到的呢?

2023-03-05 18:47:02 1762

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除