代码之家 › 专栏 › 技术社区 › V. Sambor

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

gl-matrix css-transforms css javascript

V. Sambor · 技术社区 · 4 年前

我正在尝试创建一个缩放图像工具,为此我将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做不同的事情吗? 或者,如果你知道一些例子,我可以看到如何缩放到一个矩形。谢谢

0 回复 | 直到 4 年前

V. Sambor 4 年前

我设法找到了一个解决方案:

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

缩放级别应该基于视图端口(黑色矩形)除以小矩形(而不是图像!)

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

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

仅此而已,它可以完美地与多个音阶配合使用。

推荐文章