sagacloud-web/saga-web-draw/src/SPainter.ts

import { SObject } from "@saga-web/base/lib";
import { SPaintEngine } from "./engines/SPaintEngine";
import {
    SBrush,
    SCanvasPaintEngine,
    SCanvasView,
    SFont,
    SLine,
    SPath2D,
    SPen,
    SPoint,
    SRect,
    SSize
} from "./";
import { SCompositeType } from "./enums/SCompositeType";
import { SArrow } from "./types/SArrow";
import { SArrowStyleType } from "./enums/SArrowStyleType";

/**
 * Painter
 *
 * @author  庞利祥(sybotan@126.com)
 */
export class SPainter extends SObject {
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // 属性定义
    /** 绘制引擎 */
    private readonly engine: SPaintEngine;

    /** 画笔 */
    get pen(): SPen {
        return this.engine.state.pen;
    } // Get pen
    set pen(value: SPen) {
        this.engine.state.pen = value;
    } // Set pen

    /** 画刷 */
    get brush(): SBrush {
        return this.engine.state.brush;
    } // Get brush
    set brush(value: SBrush) {
        this.engine.state.brush = value;
    } // Set brush

    /** 字体属性 */
    get font(): SFont {
        return this.engine.state.font;
    } // Get font
    set font(value: SFont) {
        this.engine.state.font = value;
    } // Set font

    /** 融合属性 */
    get composite(): number {
        return this.engine.state._composite;
    } // Get composite
    set composite(value: number) {
        this.engine.state._composite = value;
    } // Set composite

    /** 变换矩阵 */
    get worldTransform(): DOMMatrix {
        return this.engine.state.matrix;
    } // Get worldTransform

    /**
     * 构造函数
     *
     * @param   engine      绘制引擎
     */
    constructor(engine: SCanvasView | SPaintEngine) {
        super();
        if (engine instanceof SCanvasView) {
            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
            this.engine = new SCanvasPaintEngine(engine.canvas!!);
        } else {
            this.engine = engine;
        }

        this.pen = new SPen();
        this.brush = new SBrush();
        this.font = new SFont();
        this.composite = SCompositeType.SourceOver;
    } // Constructor()

    /**
     * 保存painter状态
     */
    save(): void {
        this.engine.save();
    } // Function save()

    /**
     * 恢复painter状态
     */
    restore(): void {
        this.engine.restore();
    } // Function restore()

    // =================================================================================================================
    // 变换相关
    /**
     * 平移变换
     *
     * @param   x       X轴方向平移
     * @param   y       Y辆方向平移
     */
    translate(x: number, y: number): void {
        this.engine.translate(x, y);
    } // Function translate()

    /**
     * 缩放
     *
     * @param   x       X轴方向缩放
     * @param   y       Y辆方向缩放
     */
    scale(x: number, y: number): void {
        this.engine.scale(x, y);
    } // Function scale()

    /**
     * 旋转
     *
     * @param   angle   旋转角度(单位弧度)
     */
    rotate(angle: number): void {
        this.engine.rotate(angle);
    } // Function rotate()

    /**
     * 将当前的变形矩阵乘上一个基于自身参数的矩阵
     *
     * @param   m11     水平方向的缩放
     * @param   m12     水平方向的倾斜偏移
     * @param   m21     竖直方向的倾斜偏移
     * @param   m22     竖直方向的缩放
     * @param   dx      水平方向的移动
     * @param   dy      竖直方向的移动
     */
    transform(
        m11: number,
        m12: number,
        m21: number,
        m22: number,
        dx: number,
        dy: number
    ): void {
        this.engine.transform(m11, m12, m21, m22, dx, dy);
    } // Function transform()

    /**
     * 将当前的变形矩阵重置为单位矩阵，再将当前的变形矩阵乘上一个基于自身参数的矩阵
     *
     * @param   m11     水平方向的缩放
     * @param   m12     水平方向的倾斜偏移
     * @param   m21     竖直方向的倾斜偏移
     * @param   m22     竖直方向的缩放
     * @param   dx      水平方向的移动
     * @param   dy      竖直方向的移动
     */
    setTransform(
        m11: number,
        m12: number,
        m21: number,
        m22: number,
        dx: number,
        dy: number
    ): void {
        this.engine.setTransform(m11, m12, m21, m22, dx, dy);
    } // Function transform()

