学到了!Figma 原来是这样表示矩形的

开发 前端
Figma 只用宽高和变换矩阵来表达矩形,在数据层可以用精简的数据表达丰富的变形,此外在渲染的时候也能将矩阵运算交给 GPU 进行并行运算,是不错的做法。

大家好,我是前端西瓜哥。

今天我们来研究一下 Figma 是如何表示图形的,这里以矩形为切入点进行研究。

明白最简单的矩形的表示后,研究其他的图形就可以举一反三。

矩形的一般表达

如果让我设计一个矩形图形的物理属性,我会怎么设计?

我张口就来:x、y、width、height、rotation。

对一些简单的图形编辑操作,这些属性基本上是够用的,比如白板工具,如果你不考虑或者不希望图形可以翻转(flip) 的话。

Figma 需要考虑翻转的情况的,此外还有斜切的情况。

翻转的场景:

还有斜切的场景,在选中多个图形然后缩放时有发生。

这些表达光靠上面的几个属性是不够的,我们看看 Figma为了表达这些效果,是怎么去设计矩形的。

Figma 矩形物理属性

与物理信息相关的属性如下:

{
  "size": {
    "x": 100,
    "y": 100
  },
  "transform": {
    "m00": 1,
    "m01": 3,
    "m02": 5,
    "m10": 2,
    "m11": 4,
    "m12": 6
  },
  // 省略其他无关属性
}

没有位置属性,这个属性默认是 (0, 0),实际它转移到 transform 的矩阵的位移子矩阵上了。

size 表示宽高,但属性名用的是 x(宽) 和 y(高),理论上 width 和 height 语义更好,这样应该是用了矢量类型。

size 表示宽高,理论上 width 和 height 语义更好,这样应该是用了平面矢量类型的结构体,所以是 x 和 y。

transform 表示一个 3x3 的变换矩阵。

m00 | m01 | m02
m10 | m11 | m12
 0  |  0  |  1

上面的 transform 属性的值所对应的矩阵为:

1 | 3 | 5
2 | 4 | 6
0 | 0 | 1

属性面板

再看看这些属性对应的右侧属性面板。

x、y 分别是 5 和 6,它是 (0, 0) 进行 transform 后的结果,这个直接对应 transform.m02 和 tansfrom.m12。

import { Matrix } from "pixi.js";

const matrix = new Matrix(1, 2, 3, 4, 5, 6);
const topLeft = matrix.apply({ x: 0, y: 0 }); // { x: 5, y: 6 }

// 或直接点
const topLeft = { x: 5, y: 6 }

这里引入了 pixi.js 的 matrix 类,该类使用列向量方式进行表达。

文末有 demo 源码以及线上 demo,可打开控制台查看结果验证正确性。

然后这里的 width 和 height,是 223.61 和 500, 怎么来的?

它们对应的是矩形的两条边变形后的长度,如下:

uiWidth 为 (0, 0) 和 (width, 0)  进行矩阵变换后坐标点之间的距离。

const distance = (p1, p2) => {
  const a = p1.x - p2.x;
  const b = p1.y - p2.y;
  return Math.sqrt(a * a + b * b);
};

const matrix = new Matrix(1, 2, 3, 4, 5, 6);
const topLeft = { x: 5, y: 6 }

const topRight = matrix.apply({ x: 100, y: 0 });
distance(topRight, topLeft); // 223.60679774997897

最后计算出 223.60679774997897,四舍五入得到 223.61。

高度计算同理。

uiHeight 为 (0, 0) 和 (0, height)  进行矩阵变换后坐标点之间的距离。

const matrix = new Matrix(1, 2, 3, 4, 5, 6);
const topLeft = { x: 5, y: 6 }

const bottomLeft = matrix.apply({ x: 0, y: 100 });
distance(bottomLeft, topLeft); // 500

旋转角度

最后是旋转角度,它是宽度对应的矩形边向量,逆时针旋转 90 度的向量所对应的角度。

先计算宽边向量,然后逆时针旋转 90 度得到旋转向量,最后计算旋转向量对应的角度。

const wSideVec = { x: topRight.x - topLeft.x, y: topRight.y - topLeft.y };
// 逆时针旋转 90 度,得到旋转向量
const rotationMatrix = new Matrix(0, -1, 1, 0, 0, 0);
const rotationVec = rotationMatrix.apply(wSideVec);
const rad = calcVectorRadian(rotationVec);
const deg = rad2Deg(rad); //

这里用了几个工具函数。

