export class BoxDrawer{

    private canvas: any = null;
    private canvasContext: any = null;

    private readonly weight: number = null;
    private readonly height: number = null;
    private readonly paddingLeft: number = 10;
    private readonly paddingRight: number = 10;
    private readonly paddingTop: number = 5;
    private readonly paddingBottom: number = 5;
    private readonly scaleLine: number = 4;

    constructor(weight: number, height: number) {
        this.weight = weight;
        this.height = height;

        this.init();
        // this.drawCoordinate();
        console.log(this.canvas.toDataURL());
    }

    private init(): void{
        // 创建画布
        this.canvas = document.createElement('canvas');
        this.canvas.weight = this.weight;
        this.canvas.height = this.height;

        this.canvasContext = this.canvas.getContext('2d');
    }

    private drawCoordinate(): void{
        this.drawBorder();
    }

    private drawBorder(): void{
        const x = this.scaleLine + this.paddingLeft;
        const y = this.scaleLine + this.paddingTop;
        const _x = this.weight - this.scaleLine - this.paddingRight;
        const _y = this.height - this.scaleLine - this.paddingBottom;
        this.canvasContext.beginPath();
        this.canvasContext.lineWidth="6";
        this.canvasContext.strokeStyle="red";
        this.canvasContext.rect(x, y, _x - x, _y - y);
        this.canvasContext.stroke();
    }
}