2021SC@SDUSC
Aperçu
Dans la section précédente, nous avons découvert la méthode pathToImage(path, dpr) et la méthode getBoundingRect() dans canvasPainter.js. Dans cette étude, nous nous concentrons principalement sur les méthodes restantes du canevas.
méthode composeParentTransform()
Dans la méthode pathToImage(path,dpr), nous avons mentionné que dans cette méthode nous appelons la méthode composeParentTransform(), qui est implémentée dans la classe de test, et la fonction principale de cette méthode est d'obtenir la matrice de transformation locale. Le code principal est le segment de code suivant. Au début, certaines propriétés de cet objet sont obtenues pour une utilisation ultérieure, telles que l'origine, la rotation, la position, l'échelle, l'inclinaison, etc.
Créez ensuite la matrice m. La méthode utilisée ici est create, qui est utilisée pour créer une matrice de reconnaissance. Il y a des commentaires écrits par l'auteur ici. La traduction est de déplacer l'origine. Je ne comprends pas le sens des commentaires ici , mais la fonction de l'instruction est de créer une matrice de m. Ensuite, opérez sur certaines colonnes du tableau m, la valeur d'origine est obtenue via this.origin() au début, comme indiqué, correspondant au contexte nouvellement créé.
Il existe d'autres opérations sur m telles que l'inclinaison (transformation oblique), l'échelle (transformation de mise à l'échelle), la rotation (transformation de rotation), etc., et les valeurs précédemment obtenues sont respectivement transmises en tant que paramètres, et des opérations telles que le déplacement de l'origine retour sont réalisés pour obtenir une nouvelle matrice m. Dans une série d'opérations, nous soustrayons les 5ème et 6ème lignes de m des 0ème et 1ère lignes d'origine respectivement. Par conséquent, après l'opération m, il doit être restauré et les données ajoutées. De plus, dans cette fonction, les première et deuxième lignes de position (informations de position) sont ajoutées aux données des 5e et 6e lignes. Cette opération est un peu flou, et aucun résultat n'a été discuté. La valeur de retour des données est le tableau m transformé.
Dans cette méthode, l'implémentation ici ne tient pas compte de l'ordre de multiplication de la matrice dans la transformation affine, car l'appelant de l'API ne fait pas attention à l'ordre de transformation au sens mathématique lors de la fourniture des éléments de configuration, mais utilise toujours l'ordre de transformation au sens intuitif , c'est-à-dire : inclinaison->échelle->rotation->position.
Cependant, cette méthode d'implémentation a un défaut majeur, elle ne correspond pas bien au mécanisme de transformation en SVG, par exemple : transform="rotation(Math.PI);scale(2,2);" La signification exprimée par cet attribut transform Oui : d'abord tourner, puis mettre à l'échelle, ce qui nécessite que les opérations matricielles soient effectuées strictement dans l'ordre des transformations affines, mais l'implémentation ici ne peut pas prendre en charge cette opération. Voici une analyse des lacunes de cette méthode.
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éthode createDomRoot
Cette méthode est la dernière méthode de CanvasPainter.js. La fonction principale de cette méthode est que dans l'environnement du navigateur, la balise canvas ne sera pas insérée directement, mais une couche de div sera intégrée. Le but de ceci est d'ajouter quelques styles CSS nécessaires pour faciliter la réalisation de fonctions spécifiques. Par conséquent, la fonction de cette méthode est principalement de retourner un objet domRoot, qui est une div. Dans cette méthode, l'attribut cssText du style de la div est principalement exploité, et certaines descriptions sont données au css de l'objet div. Par exemple, la position adopte la forme de relative , width, height, etc. sont définis, et pour les paramètres de marge, utilisez enfin la méthode join et connectez-vous avec ";", afin que nous obtenions le texte css initial de la div. Puis renvoyez directement l'objet 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 principale raison d'écrire cette méthode est que l'auteur a apporté quelques clarifications ici, la signification principale est que Safari pour IOS13 peut avoir un bogue de composition (l'ordre Z du canevas et l'ordre qui en résulte ne sont pas comme prévu), lorsque certains champs parents have -webkit-overflow-scrolling: touch;, et la page est plus longue qu'un écran, et le canevas n'est pas en haut de la page, le canevas n'est pas en haut de la page. Par conséquent, certains cas particuliers doivent être analysés et expliqués.
Résumer
A travers cette étude, il s'agit principalement d'analyser et de résumer les méthodes restantes dans le fichier canvasPainter.js et les méthodes dans d'autres fichiers js utilisées par la méthode dans ce fichier, et enfin de compléter l'analyse du fichier canvasPainter.
Les fichiers js du dossier canvas sont analysés, et l'analyse suivante consiste principalement à apprendre et à analyser d'autres fichiers js.