一个你每天都在做的操作

打开 Figma。或者启动蓝湖查看标注，又或是打开 Lovart 开始绘图。

双指捏合，画布缩小了。两指一推，画布滑到了左边，点一下那个蓝色的矩形，选中了。

你每天都在做这三步。你从来没有觉得它们有什么值得思考的。

但我想请你回答一个问题：

这三步操作里有几个坐标系在同时工作？

从你大概会说来看，一个吧。就是画布的坐标系嘛，X 和 Y，所有东西都在里面。

不对。

答案是至少三个。而正是这个“至少三个”，分开了“会用画布”和“理解画布”的两种人。

使用者痛点

• 每次拖拽、缩放后需要手动计算偏移和比例，代码里充斥着offsetX/offsetY/scale等“魔法数字”。
• 多人协作时同步光标位置常出现错位，因为缺少统一的坐标转换模型。说起来，
• 大量元素渲染时性能低下无法快速裁剪视口外的对象。
• 实现“围绕指尖缩放”或“Zoom to Point”时总是写出晦涩难懂的补偿代码。
• 对图层顺序的误解导致层级错乱、覆盖异常。

画布没有动过

我们来思考一个问题。

你在 Figma 里按住空格键拖动，画面跟着你的手指在移动。你管这叫“拖动画布”，

但请你换一个视角想想——如果画布真的在动。画布上的那些矩形、文字、线条，它们的坐标变了吗？从答案是来看，没有，

你给一个矩形定的位置是 )。无论你怎么拖、怎么缩放，这个矩形在画布世界里的坐标始终是 )。没有任何东西移动了。

那到底什么在动？你在动，

或者更准确地说——你的“摄像机”在动。怎么说呢，这不是比喻，而是无限画布的字面原理：你的屏幕是取景框。画布世界是无限平面每一次拖拽都是推动自己的视口，而不是推动世界本身。

类比示例

• Mario 游戏：马里奥跑动时屏幕跟随移动，但世界本身并未后退；摄像机在移动，
• Google Maps：滑动地图时地球并未移动，你移动的是观测位置。

三大坐标系

• 世界坐标系：对象在无限平面的固定位置。例如矩形位于 )，永远不随摄像机变化。
• 屏幕坐标系：显示器上的像素位置。例如鼠标指针位于 )，这是使用者直接触达的坐标。
• 局部坐标系：对象相对于父级容器的坐标，用于分组、嵌套等场景。

每一次使用者交互。都要在这三套数字之间完成转换，这才是无限画布真正要做的事。

摄像机这方面，一个被隐藏的主要概念

If you have ever built a canvas whiteboard。you probably wrote logic like this:

let offsetX = 0;let offsetY = 0;function render {
elements.forEach(el => {
draw;})，}

This is a camera in disguise. When users zoom you maintain a scale,and when you render you multiply every coordinate by that scale.

Camera {
x: number // 摄像机在世界中的 X 位置
y: number // 摄像机在世界中的 Y 位置
zoom的观点是。number // 缩放比例
}

The three numbers define “where you stand in world and how much you see”. Once you treat alertX/offsetY/scale as camera parameters,many problems become instantly clear.

• The zoom is not enlarging objects;it’s moving camera closer.
• The objects’ world coordinates never change;only mapping to screen pixels changes.
• This explains *** after zooming all elements keep ir relative positions.

If you use Fabric.js,;其实，if you use native Canvas 2D API,,,and

worldX = / camera.zoom
worldY = / camera.zoom

screenX = worldX * camera.zoom + camera.x
screenY = worldY * camera.zoom + camera.y