// 计算和 (0, -1) 的夹角
const calcVectorRadian = (vec) => {
  const a = [vec.x, vec.y];
  const b = [0, -1]; // 这个是基准角度

  // 使用点积公式计算夹脚
  const dotProduct = a[0] * b[0] + a[1] * b[1];
  const d =
    Math.sqrt(a[0] * a[0] + a[1] * a[1]) * Math.sqrt(b[0] * b[0] + b[1] * b[1]);
  let rad = Math.acos(dotProduct / d);

  if (vec.x > 0) {
    // 如果 x > 0, 则 rad 转为 (-PI, 0) 之间的值
    rad = -rad;
  }
  return rad;
}

// 弧度转角度
const rad2Deg = (rad) => (rad * 180) / Math.PI;

Figma 的角度表示比较别扭。

特征为:基准角度朝上,对应向量为 (0, -1),角度方向为逆时针,角度范围限定为 (-180, 180],计算向量角度时要注意这个特征进行调整。

完整代码实现

线上 demo:

https://codepen.io/F-star/pen/WNPVWwQ?editors=0012。

代码实现:

import { Matrix } from "pixi.js";

// 计算和 (0, -1) 的夹角
const calcVectorRadian = (vec) => {
  const a = [vec.x, vec.y];
  const b = [0, -1];

  const dotProduct = a[0] * b[0] + a[1] * b[1];
  const d =
    Math.sqrt(a[0] * a[0] + a[1] * a[1]) * Math.sqrt(b[0] * b[0] + b[1] * b[1]);
  let rad = Math.acos(dotProduct / d);

  if (vec.x > 0) {
    // 如果 x > 0, 则 rad 为 (-PI, 0) 之间的值
    rad = -rad;
  }
  return rad;
}

// 弧度转角度
const rad2Deg = (rad) => (rad * 180) / Math.PI;

const distance = (p1, p2) => {
  const a = p1.x - p2.x;
  const b = p1.y - p2.y;
  return Math.sqrt(a * a + b * b);
};

const getAttrs = (size, transform) => {
  const width = size.x;
  const height = size.y;
  const matrix = new Matrix(
    transform.m00, // 1
    transform.m10, // 2
    transform.m01, // 3
    transform.m11, // 4
    transform.m02, // 5
    transform.m12 // 6
  );

  const topLeft = { x: transform.m02, y: transform.m12 };
  console.log("x:", topLeft.x)
  console.log("y:", topLeft.y)

  const topRight = matrix.apply({ x: width, y: 0 });
  console.log("width:", distance(topRight, topLeft)); // 223.60679774997897

  const bottomLeft = matrix.apply({ x: 0, y: height });
  console.log("height:", distance(bottomLeft, topLeft)); // 500

  const wSideVec = { x: topRight.x - topLeft.x, y: topRight.y - topLeft.y };
  // 逆时针旋转 90 度,得到旋转向量
  const rotationMatrix = new Matrix(0, -1, 1, 0, 0, 0);
  const rotationVec = rotationMatrix.apply(wSideVec);

  const rad = calcVectorRadian(rotationVec);
  const deg = rad2Deg(rad);
  console.log("rotation:", deg); // -63.43494882292201
};

getAttrs(
  // 宽高
  { x: 100, y: 100 },
  // 变换矩阵
  {
    m00: 1,
    m01: 3,
    m02: 5,
    m10: 2,
    m11: 4,
    m12: 6,
  }
);

运行一下,结果和属性面板一致。

结尾

Figma 只用宽高和变换矩阵来表达矩形,在数据层可以用精简的数据表达丰富的变形,此外在渲染的时候也能将矩阵运算交给 GPU 进行并行运算,是不错的做法。

责任编辑:姜华 来源: 前端西瓜哥
相关推荐

2022-12-14 07:32:40

InnoDBMySQL引擎

2022-05-05 08:55:12

工业物联网IIoT

2023-05-22 15:58:11

2018-04-02 15:13:21

网络

2023-02-15 08:17:38

2020-05-26 08:52:36

Java JVM多态

2020-11-24 06:20:02

Linux日志文件系统

2016-10-12 08:54:24

2017-11-02 13:05:12

PC3D NAND内存

2021-08-17 07:00:00

双重检查锁Nacos

2014-07-21 10:32:52

苹果公司实习

2020-03-23 08:30:12

程序员男友感受

2015-03-25 09:55:34

程序员程序员修补BUG真正原因

2018-10-26 10:41:19

2022-07-13 10:37:59

服务器故障优化

2017-05-09 15:39:33

ensorFlow机器人机器学习

2017-06-06 15:13:07

2011-05-25 09:58:46

C#

2021-02-07 08:13:18

@DateTimeFo@NumberFormSpring
点赞
收藏

51CTO技术栈公众号