在想选中框和属性面板的事情PM 看到产品 A 的 a1、a2 功能，又看到产品 B 的 b1、b2 功能。最后他会说，

PM 看到产品 A 的 a1、a2 功能，又看到产品 B 的 b1、b2 功能。

最后他会说，我要 a1 和 b2，再加个自创的 c3，于是我们得到一个五彩斑斓的黑。

回到正题，我们看看不同主流软件的选中框和属性面板方案是怎样的。

Figma

Figma 的选中框，是一种 transformBox 包围盒。

所有图形都有 width 和 height，以及一个 3x3 矩阵 transform。

选中框其实很简洁明了，首先有一个矩形。

{ x: 0, y: 0, width: width, height: height }

然后给这个矩形应用矩阵 transform。可能会因为斜切变成一个平行四边形。

width、height、transform 只要确定好，选中框也就确定了。具体图形内部渲染什么是不会影响选中框的。

优点很明显，可以 简化选中框的运算逻辑，不依赖图形本身的特性，进行复杂的运算得到包围盒。

开发上层功能实现起来因此会相对简单。

如果修改一个图形的渲染相关的参数会导致图形选中框改变，一些 autoFit 的特性将会导致容器频繁发生布局的重排，可能会产生一些性能问题。

缺点是会 出现一些空白区域。比如 Figma 的星形，边数为 5，会发现选中框没有很好的包围这个形状。原因是其实它的包围盒是一个圆，然后这个星形内接这个圆。

Figma 的图形会 尽量使用 width、height 的图形表达。

对于 width、height 不是基础属性的图形，比如矢量网格（类似路径），也会通过其他数据计算出 width 和 height。这种其实是一种计算属性了。

transformBox 这种选中框，有一个好处是可以表达发生了斜切的图形。

对于 transformBox，缩放图形的逻辑会变得麻烦些，需要先基于盒子的 transform 对光标点做逆矩阵，计算缩放变化值，最后再讲缩放的影响回归到 width 和 height 中。

尽管这样做控制线宽能尽量保持住。但在斜切场景下，我们还是可能得到不均匀的线宽，尤其是曲线的情况。

因为它本质是 stroke outline 路径的线性变换，斜切在 x 和 y 方向的不均匀效果会导致距离不同的线的不规则的走向。

Figma 的属性面板的 x、y 是图形的 transformBox 的 AABB 包围盒的左上角位置，width 和 height 则是实际渲染的宽和高，并不是 AABB 的宽高。

值得一提的是，在 Figma 的之前版本，x 和 y 是 transformed 中某个顶点的位置（本地坐标的原点应用 worldTransform 后的坐标）。可能这样更符合用户的直觉，虽然不符合基准点的定义。

rotation 的话，是正右向量(1, 0)应用 transform 后的极坐标角度。基准角度向量是正右方向，角度方向是逆时针，范围是 [-180, 180]。

Adobe Illustrator

Adobe Illustrator 的选中框，则是使用了 OBB（Oriented bounding box）。

它会尝试阻止斜切的产生，当对旋转的图形进行缩放导致斜切效果的产生时，Illustrator 会修改图形源，不让 transform 中产生斜切因子。

比如 一个矩形，斜切一下，会变成路径。（文字是特例，因为还需要编辑，不能转为路径）

好处是 渲染的线宽能保证均匀了，选中框也能保持 OBB。

缺点是选中框变得有点奇怪，突然出现一些空白区域，且丢失掉原来基础图形的属性，因为变成 path 了。

选择多个图形，Illustrator 会计算图形的最小包围盒，然后 merge 为大包围盒，作为选中框。

所谓 最小包围盒，就是计算图形形应用 transform 后的新路径，再去求包围盒。这意味着图形的任何修改，都需要重新计算包围盒，且计算复杂，尤其是复杂路径对象可能会有性能问题，

Figma 计算只算 width、height、transform，无视图形特性，运算很简单。

然后是属性面板，这个 x、y、width、height 对应的是图形的最小包围盒的。

rotation 和 Figma 一样，就是取值范围是 [0, 360)，只是取余用的值不同而已。

Canva

Canva 的做法是，不让图形可以发生斜切。在缩放的时候，就强制图形不能进行斜切，但也不会像 Illustrator 一样修改图形源。

rotation 方向不太一样，是顺时针的，其他是一样的。范围是 [-180, 180]。

Inkscape

Inkscape 的话，图形选中框会永远保持为最小 AABB 包围盒。

属性面板的值也是对应这个最小 AABB 包围盒，不提供 rotation 输入框。

Affinity

最后是 Affinity，被 Canva 收购后免费了，将位图编辑、矢量编辑等多个产品整合在一起了。

不想用盗版 Adobe 的童鞋，可以考虑用用 Affinity，免费的多香。

Affinity 的选中框基本和 Figma 一样，选中框也是 transformBox，x、y、width 和 height 也一样。

rotation 则有点特别。

前面的编辑器，默认是向右是 0 度，x 水平方向翻转就向左了，就是 180 度了。

但 Affinity 下水平翻转，rotation 会保持为 0。

应该是为了让旋转控制点和旋转值能对应上，对 rotation 做了特别定义。

即向右向量进行 transform 变换后的向量的垂直向量，垂直方向和图形的顺逆时针有关，顺时针向左，逆时针向右。这个向量和向上向量的夹角就是 rotation。

结尾

主流方案大概就这些了。个人比较喜欢 Figma，简洁易懂。