Este artículo presenta principalmente una forma de lograr la escala del lienzo configurando la matriz de transformación del lienzo.
El primer paso es escuchar el evento de la rueda del mouse. En el evento de la rueda, según el desplazamiento del mouse y la transformación anterior, el zoom y la traducción del contexto se restablecen.
let delta = this.deltaInst; delta.bind('zoom', (datos) => { delta._transform.scale.forEach((s, i) => { delta._transform.scale[i] *= datos.delta > 0? 2: 1/2; }); deja que offsetX = datos.x - delta._transform.translate[0]; delta._transform.translate[1]; delta._transform.translate[0] += -(data.delta > 0? 1: -1/2)*delta._transform.translate[1] -= (datos. delta > 0? 1: -1/2)*desplazamientoY; delta.refreshAll();});Aquí se supone que cada zoom se amplía 2 veces, pero también pueden existir otras proporciones de zoom.
El primer paso es multiplicar o dividir la relación de zoom actual por 2 según la dirección de desplazamiento;
El segundo paso es calcular la traducción. La idea básica es calcular la posición donde se puede traducir el lienzo para lograr el mismo efecto al escalar el punto en el lienzo a la posición central según la nueva posición del mouse.
Echemos un vistazo al código de actualización de todo:
let ctx = this.context; let matriz = this.getTransformMatrix(); ctx.save(); ctx.transform(...matrix); //ctx.translate(...this._transform.translate); ctx.scale(...this._transform.scale); if (!Array.isArray(formas)) { formas = [formas] } formas.forEach( (forma) => { forma.render(ctx); }); ctx.restore();El código primero obtiene una matriz de cambio basada en la escala del valor de escala y el valor de traducción calculados previamente, y luego pasa el valor correspondiente en la matriz al método de transformación del contexto, realiza una transformación determinada en el lienzo y luego realiza el escalado anterior. Las operaciones de dibujo completamente consistentes producirán el mismo efecto que después de escalar ~~
En el código anterior, ctx.transform() también se puede reemplazar completamente por los métodos ctx.translate() y ctx.scale(). Como se muestra en la parte de comentarios del código, los parámetros son los valores calculados previamente.
El código completo se puede encontrar en la dirección de github: https://github.com/helloweilei/delta
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.