这个其实本身没啥好研究的，但是历史证明，我两年前由于没有明确直观地对各个坐标系统及其转换关系进行定义，导致实际开发的时候非常混乱，好几次坐标转换都是通过试错的方式来完成的。为了这一次的重新开发顺利，将坐标系统定义整理在此。

首先说明涉及到的三个坐标系统：Document，ZoomedDocument 及 Canvas。它们都是以像素为单位的，坐标方向从左上至右下。

1. Document：基于图像文档本身实际像素，原点即图像左上角。所有的真实绘图操作都应基于该坐标系。
2. ZoomedDocument：基于图像文档在实际显示比例下的显示像素，原点也为图像左上角。这是一个过渡性质的坐标系，用于联系真实文档和屏幕显示操作。
3. Canvas：基于屏幕绘图区域的显示像素，原点为绘图区域的左上角。所有的屏幕显示和 UI 处理都应基于该坐标系。

我们以一个 120 x 120 px 的图像为例，下图是基于其 Document 坐标系本身的尺寸：

当图像文档显示在窗口中时，用户实际操作的是绘图窗口中的主区域，即画布（Canvas）。下图显示了在不同缩放比例下，基于 Canvas 坐标系的一些常用值：

Canvas 坐标系中，自身的长宽是由窗口尺寸决定的，原点位于画布自身左上角。CanvasOffset 是相对于 ZoomedDocument 原点的偏移参考值，并不影响 Canvas 的坐标原点。之所以将这个偏移参考值放在 Canvas 坐标系中定义，是因为从概念上来说，文档是不动的，而编辑窗口则是在整个文档中四处移动的一个可见区域。

通过 Canvas 坐标系和其偏移量，我们可以得到相对于已经经过缩放的图像文档坐标系，ZoomedDocument：

该坐标系由于表示的是已经经过缩放的文档，因此其使用的也是实际的屏幕像素尺寸。其中，可见区域即为文档出现在画布内的区域，由于原点是文档的左上角，因此它具有完整的边界（Bounds）定义。

需要注意的是，可见区域并不等价于画布。当文档显示尺寸大于画布时（上图右），可见区域与画布尺寸是相等的；但当文档显示尺寸小于画布时（上图左），可见区域只是画布中的一部分，不会超出文档的显示尺寸本身。

最后通过缩放比例，可以还原至文档实际的坐标系，也就是最开始的文档尺寸定义使用的坐标系：

可见，Document 坐标系与 ZoomedDoc 坐标系的全部区别即在于缩放系数。

下面列出了这些坐标系的转换计算。其中 DocSize、CanvasSize、ZoomRatio、ZoomedDocVisibleOffset 这四组值已经事先获得或指定。由于宽度与高度概念在这里是可以完全互换的，这里只给出 x 方向上的计算：

ZoomedDocWidth := DocWidth * ZoomRatio;
ZoomedDocVisibleWidth := MIN ( CanvasWidth, ZoomedDocWidth );
DocVisibleWidth := ZoomedDocVisibleWidth / ZoomRatio;
DocVisibleLeft := ZoomedDocVisibleLeft / ZoomRatio;

在画布自由平移模式下，用户可以随意在画布中移动图像文档，此时 CanvasOffset 的值可以认为是由外部指定的。当处于非自由平移模式下时，其计算方法为：

IF CanvasWidth > ZoomedDocWidth THEN
    CanvasOffsetLeft := (CanvasWidth – ZoomedDocWidth) / 2;
ELSE
    CanvasOffsetLeft := MIN ( ZoomedDocVisibleLeft, ZoomedDocWidth – CanvasWidth );
END IF

通过这些计算表达式，我们可以在三种坐标系中随意转换。当 UI 接受到鼠标操作时，首先得到的是 Canvas 坐标，经过转换可以得到 Document 坐标以便进行实际的图像操作，处理结果再通过转换还原为 Canvas 坐标显示出来。

昨天因为女友加班，我难得又下班跑了趟淞虹路，想想就在那边吃饭吧，结束之后还顺道去了趟快乐柠檬，故事从买奶茶开始。

我点的是一个大杯的冰葡萄柚咖啡，其实我也觉得这两样东西很不搭，但背景是这样的：

她：怎么要这么不搭的东西~
我：不是你说让我点个奇怪点的东西么~
她：我说的奇怪是指奥利奥奶茶这种，不是葡萄柚咖啡这种。。。

