2021SC@SDUSC
总述
在上节中，我们对canvasPainter.js中的pathToImage(path, dpr) 方法和getBoundingRect()方法等进行了了解学习，本次学习，我们主要围绕对于画布的剩余方法等进行学习。
composeParentTransform()方法
在pathToImage(path,dpr)的方法中，我们提到了该方法中我们调用了composeParentTransform()方法，该方法是在test类中实现的，该方法的主要作用是获取本地变换矩阵。主要代码为下列的代码段，在一开始的获得this对象的一些属性，方便后续使用，如origin、rotation、position、scale、skew等。
接着创建m矩阵，这里使用的方法是create，作用是创建一个识别矩阵，这里有作者写的注释，翻译是移动原点，这里不是很明白注释的意思，但是语句的作用就是创建一个m的矩阵。接着对m数组的一些列进行操作，origin值是在一开始通过this.origin()获得的，作为显示，对应于新创建的上下文。
对m的操作还有skew（斜切变换）、scale（缩放变换）、rotate（旋转变换）等操作，将之前得到的值作为参数分别传入其中，实现原点后移等操，得到新的m的矩阵。在一系列操作，我们对m的第5行和第六行分别于origin的第0和第1行进行相减操作。所以，在操作完m后需要对其进行还原，将数据加回来，此外，在该函数中，对第5和第6行数据还加了position（位置信息）的第一行和第二行，这个操作有点不懂，没有讨论出什么结果。数据返回值就是改造后的m数组。
在这个方法中，这里的实现没有考虑仿射变换中的矩阵乘法顺序，因为 API 调用者在提供配置项时并不会留意数学意义上的变换顺序，而总是采用的直觉意义上的变换顺序，也就是：skew->scale->rotation->position 。
但是，这种实现方式有一个重大的缺点，它不能很好地对应 SVG 中的 transform 机制，比如：transform=“rotation(Math.PI);scale(2,2);” 这个 transform 属性表达的意思是：先 rotation ，然后 scale ，这就要求严格按照仿射变换的顺序来进行矩阵运算，但是这里的实现不能支持这种操作。这是一些对于该方法的缺点的解析。
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];
createDomRoot方法
该方法时CanvasPainter.js中的最后一个方法，该方法的主要作用是由于在浏览器环境中，不会直接插入 canvas 标签，而是再内嵌一层div。这样做的目的是加上一些必要的 CSS 样式，方便实现特定的功能。因此，该方法的作用主要是返回一个domRoot对象，该对象是一个div，在该方法中主要对div的style的cssText属性进行了操作，给div对象的css进行一些描述，如position采用relative的形式，width、height等进行了设置，以及对于边距的设置，最后使用join方法，用“；”连接，这样我们就得到了该div的css初始文本。然后直接返回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;
}
要写这个方法的主要原因是，作者在这里做了一些说明，主要意思是IOS13的Safari可能有一个合成错误（画布的Z顺序和随之而来的顺序不符合预期），当一些父域有 -webkit-overflow-scrolling: touch;，而网页长度超过一个屏幕，并且画布不在页面的顶部时，画布不在页面的顶部。因此需要对一些特殊的情况进行分析说明。
总结
通过本次学习，主要是将该canvasPainter.js文件中剩余的方法，以及在该文件中方法用到的别的js文件中的方法进行分析总结，最终完成对于canvasPainter的文件的分析。
对于canvas文件夹中的js文件进行了分析，下次的分析主要在其他的一些js文件上进行学习分析。