sagacloud-web/saga-web-draw/src/engines/SPaintEngine.ts

import { SLine, SPaintEngineType, SPath2D, SPoint, SRect } from "..";
import { SPaintState } from "./SPaintState";

/**
 * 绘制引擎基类
 *
 * @author  庞利祥(sybotan@126.com)
 */
export abstract class SPaintEngine {
    /** 当关状态 */
    private _state = new SPaintState();
    get state(): SPaintState {
        return this._state;
    } // Function state()
    set state(value: SPaintState) {
        this._state = value;
    } // Function state()

    /** 状态栈 */
    private stateStack = new Array<SPaintState>();

    /** 绘制引擎类型 */
    abstract get type(): SPaintEngineType;

    /**
     * 保存painter状态
     */
    save(): void {
        let state = new SPaintState(this.state);
        this.stateStack.push(state);
    } // Function save()

    /**
     * 恢复painter状态
     */
    restore(): void {
        if (this.stateStack.length > 0) {
            this.state = this.stateStack.pop() as SPaintState;
        }
    } // Function restore()

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

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

    /**
     * 旋转
     *
     * @param   angle   旋转角度(单位弧度)
     */
    rotate(angle: number): void {
        this.state.matrix.rotateSelf(0, 0, 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 {} // 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 {} // Function transform()

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

    // =================================================================================================================
    // 绘制图形
    /**
     * 设置裁剪路径
     *
     * @param   path        裁剪路径
     */
    abstract setClip(path: Path2D): void;

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

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

    /**
     * 绘制圆形
     *
     * @param   cx          圆心X坐标
     * @param   cy          圆心X坐标
     * @param   r           圆半径
     */
    abstract drawCircle(cx: number, cy: number, r: number): void;

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

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

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

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

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

    /**
     * 绘制折线
     *
     * @param   points      折线折点
     */
    abstract drawPolyline(points: SPoint[]): void;

    /**
     * 绘制多边形
     *
     * @param   points      多边形顶点
     */
    abstract drawPolygon(points: SPoint[]): void;

    /**
     * 绘制路径
     *
     * @param   path        路径
     */
    abstract drawPath(path: SPath2D): void;

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

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

    /**
     * 预测量文本宽度
     *
     * @param   text    预测的文本
     * */
    abstract textWidth(text: string): number;
} // class SPaintEngine