    /**
     * 重置当前变形为单位矩阵。等价于调用setTransform(1, 0, 0, 1, 0, 0)
     */
    resetTransform(): void {
        this.engine.resetTransform();
    } // Function resetTransform()

    // =================================================================================================================
    // 绘制相关
    /**
     * 设置裁剪路径
     *
     * @param   path        裁剪路径
     */
    setClip(path: Path2D): void {
        this.engine.setClip(path);
    } // Function setClip()

    /**
     * 清空矩形区域
     *
     * @param   rect        矩形
     */
    clearRect(rect: SRect): void;

    /**
     * 清空矩形区域
     *
     * @param   leftTop         左上角坐标
     * @param   rightBottom     右下角坐标
     */
    clearRect(leftTop: SPoint, rightBottom: SPoint): void;

    /**
     * 清空矩形区域
     *
     * @param   leftTop     左上角坐标
     * @param   size        大小
     */
    clearRect(leftTop: SPoint, size: SSize): void;

    /**
     * 清空矩形区域
     *
     * @param   x       X坐标
     * @param   y       Y坐标
     * @param   w       宽度
     * @param   h       高度
     */
    clearRect(x: number, y: number, w: number, h: number): void;

    /**
     * 清空矩形区域(重载实现)
     *
     * @param   x       X坐标 | 左上角坐标 | 矩形
     * @param   y       Y坐标 | 右下角坐标 | 大小
     * @param   w       宽度
     * @param   h       高度
     */
    clearRect(
        x: number | SPoint | SRect,
        y?: number | SPoint | SSize,
        w?: number,
        h?: number
    ): void {
        if (x instanceof SRect) {
            this.engine.clearRect(x);
        } else if (x instanceof SPoint && y instanceof SPoint) {
            this.engine.clearRect(new SRect(x, y));
        } else if (x instanceof SPoint && y instanceof SSize) {
            this.engine.clearRect(new SRect(x, y));
        } else {
            this.engine.clearRect(
                new SRect(x as number, y as number, w as number, h as number)
            );
        }
    } // Function clearRect()

    /**
     * 绘制矩形
     *
     * @param   rect        矩形
     */
    drawRect(rect: SRect): void;

    /**
     * 绘制矩形
     *
     * @param   leftTop         左上角坐标
     * @param   rightBottom     右下角坐标
     */
    drawRect(leftTop: SPoint, rightBottom: SPoint): void;

    /**
     * 绘制矩形
     *
     * @param   leftTop     左上角坐标
     * @param   size        大小
     */
    drawRect(leftTop: SPoint, size: SSize): void;

    /**
     * 绘制矩形
     *
     * @param   x       X坐标
     * @param   y       Y坐标
     * @param   w       宽度
     * @param   h       高度
     */
    drawRect(x: number, y: number, w: number, h: number): void;

    /**
     * 绘制矩形
     *
     * @param   x       X坐标 | 左上角坐标 | 矩形
     * @param   y       Y坐标 | 右下角坐标 | 大小
     * @param   w       宽度
     * @param   h       高度
     */
    drawRect(
        x: number | SPoint | SRect,
        y?: number | SPoint | SSize,
        w?: number,
        h?: number
    ): void {
        if (x instanceof SRect) {
            this.engine.drawRect(x);
        } else if (x instanceof SPoint && y instanceof SPoint) {
            this.engine.drawRect(new SRect(x, y));
        } else if (x instanceof SPoint && y instanceof SSize) {
            this.engine.drawRect(new SRect(x, y));
        } else {
            this.engine.drawRect(
                new SRect(x as number, y as number, w as number, h as number)
            );
        }
    } // Function drawRect()

    // /**
    //  * 绘制带导角空心矩形
    //  *
    //  * @param   x           X坐标
    //  * @param   y           Y坐标
    //  * @param   w           宽度
    //  * @param   h           高度
    //  * @param   r           导角半径
    //  */
    // drawRoundedRect(
    //     x: number,
    //     y: number,
    //     w: number,
    //     h: number,
    //     r: number
    // ): void {} // Function drawRoundedRect()

