paperjs中 item 属性的 applyMatrix的详细解释及解决办法

在 Paper.js 中，item.applyMatrix 属性控制变换矩阵（平移、旋转、缩放等）的应用方式。它的行为对元素的坐标系统和属性访问有深远影响。以下是分步解释和解决方案：

1. applyMatrix 的作用

• applyMatrix: true（默认）:
  • 变换矩阵（位置、旋转、缩放等）会直接应用到元素的几何数据（如路径点坐标）。
  • 这意味着：
    • 元素的 position、rotation、scaling 等属性会被重置为默认值（位置变为 [0,0]，旋转为 0，缩放为 [1,1]）。
    • 几何数据（如路径点）的坐标已经是变换后的世界坐标，无需额外计算。
  • 优点：直接遍历点坐标时，位置是正确的。
  • 缺点：无法通过属性直接获取旋转、缩放信息。
• applyMatrix: false:
  • 变换矩阵会保留在 item.matrix 中，不会直接修改几何数据。
  • 这意味着：
    • 元素的 position、rotation、scaling 属性反映当前变换状态。
    • 几何数据的坐标是相对于本地坐标系（未应用变换）。
  • 优点：可以随时通过属性获取旋转、缩放信息。
  • 缺点：直接遍历点坐标时，位置是本地坐标，未应用变换。

2. 问题的核心矛盾

当 applyMatrix: false 时，虽然保留了变换信息（旋转、缩放），但几何数据（如路径点）的坐标是相对于本地坐标系的。如果直接读取这些坐标，它们没有经过变换矩阵的转换，因此位置不准确。

3. 如何正确获取位置？

当 applyMatrix: false 时，需手动应用变换矩阵到本地坐标，才能得到准确的世界坐标。以下是两种方法：

方法 1：使用 item.localToGlobal(point)

将本地坐标转换为全局（世界）坐标：

const localPoint = new paper.Point(10, 10);
const globalPoint = item.localToGlobal(localPoint);
console.log(globalPoint); // 输出变换后的世界坐标

方法 2：直接应用变换矩阵

通过矩阵乘法手动转换坐标：

const localPoint = new paper.Point(10, 10);
const globalPoint = localPoint.transform(item.matrix);
console.log(globalPoint); // 输出变换后的世界坐标

4. 实际应用示例

假设有一个旋转并缩放的矩形，需要获取其顶点在世界坐标系中的位置：

const rect = new paper.Path.Rectangle({
  from: [0, 0],
  to: [100, 100],
  applyMatrix: false // 保留变换矩阵
});

// 应用变换：位移到 (200, 200)，旋转45度，缩放2倍
rect.position = new paper.Point(200, 200);
rect.rotate(45);
rect.scale(2);

// 错误：直接读取点坐标（本地坐标系）
console.log(rect.segments[0].point); // 输出: [0, 0]

// 正确：转换为世界坐标
rect.segments.forEach(segment => {
  const globalPoint = segment.point.transform(rect.matrix);
  console.log(globalPoint); // 输出变换后的坐标
});

5. 何时使用 applyMatrix: false？

• 需要动态调整变换属性：例如，在动画中持续修改旋转或缩放。
• 需要保留变换信息：例如，序列化元素时保存旋转、缩放状态。
• 需要高效变换：避免频繁修改大量几何数据（仅修改矩阵更高效）。

6. 总结

• applyMatrix: true:
  • 直接修改几何数据，适合静态元素或需要直接操作世界坐标的场景。
• applyMatrix: false:
  • 保留变换矩阵，适合需要动态变换或获取变换信息的场景。
  • 必须通过 item.matrix 或 localToGlobal() 转换本地坐标为世界坐标。

通过合理使用 applyMatrix 和手动坐标转换，可以同时保留变换信息并获取准确的位置数据。

再来加点东西吧， 我之所以要深入研究applyMatrix属性是因为我在做一个在canvas上书写矢量文本的功能。 文本的旋转，缩放，都需要记录下来，只有这样，在二次编辑时，才能确定新增的文本以及光标的位置。 当我将applyMatrix 设置为false时，变换矩阵是用属性挂在图元上的。如下：

当我设置将applyMatrix设置为true时，图元就没有了该属性，那么从false切换到true时，变换矩阵已经应用到所有的子集元素啦。可以从第一个顶点坐标的变换可以推断出，变换矩阵已经被融化到内部元素的坐标里啦。这个时候你是无法再重新推导出之前的变换矩阵的。

各位，这给我造成了很大的麻烦，之前所有的功能，分组，组合，布尔计算，坐标计算，都是基于applyMatrix设置为true，这也是paperjs 图元的默认值。

applyMatrix属性的意思是 如果为true，这就意味着图元没有变换矩阵的参数，及时有也是没有意义的参数，所有的变换都是直接作用于图元的坐标的。旋转，缩放之后改变的是图元的真实坐标。而当applyMatrix为false时，在旋转，缩放时，图元的真实坐标不变，变的只是图元的变换矩阵参数，这种情况下你可以看到元素的绝对旋转角度。

这种情况下，编辑文本时保持 变换矩阵， 有一些解决方案的想法 1: 在将applyMatrix改为true之前，将变换矩阵数据，存放在图元的data属性里，在二次编辑时使用，可以尝试，但我觉得够呛，涉及矩阵的逆运算，将现有的图元坐标变换到使用变换矩阵的坐标。 这个方式我试了一下，在完成编写后将applyMatrix改为true ，存储变换矩阵，会导致在后续旋转，缩放，无法更新变换矩阵的数据。 因为改变变换矩阵的时机有很多。越往下走，就越需要设计模式，数据结构，算法相关的知识啦。我真的好难…

2: 使用两个图元，一个使用设置applyMatrix为true，一个设置applyMatrix改为false。 显示和编辑时 来回切换。

😮‍💨，都是细节啊，被操作啦。