1

ズーム画像ツールを作成しようとしています。このために、glMAtrix で matrix3d を使用しています 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
 }

ちなみに、translate と scale はより深いコンポーネントに含まれているので、私はそれらを嘲笑しましたが、基本的には次のようにします。

 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