    /**
     * 绘制圆形
     *
     * @param   cx          圆心X坐标
     * @param   cy          圆心X坐标
     * @param   r           圆半径
     */
    drawCircle(cx: number, cy: number, r: number): void {
        this.engine.drawCircle(cx, cy, r);
    } // Function drawCircle()

    /**
     * 绘制椭圆
     *
     * @param   cx          圆点X坐标
     * @param   cy          圆点Y坐标
     * @param   rx          水平半径
     * @param   ry          垂直半径
     */
    drawEllipse(cx: number, cy: number, rx: number, ry: number): void {
        this.engine.drawEllipse(cx, cy, rx, ry);
    } // Function drawEllipse()

    /**
     * 绘制椭圆弧
     *
     * @param   rect            椭圆所在矩形
     * @param   startAngle      开始角度(单位弧度)
     * @param   endAngle        结束角度(单位弧度)
     */
    drawArc(rect: SRect, startAngle: number, endAngle: number): void;

    /**
     * 绘制椭圆弧
     *
     * @param   x               椭圆所在矩形X坐标
     * @param   y               椭圆所在矩形Y坐标
     * @param   width           椭圆所在矩形宽度
     * @param   height          椭圆所在矩形高度
     * @param   startAngle      开始角度(单位弧度)
     * @param   endAngle        结束角度(单位弧度)
     */
    drawArc(
        x: number,
        y: number,
        width: number,
        height: number,
        startAngle: number,
        endAngle: number
    ): void;

    /**
     * 绘制椭圆弧（重载实现）
     *
     * @param   x               椭圆所在矩形X坐标
     * @param   y               椭圆所在矩形Y坐标
     * @param   width           椭圆所在矩形宽度
     * @param   height          椭圆所在矩形高度
     * @param   startAngle      开始角度(单位弧度)
     * @param   endAngle        结束角度(单位弧度)
     */
    drawArc(
        x: SRect | number,
        y: number,
        width: number,
        height?: number,
        startAngle?: number,
        endAngle?: number
    ): void {
        if (x instanceof SRect) {
            this.engine.drawArc(x.x, x.y, x.width, x.height, y, width);
        } else {
            this.engine.drawArc(
                x,
                y,
                width,
                height as number,
                startAngle as number,
                endAngle as number
            );
        }
    } // Function drawArc()

    /**
     * 绘制椭圆弦弧
     *
     * @param   rect            椭圆所在矩形
     * @param   startAngle      开始角度(单位弧度)
     * @param   endAngle        结束角度(单位弧度)
     */
    drawChord(rect: SRect, startAngle: number, endAngle: number): void;

    /**
     * 绘制椭圆弦弧
     *
     * @param   x               椭圆所在矩形X坐标
     * @param   y               椭圆所在矩形Y坐标
     * @param   width           椭圆所在矩形宽度
     * @param   height          椭圆所在矩形高度
     * @param   startAngle      开始角度(单位弧度)
     * @param   endAngle        结束角度(单位弧度)
     */
    drawChord(
        x: number,
        y: number,
        width: number,
        height: number,
        startAngle: number,
        endAngle: number
    ): void;

    /**
     * 绘制椭圆弦弧（重载实现）
     *
     * @param   x               椭圆所在矩形X坐标
     * @param   y               椭圆所在矩形Y坐标
     * @param   width           椭圆所在矩形宽度
     * @param   height          椭圆所在矩形高度
     * @param   startAngle      开始角度(单位弧度)
     * @param   endAngle        结束角度(单位弧度)
     */
    drawChord(
        x: SRect | number,
        y: number,
        width: number,
        height?: number,
        startAngle?: number,
        endAngle?: number
    ): void {
        if (x instanceof SRect) {
            this.engine.drawChord(x.x, x.y, x.width, x.height, y, width);
        } else {
            this.engine.drawChord(
                x,
                y,
                width,
                height as number,
                startAngle as number,
                endAngle as number
            );
        }
    } // Function drawChord()

    /**
     * 绘制椭圆饼
     *
     * @param   rect            椭圆所在矩形
     * @param   startAngle      开始角度(单位弧度)
     * @param   endAngle        结束角度(单位弧度)
     */
    drawPie(rect: SRect, startAngle: number, endAngle: number): void;

