Xuan

集成 Excalidraw：手绘风格白板的渲染引擎与数据架构

Mon, 06 Jul 2026 19:50:00 +0800

从渲染管线到数据序列化，拆解 Excalidraw 手绘白板的技术架构

Excalidraw 是什么

Excalidraw 是一个开源的手绘风格虚拟白板。表面上它是一个绘图工具，但真正有趣的是它背后的渲染引擎和数据结构设计。

这篇文章不聊「怎么用 Excalidraw」，而是拆解它怎么做到的。

一、Rough.js：手绘效果的数学内核

Excalidraw 的手绘效果并非滤镜或者纹理贴图，而是来自一个轻量级 JavaScript 库——rough.js。

1.1 粗犷渲染的算法原理

一个标准的 rect(100, 100, 200, 150) 在 SVG 中是完美笔直的四个边。而 rough.js 做的事情是：在渲染路径之前，主动注入随机扰动。

核心算法可以简化为：

function drawRoughRect(x, y, w, h) {
 // 在四个角的坐标上施加随机偏移
 const perturbation = 2; // 扰动幅度（像素）
 
 const corners = [
 { x: x + random(-perturbation, perturbation), y: y + random(-perturbation, perturbation) },
 { x: x + w + random(-perturbation, perturbation), y: y + random(-perturbation, perturbation) },
 { x: x + w + random(-perturbation, perturbation), y: y + h + random(-perturbation, perturbation) },
 { x: x + random(-perturbation, perturbation), y: y + h + random(-perturbation, perturbation) },
 ];
 
 // 每条边使用贝塞尔曲线链接，而不是直线
 // 控制点也施加随机偏移，制造"抖动"效果
 //
 // 并且不是画一条线，而是画 2-3 条几乎重叠的线
 // 模拟铅笔/马克笔的多次描边
 for (let stroke = 0; stroke < strokeCount; stroke++) {
 moveTo(corners[0].x + random(), corners[0].y + random());
 bezierCurveTo(
 corners[0].x + random(), corners[0].y + random(),
 corners[1].x + random(), corners[1].y + random(),
 corners[1].x + random(), corners[1].y + random()
 );
 // ... 四条边
 }
}

关键参数有三个：

参数	含义	Excalidraw 默认值
`roughness`	扰动幅度（越高越歪）	1-2（可调）
`bowing`	曲线弯曲度	0.85
`strokeWidth`	描边宽度	1（可调）

设定 roughness: 0 则回退到标准 SVG 精准渲染，这正是我之前踩的坑——AI 生成的 Excalidraw 风格图片没有用 rough.js 引擎，所以线条是完美笔直的，没有手绘质感。

About

Mon, 06 Jul 2026 19:00:00 +0800

Hi, I’m Xuan.

A big data engineer passionate about AI, distributed systems, and building things that matter.

为什么 Claude Code 那么好用

Mon, 06 Jul 2026 19:00:00 +0800

从 agentic 系统的内部视角，拆解 Claude Code 的架构设计与技术哲学

引言

市面上分析 Claude Code 的文章不少，但大多停留在「产品体验」层面。而我在过去几个月里，深度使用过 OpenClaw（一个类似 Claude Code 的自部署 agentic 系统），同时也看着 Cursor、Copilot、Windsurf 的发展。

这篇文章我会从 Agentic 架构的视角拆解 Claude Code 为什么技术选型走对了，以及它背后那些不显而易见的设计决策。

一、Tool-Use 架构 vs 补全架构

理解 Claude Code 和传统 AI 编程工具的差异，先看一张架构对比：

Copilot / Cursor 的补全模式

核心是 stateless 的代码补全。无论 Cursor 做得多好（检索增强、多文件上下文、Agent 模式），它的底层基因仍然是补全器。

Claude Code 的 Tool-Use 模式

核心是 stateful 的代理循环。Claude Code 不是一个代码补全器，而是一个能够在终端的 Unix 环境下自主行动的代理。

这个差异决定了几乎所有下游体验的不同。补全器只能在你当前上下文中做建议，而代理可以：

find . -name "*.py" | xargs grep "deprecated_api" — 真实搜索整个项目
读 A 文件、改 B 文件、测试 C 文件、提交 — 完整工作流
碰到编译错误，自己读错误日志，修正代码，再试一次

这不是渐进式的改进，是范式的切换。

Sketch

Mon, 01 Jan 0001 00:00:00 +0000