事实证明我的尝试过于彻底，那杯东西的奇怪程度远远超出我的想像，大概只有当年在德国吃的土豆泥能够相提并论。实在不能想像这样的东西花去了我 12 块钱。

我不上图了，因为它长得其实还是很好看的，分层的，颜色很漂亮，以至于我拿到手的时候还觉得挺不错。接下去做的一件错事就是把它很悲剧地搅匀了，于是从那时开始，无论是视觉还是味觉上来说，它都像是一杯用来洗过水彩颜料盘的水。

总结起来，两件神奇的事：一是这是我喝过的由两种很好喝的饮料混合而成的最最难喝的东西；二是我把它喝完了。

这两天在比对 PS 的笔刷（Paintbrush）工具的硬度（Hardness）参数时，发现由笔刷直接绘出的圆形和由形状路径填充画出的圆形并不相同，注意下面的图：

同样是半径为 100 像素的圆，左图是由形状图层加渐变填充而得，右图是直接由硬度为 0% 的笔刷单击绘成。

可以发现，右图似乎比左图的尺寸稍大，且渐变更加平滑。左图最外圈似乎有着明确的边界线，不像是平稳过渡到纯白的。看来，PS 笔刷中的硬度渐变并非简单的径向线性渐变。为了更精确地进行分析，我检查了不同半径处的实际颜色，将每 10% 的变化进行标记，结果发现：

其中从最上面的刻度线表示 100% 纯黑开始，每向下一条线减淡 10%，直到最下端的线是 0%（即纯白）。可以明确，笔刷渲染所用的渐变的确不是线性的，而且它的实际半径竟达到 160 像素，比指定的 100 像素半径超出了一半还多！而位于 100 像素半径处黑度约为 10%（即右图的倒数第二根刻度线）。

而从左图的刻度线分布中，我惊讶地发现，即使是在 PS 中使用最简单的线性渐变，实际渲染也不是真正线性的，而是也采用了两头宽中间窄的非线性算法。

我们知道，人的生理感受程度是与实际物理刺激强度的对数成正比的，也就是说，当刺激强度增加到 10 倍时，人的感觉只是增加到 2 倍。这也是为什么声音的频率翻倍的时候，我们只觉得高了一个八度。如果真的采用严格的线性渐变，我们实际看的时候反而会觉得两头过渡的太快，而中间过渡得太慢，产生“非线性”的错觉。

PS 在这里采用非线性渐变，应该是为了对人的这种生理特点进行补偿。毕竟 PS 是以绘图者的直观感受为第一目标的，而非数学上的正确性。为了更好地展现这个变化曲率，我绘制了下面的曲线：

左侧的曲线较为简单，虽然使用了一些曲线补偿，但仍然近似线性，并可以直接通过一个简单的三次曲线来拟合，而右侧则曲率较大，而且无法用一根三次曲线拟合，似乎可以使用两根曲线在 50% 中点处连接而成。

另外，硬度（hardness）不同的笔刷，其渐变与实部的比例、以及整体画刷实际尺寸也是在不断变化的，而且非线性。下图展示了硬度从 0% 到 100% 的变化中，实部与画刷实际尺寸的变化趋势：

其中上方的线是实部的边缘，即从圆心到上边线之间的半径距离都是纯黑的；而下方的线是整体实际尺寸边缘，即从上边线到下边线之间的半径距离内是曲率渐变；而下方线的半径距离之外则是纯白，不属于笔刷的绘制范围。这两条线也是有微小的曲率补偿的（大概这就是 PS 里默认最线性的情况了吧）。

具体的曲率变化函数有待进一步测量和演算，但总体思想已经很清楚了。

无论是 2D 还是 3D 绘图软件，参考线对齐和网格对齐已经成为一项标准功能——即使在 Office 这样的软件中，网格对齐作为默认启用的功能也随处可见。现今的参考线与网格对齐通常有如下几种方式：

• 不对齐：即可以完全自由地移动、旋转和缩放，不自动对齐或贴合任何辅助线或对象。在 Windows 画图程序里永远就只能处于这种最初级的状态。
• 网格对齐（Snap to Grids）：在 MS Office 中使用绘图功能（比如在 PowerPoint 中插入一个矩形）时，这是默认开启的选项。整个绘图区域被平均划分成 N x M 的网格，所有绘图的操作的坐标都会被强制移到最近的网格线交点上。对于示意图来说，这是非常方便的处理方式。
• 参考线对齐（Snap to Guides）：在绘图软件中较为常用，用户可以自己定义水平或垂直参考线，然后当绘图操作的屏幕坐标与参考线的屏幕位置近到一定的程度时，即会被强制移到参考线上。产生一种“吸附”的感觉。
• 智能参考线对齐：在具体行为上与参考线对齐类似，但这些参考线不是由用户手动定义的，而是根据实际情况自动临时产生的。通常包括被操作对象自身和周边对象的边线与中轴线、对角线等等。