    /**
     * 绘制椭圆饼
     *
     * @param   x               椭圆所在矩形X坐标
     * @param   y               椭圆所在矩形Y坐标
     * @param   width           椭圆所在矩形宽度
     * @param   height          椭圆所在矩形高度
     * @param   startAngle      开始角度(单位弧度)
     * @param   endAngle        结束角度(单位弧度)
     */
    drawPie(
        x: number,
        y: number,
        width: number,
        height: number,
        startAngle: number,
        endAngle: number
    ): void;

    /**
     * 绘制椭圆饼
     *
     * @param   x               椭圆所在矩形X坐标
     * @param   y               椭圆所在矩形Y坐标
     * @param   width           椭圆所在矩形宽度
     * @param   height          椭圆所在矩形高度
     * @param   startAngle      开始角度(单位弧度)
     * @param   endAngle        结束角度(单位弧度)
     */
    drawPie(
        x: SRect | number,
        y: number,
        width: number,
        height?: number,
        startAngle?: number,
        endAngle?: number
    ): void {
        if (x instanceof SRect) {
            this.engine.drawPie(x.x, x.y, x.width, x.height, y, width);
        } else {
            this.engine.drawPie(
                x,
                y,
                width,
                height as number,
                startAngle as number,
                endAngle as number
            );
        }
    } // Function drawPie()

    /**
     * 绘制一条线段
     *
     * @param   line    线段
     */
    drawLine(line: SLine): void;

    /**
     * 绘制一条线段
     *
     * @param   p1      启点坐标
     * @param   p2      终点坐标
     */
    drawLine(p1: SPoint, p2: SPoint): void;

    /**
     * 绘制一条线段
     *
     * @param   x1      启点X坐标
     * @param   y1      启点Y坐标
     * @param   x2      终点X坐标
     * @param   y2      终点Y坐标
     */
    drawLine(x1: number, y1: number, x2: number, y2: number): void;

    /**
     * 绘制一条线段（重载实现）
     *
     * @param   x1      启点X坐标 | 起点1坐标 | 线段 |
     * @param   y1      启点Y坐标 | 终点坐标
     * @param   x2      终点X坐标
     * @param   y2      终点Y坐标
     */
    drawLine(
        x1: number | SPoint | SLine,
        y1?: number | SPoint,
        x2?: number,
        y2?: number
    ): void {
        if (x1 instanceof SLine) {
            this.engine.drawLine(x1);
        } else if (x1 instanceof SPoint && y1 instanceof SPoint) {
            this.engine.drawLine(new SLine(x1, y1));
        } else {
            this.engine.drawLine(
                new SLine(
                    x1 as number,
                    y1 as number,
                    x2 as number,
                    y2 as number
                )
            );
        }
    } // Function drawLine()

    /**
     * 绘制折线
     *
     * @param   points      折线折点
     */
    drawPolyline(points: SPoint[]): void {
        this.engine.drawPolyline(points);
    } // Function drawPolyline()

    /**
     * 绘制多边形
     *
     * @param   points      多边形顶点
     */
    drawPolygon(points: SPoint[]): void {
        this.engine.drawPolygon(points);
    } // Functin drawPolygon()

    /**
     * 绘制路径
     *
     * @param   path        路径
     */
    drawPath(path: SPath2D): void {
        this.engine.drawPath(path);
    } // Function drawPath()

    /**
     * 绘制文本
     *
     * @param   text        文本内容
     * @param   x           X坐标
     * @param   y           Y坐标
     * @param   maxWidth    最大宽度
     */
    drawText(text: string, x: number, y: number, maxWidth?: number): void {
        this.engine.drawText(text, x, y, maxWidth);
    } // Function drawText()

    /**
     * 绘制图片
     *
     * @param img       图片
     * @param x         X坐标
     * @param y         Y坐标
     * @param width     宽度
     * @param height    高度
     */
    drawImage(
        img: CanvasImageSource,
        x: number,
        y: number,
        width?: number,
        height?: number
    ): void {
        this.engine.drawImage(img, x, y, width, height);
    } // Function drawImage()

    /**
     * painter转实现view象素
     *
     * @param   p       绘制坐标
     */
    toPx(p: number): number {
        return p / this.engine.state.matrix.a;
    } // Function painterToView()

