1

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

我有以下组件：

  • 代表最终视图的画布（黑色）
  • 画布内较小的可调整大小的矩形（红色）
  • 画布后面的 div 内的图像（带有文本的蓝色），一开始与画布具有相同的位置和尺寸

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

在此处输入图像描述

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

这是我尝试过的：

_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以不同方式执行此操作的任何想法？或者，如果您知道一些我可以看到如何缩放到矩形的示例。谢谢。

4

1 回答 1

1

我设法找到了解决方案：

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

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

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

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

仅此而已，它可以与多个音阶完美配合。

于 2022-01-26T13:15:47.840 回答