使用 css matrix3d 多次缩放到特定矩形

Question

我正在尝试创建一个缩放图像工具，为此我正在使用 matrix3d 和 glMAtrix https://glmatrix.net/

我有以下组件：

canvas（黑色）表示最终视图
canvas
canvas 后面的 div（蓝色带文字）内的图像，其开头的位置和尺寸与 canvas

我的想法是，当我调整红色矩形的大小后，我应该将图像从较小的矩形缩放到最终视图中的全屏，这是我第一次这样做，但下次当我尝试重新缩放它翻译得很糟糕。

如果我释放红色矩形，应该进行缩放以便我可以看到红色矩形中的内容，完全位于黑色矩形中。

这是我尝试过的：

_updateViewPortZoom () {
  const imageRect = $('.crop-editor-image').get(0).getBoundingClientRect()
  const zoomLevel = imageRect.width / this._cropRect.getScaledWidth()

  const trans = this._getReversCordsImage({
    x: -this._cropRect.left,
    y: -this._cropRect.top
  });

  translateCurrentMatrix(trans)
  scaleCurrentMatrix([zoomLevel, zoomLevel, 1])
}

_getReversCordsImage(point) {
      const matrix = this.options.stylesBuilder.getCurrentMatrix(PREVIEW_SELECTOR)
  
      const vec = glMatrix.vec3.fromValues(point.x, point.y, 0)
      const invertedMatrix = glMatrix.mat4.create()

      glMatrix.mat4.invert(invertedMatrix, matrix)
      glMatrix.vec3.transformMat4(vec, vec, invertedMatrix)

      return vec
 }

顺便说一句，平移和缩放在更深层次的组件中，所以我嘲笑了它们，但它们基本上是这样做的：

 case constants.SCALE: {
          const scaleMatrix = glMatrix.mat4.create();
          glMatrix.mat4.scale(scaleMatrix, scaleMatrix, parameter);
          glMatrix.mat4.multiply(matrix, scaleMatrix, matrix);
          break
        }
        case constants.TRANSLATE: {
          const translateMatrix = glMatrix.mat4.create();
          glMatrix.mat4.translate(translateMatrix, translateMatrix, parameter);
          glMatrix.mat4.multiply(matrix, translateMatrix, matrix);
          break
        }

我的想法是尝试将红色矩形的左顶点转换为图像坐标，然后进行平移和缩放。

知道如何使用 matrix3d 以不同方式执行此操作吗？或者，如果您知道一些示例，我可以在其中了解如何缩放到矩形。谢谢。

Answer 1

我找到了解决方案：

最后我不需要使用矩阵反转将点转换为另一个坐标，但由于每次矩阵相乘我可以使用小矩形的左上角位置，相对于视口 canvas（黑色）并将图像平移到那里然后缩放。

并且缩放级别应基于视口（黑色矩形）除以小矩形（不是图像！）

const zoomLevel = this.options.canvasWidth / this._cropRect.getScaledWidth()

translateCurrentMatrix([-this._cropRect.left, -this._cropRect.top, 0])
scaleCurrentMatrix([zoomLevel, zoomLevel, 1])

仅此而已，它与多个比例完美配合。

使用 css matrix3d 多次缩放到特定矩形

Zoom to specific rectangle multiple times using css matrix3d

javascript

css

css-transforms

gl-matrix