0
192
VisualizaçõesHaga zoom en un rectángulo específico varias veces usando css matrix3d
Estoy tratando de crear una herramienta de imagen de zoom y para esto estoy usando matrix3d con glMAtrix https://glmatrix.net/
tengo los siguientes componentes:
- lienzo (negro) que representa la vista final
- rectángulo redimensionable más pequeño (rojo) dentro del lienzo
- una imagen dentro de un div (azul con texto) detrás del lienzo que al principio tiene la misma posición y dimensión que el lienzo
La idea es que cuando después de cambiar el tamaño del rectángulo rojo, debo hacer zoom en la imagen del rectángulo más pequeño para que esté en pantalla completa en la vista final, logré hacerlo por primera vez, pero luego la próxima vez que intente volver a hacer zoom. traduce mal.
Si suelto el rectángulo rojo, el zoom debe hacerse para que pueda ver lo que hay en el rectángulo rojo, completamente en el rectángulo negro.
Esto es lo que he probado:
_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 }Por cierto, traducir y escalar están en un componente más profundo, así que me burlé de ellos, pero básicamente hacen esto:
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 }Mi idea es tratar de transformar el punto superior izquierdo del rectángulo rojo en coordenadas de imagen y luego traducir y escalar.
¿Alguna idea sobre cómo puedo hacer esto de manera diferente usando matrix3d? O si conoce algunos ejemplos donde puedo ver cómo hacer zoom en un rectángulo. Gracias.
1 Respostas
Responde à pergunta0
Me las arreglé para encontrar una solución:
Al final, no necesito convertir el punto a otras coordenadas usando matriz invertida, pero dado que la matriz se multiplica cada vez, puedo usar la posición superior izquierda del rectángulo pequeño, en relación con el lienzo de la ventana gráfica (negro) y traducir la imagen a escala allí y luego.
Y el nivel de zoom debe basarse en el puerto de visualización (rect negro) dividido por el rect pequeño (¡no en la imagen!)
const zoomLevel = this.options.canvasWidth / this._cropRect.getScaledWidth() translateCurrentMatrix([-this._cropRect.left, -this._cropRect.top, 0]) scaleCurrentMatrix([zoomLevel, zoomLevel, 1])Eso es todo, y funciona perfectamente con múltiples escalas.