javascript - 在 React Native 中创建矩阵转换系统？

Question

我刚刚在 React Native 中构建了一个相对复杂的图像编辑 UI。

该体验旨在与 Instagram 非常相似，并具有捏合缩放、平移和旋转功能。

转换存储为数据，例如:

transformation: {
  bottomBoundary: 1989,
  leftBoundary: 410,
  rightBoundary: 1634,
  topBoundary: 765,
  rotation: 0,
},

其中topBoundary和bottomBoundary都是距图像顶部的偏移量，leftBoundary和rightBoundary分别是两者都距图像左侧有偏移。

旋转时，由于React Native使用对象的中心作为变换原点，因此图像在90°或270°方向时需要偏移，以便它们仍然“粘”在左上角/左上角并且可以被偏移:

calculateRotationOffset.js

export default function (width, height) {
  const transform = [
    { rotate: `${this.rotation}deg` },
  ]

  /*
    RN rotates around centre point, so we need to
    manually offset the rotation to stick the image
    to the top left corner so that our offsets will
    work.
  */
  if (this.rotation === 90) {
    transform.push(
      { translateX: -((width - height) / 2) },
      { translateY: -((width - height) / 2) },
    )
  } else if (this.rotation === 270) {
    transform.push(
      { translateX: ((width - height) / 2) },
      { translateY: ((width - height) / 2) },
    )
  }
  return transform
}

我的旋转和缩放实现无法协同工作。

Here is the complete snack example. .

重现该错误:

1. 旋转图像一次
2. 捏合即可放大或缩小
3. 再次旋转图像

图像现在将被错误地翻转和偏移。

此处至少连续发生三个转换来重现该错误，因此我无法追踪问题。

如果有必要的话，这个问题肯定会得到奖励，而且我可能还会提供金钱奖励。谢谢!

更新:经过一些建议，解决这个问题的最佳方法似乎是通过矩阵转换，然后以某种方式将该矩阵转换回 RN 可以在屏幕上表示的样式。矩阵变换需要支持平移、旋转和缩放。

Answer 1

我将用分解的变换矩阵(旋转、缩放、平移)替换 bottomBoundary 等，并在 UI 中使用多点触控。当在图像上滑动单个手指时，您可以更新矩阵的平移分量，并用 2 个手指对其进行变换，以便图像看起来粘在手指上。如果您想将旋转限制为 90 度增量，您可以在用户放开时捕捉它。这使您可以在图像内自由直观地移动，而无需当前的旋转按钮。

始终以分解形式存储矩阵，可以避免分解或标准化矩阵，以避免累积数值不准确(倾斜和改变纵横比)。

创建一个新的DecomposedMatrix类将有助于构建代码。关键是大致像这样处理它的转换:

scaleBy(scale) {
    this.scale *= scale;
    this.x *= scale;
    this.y *= scale;
}