图形学

吃饺子不吃馅

[开源] 从零到一打造在线 PPT 编辑器：React + Zustand + Zundo这个在线 PPT 编辑器的核心可以拆解为几个关键模块：数据模型、画布渲染器、状态管理器和属性面板首先，我们需要定义数据结构。整个演示文稿、每一页幻灯片以及幻灯片上的每一个元素（文本、形状、图片等）都应该被结构化、序列化为 JSON 对象

吃饺子不吃馅

如何设计一个 Canvas 事件系统？HTML5 Canvas 是一个强大的绘图工具，它允许我们在网页上绘制复杂的图形、动画和游戏。然而，Canvas 与 DOM 或 SVG 不同，它本质上是一个“哑”画布，它只是一个像素缓冲区。你画上去的矩形、圆形或文本，在 Canvas 看来都只是像素点，它本身并不“知道”那里有一个“对象”。

ObjectX前端实验室

【图形编辑器架构】：无限画布标尺与网格系统实现解析发布日期：2025年10月3日｜预计阅读时间：30 分钟上一篇我们讲解了分层事件系统的设计，本篇我们将在事件系统的基础上实现无限画布、标尺、网格绘制，无限画布实际上只是理论上的无限，绘制的仅仅是视口区域，通过事件触发移动和缩放，重新计算视图矩阵，更新渲染

ObjectX前端实验室

【图形编辑器架构】：编辑器的 Canvas 分层事件系统发布日期：2025年10月3日｜预计阅读时间：25 分钟最近在重构编辑器 demo 的时候，我重新梳理了事件层的实现。在节点层 → 渲染层之后，本篇重点切换到交互事件系统，也就是 Canvas 如何处理复杂交互，如何设计一个类似 Figma 的独立事件架构。

ObjectX前端实验室

【图形编辑器架构】节点树与渲染树的双向绑定原理发布日期 2025年10月2日 | 预计阅读时间：25 分钟最近在准备面试，重写了之前的编辑器demo，重构了节点层，渲染层，事件层，梳理了“节点树与渲染树的绑定机制”。本篇重点讲解数据层到渲染层的映射，也就是如何实现 NodeTree → SkiaNode → CanvasElement 的双向绑定。

ObjectX前端实验室

【图形编辑器架构】渲染层篇 — 从 React 到 Canvas 的声明式渲染实现发布日期 2025年10月1日 | 预计阅读时间：30 分钟最近在准备面试，重写了之前的编辑器demo，重构了节点层，渲染层，事件层，本篇主要介绍渲染层相关的实现，主要是自定义渲染器react-reconciler对接canvas平台，封装渲染api，对接节点层 & 渲染层

ObjectX前端实验室

【图形编辑器架构】节点树篇 — 从零构建你的编辑器数据中枢发布时间 2025年10月1日 | 阅读预估：8分钟最近在面试，想要整理下之前做过的内容，便把自己之前写的demo编辑器继续开发了，简单记录一些开发思路