2021SC@SDUSC
Descripción general
En la sección anterior, aprendimos sobre el método pathToImage(path, dpr) y el método getBoundingRect() en canvasPainter.js. En este estudio, nos enfocamos principalmente en los métodos restantes del lienzo.
método componerParentTransform()
En el método pathToImage(path,dpr), mencionamos que en este método llamamos al método composeParentTransform(), que se implementa en la clase de prueba, y la función principal de este método es obtener la matriz de transformación local. El código principal es el siguiente segmento de código, al principio se obtienen algunas propiedades de este objeto para su uso posterior, como origen, rotación, posición, escala, sesgo, etc.
Luego cree la matriz m. El método utilizado aquí es crear, que se utiliza para crear una matriz de reconocimiento. Hay comentarios escritos por el autor aquí. La traducción es para mover el origen. No entiendo el significado de los comentarios aquí. , pero la función del enunciado es crear una matriz de m. Luego opere en algunas columnas de la matriz m, el valor de origen se obtiene a través de this.origin() al principio, como se muestra, correspondiente al contexto recién creado.
Hay otras operaciones sobre m como skew (transformación oblicua), escala (transformación de escala), rotar (transformación de rotación), etc., y los valores obtenidos anteriormente se pasan como parámetros respectivamente, y operaciones como mover el origen atrás se realizan para obtener una nueva matriz m. En una serie de operaciones, restamos las filas 5 y 6 de m de las filas 0 y 1 del origen respectivamente. Por lo tanto, después de operar m, necesita ser restaurado y los datos agregados nuevamente. Además, en esta función, la primera y segunda líneas de posición (información de posición) se agregan a los datos en las líneas 5 y 6. Esta operación es un poco confuso, y no se han discutido los resultados. El valor de retorno de datos es la matriz m transformada.
En este método, la implementación aquí no considera el orden de multiplicación de matrices en la transformación afín, porque la persona que llama a la API no presta atención al orden de transformación en el sentido matemático cuando proporciona elementos de configuración, sino que siempre usa el orden de transformación en el sentido intuitivo. , es decir: sesgo->escala->rotación->posición.
Sin embargo, este método de implementación tiene una gran deficiencia, no se corresponde bien con el mecanismo de transformación en SVG, por ejemplo: transform="rotation(Math.PI);scale(2,2);" El significado expresado por este atributo de transformación Sí: primero rotar, luego escalar, lo que requiere que las operaciones matriciales se realicen estrictamente de acuerdo con el orden de las transformaciones afines, pero la implementación aquí no admite esta operación. He aquí un análisis de las deficiencias de este método.
var m = matrixUtil.create(); // move origin point
m[4] -= origin[0];
m[5] -= origin[1];
m = matrixUtil.skew(m, skew);
m = matrixUtil.scale(m, scale);
m = matrixUtil.rotate(m, rotation); // move origin back
m[4] += origin[0];
m[5] += origin[1]; // translate
m[4] += position[0];
m[5] += position[1];
método createDomRoot
Este método es el último método en CanvasPainter.js. La función principal de este método es que en el entorno del navegador, la etiqueta del lienzo no se insertará directamente, sino que se incrustará una capa de div. El propósito de esto es agregar algunos estilos CSS necesarios para facilitar la realización de funciones específicas. Por lo tanto, la función de este método es principalmente devolver un objeto domRoot, que es un div. En este método, se opera principalmente el atributo cssText del estilo del div, y se dan algunas descripciones del css del objeto div. Por ejemplo, la posición adopta la forma de relativo, ancho, alto, etc. se establecen, y para la configuración de márgenes, finalmente use el método de unión y conecte con ";", de modo que obtengamos el texto css inicial del div. Luego devuelva directamente el objeto div.
createDomRoot(width, height) {
domRoot.style.cssText =
['position:relative', 'width:' + width + 'px', 'height:' + height + 'px', 'padding:0', 'margin:0', 'border-width:0'].join(';') + ';';
return domRoot;
}
La razón principal para escribir este método es que el autor hizo algunas aclaraciones aquí, el significado principal es que Safari para IOS13 puede tener un error de composición (el orden Z del lienzo y el orden consecuente no son los esperados), cuando algunos campos principales have -webkit-overflow-scrolling: touch;, y la página es más larga que una pantalla, y el lienzo no está en la parte superior de la página, el lienzo no está en la parte superior de la página. Por lo tanto, algunos casos especiales necesitan ser analizados y explicados.
Resumir
A través de este estudio, es principalmente para analizar y resumir los métodos restantes en el archivo canvasPainter.js y los métodos en otros archivos js utilizados por el método en este archivo, y finalmente completar el análisis del archivo canvasPainter.
Se analizan los archivos js en la carpeta canvas, y el siguiente análisis es principalmente para aprender y analizar algunos otros archivos js.