Quark-Renderer-----第八篇

2021SC@SDUSC

总述

在上次学习中，我们对CanvasPainter.js中的一些方法进行了学习，如delLayer方法、eachLayer方法、resize方法、getRenderedCanvas方法等，这些方法主要是针对画布的大小和内容等进行重新渲染来实现一些需求。本次我们接着学习canvas画布的一些方法，这些方法也主要集中在CanvasPainter.js中。

pathToImage(path, dpr) 方法

该方法传入两个参数。一个是路径，一个是dpr（像素度），在函数开始，先获得所有的关于canvas的一些属性，如dpr、ctx（Canvas 绘图上下文，此属性在调用 initContext() 方法之后初始化，初始化之前此属性为 null）、rect（边界矩阵）、style（样式）、shadowBlurSize、shadowOffsetX(影像x轴偏移量)、shadowOffsetY(影像y轴偏移量)、lineWidth、leftMargin(左边缘)、rightMargin(右边缘)、topMarigin(上边缘)、bottomMargin(地边缘)、width、height等。并且使用width和height以及dpr给新创建的canvas的宽高进行赋值，并且给ctx的scale进行赋值，并且对于边界矩阵进行赋值，同时将ctx.dpr=dpr，接着定义对象pathTransform，其中包含position（位置）、rotation（旋转角度）以及scale（大小比例）。

接着需要给传入的path进行赋值操作，同样的对其position、rotation、scale、skew（倾斜角）进行赋值操作，同时对path调用composeParentTransform()方法，下端主要介绍该composeParentTransform方法。接着判断path，然后设置path的ctx，以及对path进行渲染，然后新建image，设置初始样式，图像就是画布canvas，然后通过判断pathTransform的position、rotation、scale等属性是否为null，如若不为null，则用这三个属性的值分别对img、path的position、rotation、scale等分别进行赋值，最后返回img图像。

    dpr = dpr || this.dpr;

    let canvas = canvasUtil.createCanvas(); //创建隐藏的 canvas，在内存中。
    let ctx = canvasUtil.getContext(canvas);
    let rect = path.getBoundingRect();
    let style = path.style;
    let shadowBlurSize = style.shadowBlur * dpr;
    let shadowOffsetX = style.shadowOffsetX * dpr;
    let shadowOffsetY = style.shadowOffsetY * dpr;
    let lineWidth = style.hasStroke() ? style.lineWidth : 0;

    let leftMargin = mathMax