上一篇文章写了如何让画布进行变换并允许画布的父元素的坐标映射到画布上,即用画布的变换矩阵的逆矩阵进行变换。
这个文章将会写在当前被变换的画布上绘制图元。
对于我目前已有的几种2d图元：矩形、弧形、扇形、椭圆弧线、贝塞尔曲线、path路径。(path是直线、贝塞尔曲线、椭圆弧线的组合图型)
在不考虑贴图的情况下，只有椭圆弧线、矩形和在path中的椭圆弧线会受到画布线性变换的影响(主要是旋转或切变等变换的影响)。 本文仅以矩形进行编辑，因为其他图形还没有写。
举个例子：
这是在绘制时矩阵没有线性变换结果，矩形的xy方向和画布的相对坐标系的xy对齐
这是在绘制时矩阵加入对应矩阵的结果
如何计算这个矩阵?
当然是使用当前画布的逆变换矩阵；但是，画布的变换还参与有缩放属性，我给了一个开关控制是否使用缩放。
所以要视条件重新计算一个没有缩放参与的矩阵。
在视口view中的鼠标down事件中的部分代码：
定义一些变量，分别为鼠标在canvas的坐标、在view的坐标、在窗口中的坐标、以及当前对象(dom框架的实例对象)的引用
图元的矩阵的计算过程和变换矩阵类似，但是不参与缩放值，再取逆矩阵。
为了计算方便，矩性的起点位置都设置为零，而应用到矩形的变换矩阵的平移量。
即tgtM.set_translate(c_point.x,c_point.y)
创建矩形图元后，使用偏移量计算矩形图元的宽高值
最后将事件添加到document上就行了。记得鼠标up事件清理这个move的动作。
使用缩放值的效果：可以看到原本描边1px会因为缩放值而变粗/变细。如果带有贴图的话可能会导致贴图失真(未测试贴图效果)。
不使用缩放值的效果：
