瀏覽代碼

draw:docs> 添加注释

sybotan 4 年之前
父節點
當前提交
0e2e1ebccd

+ 5 - 5
persagy-web-draw/src/SFont.ts

@@ -34,8 +34,6 @@ import { STextDirection } from "./enums/STextDirection";
  * @author 庞利祥 <sybotan@126.com>
  */
 export class SFont {
-    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    // 属性定义
     /** 字体 */
     name = "sans-serif";
     /** 字号 */
@@ -50,8 +48,6 @@ export class SFont {
     /** 文本方向 */
     textDirection = STextDirection.Inherit;
 
-    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    // 构造函数
     /**
      * 构造函数
      */
@@ -71,6 +67,7 @@ export class SFont {
      * @param size        字号
      */
     constructor(name: string, size?: number);
+
     /**
      * 构造函数
      *
@@ -78,16 +75,19 @@ export class SFont {
      * @param size        字号
      */
     constructor(name?: string | SFont, size?: number) {
+        // 重载 constructor();
         if (name == undefined) {
             return;
         }
+
+        // 重载 constructor(font: SFont);
         if (name instanceof SFont) {
             this.name = name.name;
             this.size = name.size;
             this.textAlign = name.textAlign;
             // this.textBaseLine = name.textBaseLine;
             this.textDirection = name.textDirection;
-        } else {
+        } else { // 重载  constructor(name: string, size?: number);
             this.name = name;
             this.size = size != undefined ? size : 16;
         }

+ 0 - 2
persagy-web-draw/src/SGradient.ts

@@ -32,8 +32,6 @@ import { SColor, SGradientStop, SPoint } from "./";
  * @author 庞利祥 <sybotan@126.com>
  */
 export abstract class SGradient {
-    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    // 属性定义
     /** 起点 */
     start = new SPoint();
 

+ 5 - 0
persagy-web-draw/src/SGradientStop.ts

@@ -38,14 +38,19 @@ export class SGradientStop {
         return this._pos;
     }
     set pos(value: number) {
+        //控制节点最小值为 0
         if (value < 0) {
             value = 0;
         }
+
+        // 控制节点最大值为 1
         if (value > 1) {
             value = 1;
         }
+
         this._pos = value;
     }
+
     /** 颜色 */
     color: SColor;
 

+ 2 - 1
persagy-web-draw/src/SLinearGradient.ts

@@ -65,10 +65,11 @@ export class SLinearGradient extends SGradient {
         y2?: number
     ) {
         super();
+        // 重载  constructor(start: SPoint, end: SPoint);
         if (x1 instanceof SPoint && y1 instanceof SPoint) {
             this.start = new SPoint(x1);
             this.end = new SPoint(y1);
-        } else {
+        } else { // 重载 constructor(x1: number, y1: number, x2: number, y2: number);
             this.start = new SPoint(x1 as number, y1 as number);
             this.end = new SPoint(x2 as number, y2 as number);
         }

+ 48 - 42
persagy-web-draw/src/SPainter.ts

@@ -49,8 +49,7 @@ import { SShadow } from "./SShadow";
  * @author 庞利祥 <sybotan@126.com>
  */
 export class SPainter extends SObject {
-    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    // 属性定义
+
     /** 绘制引擎 */
     private readonly engine: SPaintEngine;
 
@@ -115,10 +114,11 @@ export class SPainter extends SObject {
      */
     constructor(engine: SCanvasView | SPaintEngine) {
         super();
+        // 入参是 SCanvasView
         if (engine instanceof SCanvasView) {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             this.engine = new SCanvasPaintEngine(engine.canvas!!);
-        } else {
+        } else { // 入参是 绘制引擎
             this.engine = engine;
         }
 
@@ -143,8 +143,6 @@ export class SPainter extends SObject {
         this.engine.restore();
     }
 
-    // =================================================================================================================
-    // 变换相关
     /**
      * 平移变换
      *
@@ -223,9 +221,6 @@ export class SPainter extends SObject {
         this.engine.resetTransform();
     }
 
-    // =================================================================================================================
-    // 绘制相关
-
     /**
      * 清空矩形区域
      *
@@ -273,13 +268,14 @@ export class SPainter extends SObject {
         w?: number,
         h?: number
     ): void {
+        // 重载   clearRect(rect: SRect): void;
         if (x instanceof SRect) {
             this.engine.clearRect(x);
-        } else if (x instanceof SPoint && y instanceof SPoint) {
+        } else if (x instanceof SPoint && y instanceof SPoint) { // 重载 clearRect(leftTop: SPoint, rightBottom: SPoint): void;
             this.engine.clearRect(new SRect(x, y));
-        } else if (x instanceof SPoint && y instanceof SSize) {
+        } else if (x instanceof SPoint && y instanceof SSize) { // 重载  clearRect(leftTop: SPoint, size: SSize): void;
             this.engine.clearRect(new SRect(x, y));
-        } else {
+        } else { // 重载 clearRect(x: number, y: number, w: number, h: number): void;
             this.engine.clearRect(
                 new SRect(x as number, y as number, w as number, h as number)
             );
@@ -333,19 +329,20 @@ export class SPainter extends SObject {
         w?: number,
         h?: number
     ): void {
+        // 重载  drawRect(rect: SRect): void;
         if (x instanceof SRect) {
             // 判断2点是否有效
             if (x.x < x.right && x.y < x.bottom) {
                 this.engine.drawRect(x);
             }
-        } else if (x instanceof SPoint && y instanceof SPoint) {
+        } else if (x instanceof SPoint && y instanceof SPoint) { // 重载 drawRect(leftTop: SPoint, rightBottom: SPoint): void;
             // 判断2点是否有效
             if (x.x < y.x && x.y < y.y) {
                 this.engine.drawRect(new SRect(x, y));
             }
-        } else if (x instanceof SPoint && y instanceof SSize) {
+        } else if (x instanceof SPoint && y instanceof SSize) { // 重载 drawRect(leftTop: SPoint, size: SSize): void;
             this.engine.drawRect(new SRect(x, y));
-        } else {
+        } else { // 重载 drawRect(x: number, y: number, w: number, h: number): void;
             this.engine.drawRect(
                 new SRect(x as number, y as number, w as number, h as number)
             );
@@ -408,16 +405,17 @@ export class SPainter extends SObject {
         let rect: SRect | null;
         let r: number | null;
 
+        // 重载 drawRoundRect(rect: SRect, r: number): void;
         if (x instanceof SRect) {
             rect = x;
             r = y as number;
-        } else if (x instanceof SPoint && y instanceof SSize) {
+        } else if (x instanceof SPoint && y instanceof SSize) { // 重载 drawRoundRect(pos: SPoint, size: SSize, r: number): void;
             rect = new SRect(x, y);
             r = w as number;
-        } else if (x instanceof SPoint && y instanceof SPoint) {
+        } else if (x instanceof SPoint && y instanceof SPoint) { // 重载 drawRoundRect(p1: SPoint, p2: SPoint, r: number): void;
             rect = new SRect(x, y);
             r = w as number;
-        } else {
+        } else { // 重载 drawRoundRect(x: number, y: number, w: number, h: number, r: number): void;
             rect = new SRect(
                 x as number,
                 y as number,
@@ -427,6 +425,7 @@ export class SPainter extends SObject {
             r = radius as number;
         }
 
+        // 存在矩形和导角半径,绘制导角矩形
         if (rect != null && r != null) {
             this.engine.drawRoundRect(rect, r);
         }
@@ -494,11 +493,12 @@ export class SPainter extends SObject {
         x2?: number,
         y2?: number
     ): void {
+        // 重载 drawLine(line: SLine): void;
         if (x1 instanceof SLine) {
             this.engine.drawLine(x1);
-        } else if (x1 instanceof SPoint && y1 instanceof SPoint) {
+        } else if (x1 instanceof SPoint && y1 instanceof SPoint) { // 重载 drawLine(p1: SPoint, p2: SPoint): void;
             this.engine.drawLine(new SLine(x1, y1));
-        } else {
+        } else { // 重载 drawLine(x1: number, y1: number, x2: number, y2: number): void;
             this.engine.drawLine(
                 new SLine(
                     x1 as number,
@@ -569,9 +569,10 @@ export class SPainter extends SObject {
     }
 
     /**
-     * painter 转实现 view 象素
+     * painter 转实现 view 像素,缩放时,转换成实际宽
      *
      * @param p       绘制坐标
+     * @return 返回 view 像素
      */
     toPx(p: number): number {
         return p / this.engine.state.matrix.a;
@@ -638,13 +639,14 @@ export class SPainter extends SObject {
         st?: SArrow
     ): void {
         let line: SLine, style: SArrow;
+        // 重载 drawArrowLine(line: SLine, style?: SArrow): void;
         if (x1 instanceof SLine) {
             line = x1;
             style = y1 as SArrow;
-        } else if (x1 instanceof SPoint && y1 instanceof SPoint) {
+        } else if (x1 instanceof SPoint && y1 instanceof SPoint) { // 重载 drawArrowLine(p1: SPoint, p2: SPoint, style?: SArrow): void;
             line = new SLine(x1, y1);
             style = x2 as SArrow;
-        } else {
+        } else { // 重载 drawArrowLine(x1: number, y1: number, x2: number, y2: number,style?: SArrow): void;
             line = new SLine(
                 x1 as number,
                 y1 as number,
@@ -654,30 +656,36 @@ export class SPainter extends SObject {
             style = st as SArrow;
         }
         this.engine.drawLine(line);
+
+        // 存在线段两端样式
         if (style) {
+            // 存在线段起始点样式
             if (style.begin) {
+                // 起始点为基本类型
                 if (style.begin == SArrowStyleType.Basic) {
                     this.drawBasicArrow(line, false);
-                } else if (style.begin == SArrowStyleType.Triangle) {
+                } else if (style.begin == SArrowStyleType.Triangle) { // 起始点为三角型类型
                     this.drawTriangleArrow(line, false);
-                } else if (style.begin == SArrowStyleType.Diamond) {
+                } else if (style.begin == SArrowStyleType.Diamond) { // 起始点为菱形类型
                     this.drawDiamondArrow(line, false);
-                } else if (style.begin == SArrowStyleType.Square) {
+                } else if (style.begin == SArrowStyleType.Square) { // 起始点为正方形类型
                     this.drawSquareArrow(line, false);
-                } else if (style.begin == SArrowStyleType.Circle) {
+                } else if (style.begin == SArrowStyleType.Circle) { // 起始点为圆形类型
                     this.drawCircleArrow(line, false);
                 }
             }
+            // 存在线段结束点样式
             if (style.end) {
+                // 结束点为基本类型
                 if (style.end == SArrowStyleType.Basic) {
                     this.drawBasicArrow(line, true);
-                } else if (style.end == SArrowStyleType.Triangle) {
+                } else if (style.end == SArrowStyleType.Triangle) { // 结束点为三角型类型
                     this.drawTriangleArrow(line, true);
-                } else if (style.end == SArrowStyleType.Diamond) {
+                } else if (style.end == SArrowStyleType.Diamond) { // 结束点为菱形类型
                     this.drawDiamondArrow(line, true);
-                } else if (style.end == SArrowStyleType.Square) {
+                } else if (style.end == SArrowStyleType.Square) { // 结束点为正方形类型
                     this.drawSquareArrow(line, true);
-                } else if (style.end == SArrowStyleType.Circle) {
+                } else if (style.end == SArrowStyleType.Circle) { // 结束点为圆形类型
                     this.drawCircleArrow(line, true);
                 }
             }
@@ -702,7 +710,7 @@ export class SPainter extends SObject {
         // 线段与x轴夹角
         const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
         this.save();
-        // 是否为终点画箭头
+        // 为终点画箭头
         if (isEnd) {
             this.translate(line.x2, line.y2);
             this.rotate((fo * 180) / Math.PI);
@@ -711,7 +719,7 @@ export class SPainter extends SObject {
                 new SPoint(0, 0),
                 new SPoint(-x1, -y1)
             ]);
-        } else {
+        } else { // 终点不绘画箭头
             this.translate(line.x1, line.y1);
             this.rotate((fo * 180) / Math.PI);
             this.engine.drawPolyline([
@@ -741,7 +749,7 @@ export class SPainter extends SObject {
         // 线段与x轴夹角
         const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
         this.save();
-        // 是否为终点画箭头
+        // 为终点画箭头
         if (isEnd) {
             this.translate(line.x2, line.y2);
             this.rotate((fo * 180) / Math.PI);
@@ -750,7 +758,7 @@ export class SPainter extends SObject {
                 new SPoint(0, 0),
                 new SPoint(-x1, -y1)
             ]);
-        } else {
+        } else { // 终点不绘制箭头
             this.translate(line.x1, line.y1);
             this.rotate((fo * 180) / Math.PI);
             this.engine.drawPolygon([
@@ -780,7 +788,7 @@ export class SPainter extends SObject {
         // 线段与x轴夹角
         const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
         this.save();
-        // 是否为终点画箭头
+        // 为终点画箭头
         if (isEnd) {
             this.translate(line.x2, line.y2);
             this.rotate((fo * 180) / Math.PI);
@@ -790,7 +798,7 @@ export class SPainter extends SObject {
                 new SPoint(-x1, -y1),
                 new SPoint(-Math.sqrt(2) * d, 0)
             ]);
-        } else {
+        } else { // 终点不绘画箭头
             this.translate(line.x1, line.y1);
             this.rotate((fo * 180) / Math.PI);
             this.engine.drawPolygon([
@@ -813,12 +821,11 @@ export class SPainter extends SObject {
         // 定义箭头长度
         const d = this.toPx(5);
         // 线段与x轴夹角
-        // 线段与x轴夹角
         const tempFo = Math.atan(line.dy / line.dx);
         // 线段与x轴夹角
         const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
         this.save();
-        // 是否为终点画箭头
+        // 为终点画箭头
         if (isEnd) {
             this.translate(line.x2, line.y2);
             this.rotate((fo * 180) / Math.PI);
@@ -828,7 +835,7 @@ export class SPainter extends SObject {
                 new SPoint(0, -d / 2),
                 new SPoint(-d, -d / 2)
             ]);
-        } else {
+        } else { // 终点不绘画箭头
             this.translate(line.x1, line.y1);
             this.rotate((fo * 180) / Math.PI);
             this.engine.drawPolygon([
@@ -851,17 +858,16 @@ export class SPainter extends SObject {
         // 定义箭头长度
         const d = this.toPx(5);
         // 线段与x轴夹角
-        // 线段与x轴夹角
         const tempFo = Math.atan(line.dy / line.dx);
         // 线段与x轴夹角
         const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
-        // 是否为终点画箭头
         this.save();
+        // 为终点画箭头
         if (isEnd) {
             this.translate(line.x2, line.y2);
             this.rotate((fo * 180) / Math.PI);
             this.engine.drawCircle(-d / 2, 0, d / 2);
-        } else {
+        } else { // 不绘画箭头
             this.translate(line.x1, line.y1);
             this.rotate((fo * 180) / Math.PI);
             this.engine.drawCircle(d / 2, 0, d / 2);

+ 1 - 0
persagy-web-draw/src/SPath.ts

@@ -197,6 +197,7 @@ export class SPath {
      * @param pList   点集数组
      */
     polygon(pList: SPoint[]): void {
+        // 多边形校验,点需要在3个及其以上
         if (pList.length > 2) {
             this.addCommand("M", pList[0].x, pList[0].y);
             for (let i = 1; i < pList.length; i++) {

+ 3 - 5
persagy-web-draw/src/SPen.ts

@@ -32,8 +32,6 @@ import { SColor, SLineCapStyle, SLineJoinStyle } from "./";
  * @author 庞利祥 <sybotan@126.com>
  */
 export class SPen {
-    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    // 属性定义
     /** 画笔颜色 */
     color = SColor.Black;
 
@@ -55,8 +53,6 @@ export class SPen {
     /** 虚线样式的起始偏移量 */
     dashOffset = 0;
 
-    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    // 构造函数
     /**
      * 构造函数
      */
@@ -84,9 +80,11 @@ export class SPen {
      * @param lineWidth   线宽
      */
     constructor(color?: SColor | SPen, lineWidth?: number) {
+        // 重载 constructor();
         if (color == undefined) {
             return;
         }
+        // 重载 constructor(pen: SPen);
         if (color instanceof SPen) {
             this.color = new SColor(color.color);
             this.lineWidth = color.lineWidth;
@@ -96,7 +94,7 @@ export class SPen {
             this.dashOffset = color.dashOffset;
             this.lineDash =
                 color.lineDash != null ? color.lineDash.slice() : null;
-        } else {
+        } else { // 重载 constructor(color: SColor, lineWidth?: number);
             this.color = new SColor(color);
             this.lineWidth = lineWidth != undefined ? lineWidth : 1;
         }

+ 2 - 1
persagy-web-draw/src/SRadialGradient.ts

@@ -85,12 +85,13 @@ export class SRadialGradient extends SGradient {
         r2?: number
     ) {
         super();
+        // 重载 constructor(start: SPoint, r1: number, end: SPoint, r2: number);
         if (x1 instanceof SPoint && r1 instanceof SPoint) {
             this.start = new SPoint(x1);
             this.end = new SPoint(r1);
             this.r1 = y1;
             this.r2 = x2;
-        } else {
+        } else { // 重载 constructor(x1: number, y1: number, r1: number, x2: number, y2: number, r2: number);
             this.start = new SPoint(x1 as number, y1 as number);
             this.end = new SPoint(x2 as number, y2 as number);
             this.r1 = r1 as number;

+ 3 - 1
persagy-web-draw/src/SShadow.ts

@@ -68,15 +68,17 @@ export class SShadow {
      * @param color   阴影颜色
      */
     constructor(blur?: number | SShadow, color?: SColor) {
+        // 重载 constructor();
         if (blur == undefined) {
             return;
         }
+        // 重载 constructor(shadow: SShadow);
         if (blur instanceof SShadow) {
             this.shadowBlur = blur.shadowBlur;
             this.shadowColor = blur.shadowColor;
             this.shadowOffsetX = blur.shadowOffsetX;
             this.shadowOffsetY = blur.shadowOffsetY;
-        } else {
+        } else { // 重载 constructor(blur: number, color: SColor);
             this.shadowBlur = blur;
             this.shadowColor = color || SColor.Black;
         }

+ 36 - 28
persagy-web-draw/src/engines/SCanvasPaintEngine.ts

@@ -64,8 +64,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
         "source-over",
         "xor"
     ];
-    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    // 属性定义
+
     /**
      * 绘制引擎类型
      *
@@ -75,8 +74,6 @@ export class SCanvasPaintEngine extends SPaintEngine {
         return SPaintEngineType.Canvas;
     }
 
-    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    // 构造函数
     /**
      * 构造函数
      *
@@ -86,12 +83,8 @@ export class SCanvasPaintEngine extends SPaintEngine {
         super();
         this._canvas = canvas;
         this._canvas.imageSmoothingEnabled = true;
-
     }
 
-    // =================================================================================================================
-    // 绘制图形
-
     /**
      * 清空矩形区域
      *
@@ -177,9 +170,12 @@ export class SCanvasPaintEngine extends SPaintEngine {
         this.init((): void => {
             this._canvas.beginPath();
             this._canvas.moveTo(points[0].x, points[0].y);
+
+            // 遍历折线折点数组,绘制折线
             for (let p of points) {
                 this._canvas.lineTo(p.x, p.y);
             }
+
             this._canvas.stroke();
         });
     }
@@ -198,11 +194,13 @@ export class SCanvasPaintEngine extends SPaintEngine {
         this.init((): void => {
             this._canvas.beginPath();
             this._canvas.moveTo(points[0].x, points[0].y);
+
+            // 遍历顶点数组,绘制折线
             for (let p of points) {
                 this._canvas.lineTo(p.x, p.y);
             }
-            this._canvas.closePath();
 
+            this._canvas.closePath();
             this._canvas.fill();
             this._canvas.stroke();
         });
@@ -230,10 +228,11 @@ export class SCanvasPaintEngine extends SPaintEngine {
     drawText(text: string, x: number, y: number, maxWidth?: number): void {
         this.init((): void => {
             this.setFont();
+            // 不传最大宽度时,绘制时不限制最大宽度
             if (maxWidth == undefined) {
                 this._canvas.strokeText(text, x, y);
                 this._canvas.fillText(text, x, y);
-            } else {
+            } else { // 绘制时限制最大宽度
                 this._canvas.strokeText(text, x, y, maxWidth);
                 this._canvas.fillText(text, x, y, maxWidth);
             }
@@ -258,12 +257,13 @@ export class SCanvasPaintEngine extends SPaintEngine {
     ): void {
         this.init((): void => {
             try {
+                // 不传宽度时,绘制图片不限制宽高
                 if (width == undefined) {
                     this._canvas.drawImage(img, x, y);
-                } else {
+                } else { // 绘制时限制图片宽高
                     this._canvas.drawImage(img, x, y, width, height as number);
                 }
-            } catch (e) {
+            } catch (e) { // 捕获 获取图片异常
                 console.log(e);
             }
         });
@@ -362,9 +362,6 @@ export class SCanvasPaintEngine extends SPaintEngine {
         this.setTextDirection(font.textDirection);
     }
 
-    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-    // 私有函数
-
     /**
      * 设置整体绘制状态
      *
@@ -384,7 +381,6 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * 设置画笔
      */
     private setPen(): void {
-        //this._canvas.strokeStyle = this.state.pen.color.value;
         this._canvas.strokeStyle = `rgba(${this.state.pen.color.red}, ${
             this.state.pen.color.green
         }, ${this.state.pen.color.blue}, ${this.state.pen.color.alpha /
@@ -393,10 +389,11 @@ export class SCanvasPaintEngine extends SPaintEngine {
         this._canvas.lineWidth = this.state.pen.lineWidth;
         this._canvas.miterLimit = this.state.pen.miterLimit;
 
+        // 设定了画笔的虚线样式
         if (this.state.pen.lineDash != null) {
             this._canvas.setLineDash(this.state.pen.lineDash);
             this._canvas.lineDashOffset = this.state.pen.dashOffset;
-        } else {
+        } else { // 没有设定画笔的虚线样式
             this._canvas.setLineDash([]);
             this._canvas.lineDashOffset = 0;
         }
@@ -410,12 +407,17 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param style     风格
      */
     private setLineCapStyle(style: SLineCapStyle): void {
-        if (style == undefined) return;
+        // 没有设定风格
+        if (style == undefined) {
+            return;
+        }
+
+        // 圆头
         if (style == SLineCapStyle.Round) {
             this._canvas.lineCap = "round";
-        } else if (style == SLineCapStyle.Square) {
+        } else if (style == SLineCapStyle.Square) { // 方头
             this._canvas.lineCap = "square";
-        } else {
+        } else { // 平头
             this._canvas.lineCap = "butt";
         }
     }
@@ -424,15 +426,16 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * 设置画刷
      */
     private setBrush(): void {
-        // this._canvas.fillStyle = this.state.brush.color.value;
+        // 实心画刷
         if (this.state.brush.type == SBrushType.Color) {
             this._canvas.fillStyle = `rgba(${this.state.brush.color.red}, ${
                 this.state.brush.color.green
             }, ${this.state.brush.color.blue}, ${this.state.brush.color.alpha /
                 255.0})`;
-        } else if (this.state.brush.type == SBrushType.Gradient) {
+        } else if (this.state.brush.type == SBrushType.Gradient) { // 渐变画刷
             let gradient = this.state.brush.gradient,
                 drawGradient: CanvasGradient;
+            // 线性渐变画刷
             if (gradient instanceof SLinearGradient) {
                 drawGradient = this._canvas.createLinearGradient(
                     gradient.x1,
@@ -440,7 +443,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
                     gradient.x2,
                     gradient.y2
                 );
-            } else if (gradient instanceof SRadialGradient) {
+            } else if (gradient instanceof SRadialGradient) { // 径向渐变画刷
                 drawGradient = this._canvas.createRadialGradient(
                     gradient.x1,
                     gradient.y1,
@@ -450,6 +453,8 @@ export class SCanvasPaintEngine extends SPaintEngine {
                     gradient.r2
                 );
             }
+
+            // TODO:建龙补充
             // @ts-ignore
             if (gradient && drawGradient) {
                 gradient.stopList.forEach((t: SGradientStop): void => {
@@ -477,6 +482,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * 设置阴影
      */
     private setShadow(): void {
+        // 存在阴影扩散距离和阴影颜色
         if (this.state.shadow.shadowBlur > 0 && this.state.shadow.shadowColor) {
             this._canvas.shadowBlur = this.state.shadow.shadowBlur;
             this._canvas.shadowColor = `rgba(${
@@ -486,7 +492,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
             }, ${this.state.shadow.shadowColor.alpha / 255.0})`;
             this._canvas.shadowOffsetX = this.state.shadow.shadowOffsetX;
             this._canvas.shadowOffsetY = this.state.shadow.shadowOffsetY;
-        } else {
+        } else { // 否则
             this._canvas.shadowBlur = 0;
             this._canvas.shadowColor = "";
             this._canvas.shadowOffsetX = 0;
@@ -510,18 +516,20 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param value     对齐方式
      */
     private setTextAlign(value: STextAlign): void {
+        // 不设置对齐方式时
         if (value == undefined) {
             return;
         }
+        // 文本在指定的位置开始
         if (value === STextAlign.Start) {
             this._canvas.textAlign = "start";
-        } else if (value === STextAlign.End) {
+        } else if (value === STextAlign.End) { // 文本在指定的位置结束
             this._canvas.textAlign = "end";
-        } else if (value === STextAlign.Left) {
+        } else if (value === STextAlign.Left) { // 左对齐
             this._canvas.textAlign = "left";
-        } else if (value === STextAlign.Center) {
+        } else if (value === STextAlign.Center) { // 文本的中心被放置在指定的位置
             this._canvas.textAlign = "center";
-        } else {
+        } else { // 右对齐
             this._canvas.textAlign = "right";
         }
     }