    /**
     * 绘制带箭头的线段
     *
     * @param   line    线段
     * @param   style   末端样式
     */
    drawArrowLine(line: SLine, style?: SArrow): void;

    /**
     * 绘制带箭头的线段
     *
     * @param   p1      启点坐标
     * @param   p2      终点坐标
     * @param   style   末端样式
     */
    drawArrowLine(p1: SPoint, p2: SPoint, style?: SArrow): void;

    /**
     * 绘制带箭头的线段
     *
     * @param   x1      启点X坐标
     * @param   y1      启点Y坐标
     * @param   x2      终点X坐标
     * @param   y2      终点Y坐标
     * @param   style   末端样式
     */
    drawArrowLine(
        x1: number,
        y1: number,
        x2: number,
        y2: number,
        style?: SArrow
    ): void;

    /**
     * 绘制带箭头的线段
     *
     * @param   x1  启点X坐标
     * @param   y1  启点Y坐标
     * @param   x2  终点X坐标
     * @param   y2  终点Y坐标
     * @param   st  线段两端样式
     */
    drawArrowLine(
        x1: number | SPoint | SLine,
        y1?: number | SPoint | SArrow,
        x2?: number | SArrow,
        y2?: number,
        st?: SArrow
    ): void {
        let line: SLine, style: SArrow;
        if (x1 instanceof SLine) {
            line = x1;
            style = y1 as SArrow;
        } else if (x1 instanceof SPoint && y1 instanceof SPoint) {
            line = new SLine(x1, y1);
            style = x2 as SArrow;
        } else {
            line = new SLine(
                x1 as number,
                y1 as number,
                x2 as number,
                y2 as number
            );
            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) {
                    this.drawTriangleArrow(line, false);
                } else if (style.begin == SArrowStyleType.Diamond) {
                    this.drawDiamondArrow(line, false);
                } else if (style.begin == SArrowStyleType.Square) {
                    this.drawSquareArrow(line, false);
                } 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) {
                    this.drawTriangleArrow(line, true);
                } else if (style.end == SArrowStyleType.Diamond) {
                    this.drawDiamondArrow(line, true);
                } else if (style.end == SArrowStyleType.Square) {
                    this.drawSquareArrow(line, true);
                } else if (style.end == SArrowStyleType.Circle) {
                    this.drawCircleArrow(line, true);
                }
            }
        }
    } // Function drawArrowLine()

    /**
     * 私有计算方法-绘制线段末端标准箭头
     *
     * @param   line    要加末端样式的线段
     * @param   isEnd   是否为结束位置
     * */
    private drawBasicArrow(line: SLine, isEnd: boolean = true): void {
        // 定义箭头长度
        const d = 5;
        // 箭头横坐标
        const x1 = d * Math.cos(Math.PI / 4);
        // 箭头纵坐标
        const y1 = d * Math.sin(Math.PI / 4);
        // 线段与x轴夹角
        const fo = Math.atan(line.dy / line.dx);
        const ang = line.dx >= 0 ? fo : fo + Math.PI;
        // 是否为终点画箭头
        if (isEnd) {
            this.save();
            this.translate(line.x2, line.y2);
            this.rotate(ang);
            this.engine.drawPolyline([
                new SPoint(-x1, y1),
                new SPoint(0, 0),
                new SPoint(-x1, -y1)
            ]);
            this.restore();
        } else {
            this.save();
            this.translate(line.x1, line.y1);
            this.rotate(ang);
            this.engine.drawPolyline([
                new SPoint(x1, y1),
                new SPoint(0, 0),
                new SPoint(x1, -y1)
            ]);
            this.restore();
        }
    } // Function drawArrow()

    /**
     * 私有计算方法-绘制线段末端三角形箭头
     *
     * @param   line    要加末端样式的线段
     * @param   isEnd   是否为结束位置
     * */
    private drawTriangleArrow(line: SLine, isEnd: boolean = true): void {
        // 定义箭头长度
        const d = 5;
        // 箭头横坐标
        const x1 = d * Math.cos(Math.PI / 12);
        // 箭头纵坐标
        const y1 = d * Math.sin(Math.PI / 12);
        // 线段与x轴夹角
        const fo = Math.atan(line.dy / line.dx);
        const ang = line.dx >= 0 ? fo : fo + Math.PI;
        // 是否为终点画箭头
        if (isEnd) {
            this.save();
            this.translate(line.x2, line.y2);
            this.rotate(ang);
            this.engine.drawPolygon([
                new SPoint(-x1, y1),
                new SPoint(0, 0),
                new SPoint(-x1, -y1)
            ]);
            this.restore();
        } else {
            this.save();
            this.translate(line.x1, line.y1);
            this.rotate(ang);
            this.engine.drawPolygon([
                new SPoint(x1, y1),
                new SPoint(0, 0),
                new SPoint(x1, -y1)
            ]);
            this.restore();
        }
    } // Function drawTriangleArrow()

    /**
     * 私有计算方法-绘制线段末端菱形箭头
     *
     * @param   line    要加末端样式的线段
     * @param   isEnd   是否为结束位置
     * */
    private drawDiamondArrow(line: SLine, isEnd: boolean = true): void {
        // 定义箭头长度
        const d = 5;
        // 箭头横坐标
        const x1 = d * Math.cos(Math.PI / 4);
        // 箭头纵坐标
        const y1 = d * Math.sin(Math.PI / 4);
        // 线段与x轴夹角
        const fo = Math.atan(line.dy / line.dx);
        const ang = line.dx >= 0 ? fo : fo + Math.PI;
        // 是否为终点画箭头
        if (isEnd) {
            this.save();
            this.translate(line.x2, line.y2);
            this.rotate(ang);
            this.engine.drawPolygon([
                new SPoint(-x1, y1),
                new SPoint(0, 0),
                new SPoint(-x1, -y1),
                new SPoint(-Math.sqrt(2) * d, 0)
            ]);
            this.restore();
        } else {
            this.save();
            this.translate(line.x1, line.y1);
            this.rotate(ang);
            this.engine.drawPolygon([
                new SPoint(x1, y1),
                new SPoint(0, 0),
                new SPoint(x1, -y1),
                new SPoint(Math.sqrt(2) * d, 0)
            ]);
            this.restore();
        }
    } // Function drawDiamondArrow()

    /**
     * 私有计算方法-绘制线段末端方形箭头
     *
     * @param   line    要加末端样式的线段
     * @param   isEnd   是否为结束位置
     * */
    private drawSquareArrow(line: SLine, isEnd: boolean = true): void {
        // 定义箭头长度
        const d = 5;
        // 线段与x轴夹角
        const fo = Math.atan(line.dy / line.dx);
        const ang = line.dx >= 0 ? fo : fo + Math.PI;
        // 是否为终点画箭头
        if (isEnd) {
            this.save();
            this.translate(line.x2, line.y2);
            this.rotate(ang);
            this.engine.drawPolygon([
                new SPoint(-d, d / 2),
                new SPoint(0, d / 2),
                new SPoint(0, -d / 2),
                new SPoint(-d, -d / 2)
            ]);
            this.restore();
        } else {
            this.save();
            this.translate(line.x1, line.y1);
            this.rotate(ang);
            this.engine.drawPolygon([
                new SPoint(0, d / 2),
                new SPoint(d, d / 2),
                new SPoint(d, -d / 2),
                new SPoint(0, -d / 2)
            ]);
            this.restore();
        }
    } // Function drawSquareArrow()

    /**
     * 私有计算方法-绘制线段末端圆形箭头
     *
     * @param   line    要加末端样式的线段
     * @param   isEnd   是否为结束位置
     * */
    private drawCircleArrow(line: SLine, isEnd: boolean = true): void {
        // 定义箭头长度
        const d = 5;
        // 线段与x轴夹角
        const fo = Math.atan(line.dy / line.dx);
        const ang = line.dx >= 0 ? fo : fo + Math.PI;
        // 是否为终点画箭头
        if (isEnd) {
            this.save();
            this.translate(line.x2, line.y2);
            this.rotate(ang);
            this.engine.drawCircle(-d / 2, 0, d / 2);
            this.restore();
        } else {
            this.save();
            this.translate(line.x1, line.y1);
            this.rotate(ang);
            this.engine.drawCircle(d / 2, 0, d / 2);
            this.restore();
        }
    } // Function drawCircleArrow()
} // Class SPainter