我并不打算在这里添加一种新的对齐方式，而是在具体操作上的一点修改。软件用户往往会遇到这样一种情况：即多数情况下这些对齐功能非常有用，但也有一定的少数情况下（并非极少数，只是相对较少而已），我们确实需要刻意偏离参考线一点点。目前的做法是，在需要的时候临时关闭对齐功能，之后再打开。

例如下图中的情况，当用户将上方的灰色矩形向参考线靠近时，一旦距离小于 4px，就会自动吸附，成为下方的样子。

事实上，对齐的存在是为了使用户不必进行精确的定位即可进行整齐划一的设计，由费茨法则（Fitts’ Law）可知，由于原本需要 1px 的精度扩大到了通常为 8px（即 ±4px），因而可以将操作速度提高至原先的 3 倍左右。然后我们便可以发现：

• 当用户操作速度较快时，说明他们并不想把时间花在精确定位上（或者说他们相信自动对齐参考线或网格线会帮助他们处理），此时应当通过参考线对齐来帮助用户快速创建整齐的绘图。
• 当用户操作速度较慢时，说明他们希望进行精确定位，此时应当允许用户自由定位，而不受参考线的约束。

这样一来，如果系统检测到用户在参考线附近进行慢速移动（比如慢于 5px/sec），那么就可以临时关闭参考线和网格对齐功能，使用户可以自由地进行移动和缩放，甚至可以弹出放大镜及标尺帮助用户进行精确定位，如下图所示。

另外，用户的操作历史序列也有助于帮助判断当前的操作动机是粗略定位还是精确定位。假设用户之前对某对象刚刚进行了一次远距离的位移或者尺寸调整（比如说超过20px或者超过自身尺寸的30% 或者其他基于上下文的参考值），那么紧接着对同一个对象进行慢速操作往往意味着精确定位，此时可以毫不犹豫地临时性关闭参考线或网格对齐功能。

此法还可以延伸至其他可以通过用户操作的速度来对系统的行为进行智能优化的方面，例如对于大规模鱼眼列表的滚动控制、大尺寸显示设备上的定点设备辅助等等。

（版权所有，转载请注明出处并保留链接。）

触控板（TrackPad）大概是 MacBook Pro 对于 PC 用户来说最酷最具有吸引力的部件了。毫不夸张地说，只要你用 MacBook Pro 上几个小时的网，再回到 PC 的时候你一定很郁闷。

无按钮设计是第一大特色，整块 TrackPad 就是一个大按钮，无论移到哪里都可以直接点击——而且是真的可以按下去的按钮，而不只是装模作样地敲一下面板（当然它也可以支持 tap）。要右键么？你就在右下角点一下就好了，或者，双指单击也行。

关于多点触摸手势不多说了，双指滚屏、双指开合缩放旋转、三指前进后退、四指启动 exposé 等等，你绝对会觉得外接鼠标是多余的（当然绘图和打游戏还是需要的）。

手感也是没得说，据称苹果在设计时花了大量的时间研究合适的磨擦力，以获得最佳的手感。我用了这么多台笔记本，确实没有用过手感如此好、反应如此灵敏的 TrackPad。

最后说一个其实是最基本的一个方面：尺寸。由于上面那些惊艳的特性，我用了几天才真正意识到它的尺寸是如此之大。后来一想也可以理解，如果不是这么大的尺寸，如何可以轻松地进行各种手势的操作？你在 PC 的 TrackPad 上做做四指滑动或者双指开合试试？

下图是 DELL Latitude D630（内虚线框）和 MacBook Pro（外虚线框）的 TrackPad 尺寸对比，可以看到 MacBook Pro 明显要大了一大圈，事实上，它的面积增加了 218%！即是前者尺寸的 3 倍多！

最后一件事，我永远可以把电脑用得很脏，我要看看如何能够保持这个 TrackPad 永远清洁，至少给别人看的时候不至于拿不出手。