<template>
    <canvas id="drawRect1" width="800" height="180"/>
</template>

<script lang="ts">
import { SCanvasView, SColor, SPainter, SPoint, SRect, SSize } from "@persagy-web/draw/lib";
import { Component, Vue } from "vue-property-decorator";

/**
 * 绘制矩形
 *
 * @author 郝洁 <haojie@persagy.com>
 */
class TestView extends SCanvasView {
    /**
     * 构造函数
     */
    constructor() {
        super("drawRect1")
    }

    /**
     * Item 绘制操作
     * @param canvas   绘制对象
     */
    onDraw(canvas: SPainter): void {
        // 清除画布
        canvas.clearRect(0, 0, 800, 200);
        // 绘制操作相关命令
        canvas.pen.color = SColor.Blue;
        canvas.brush.color = SColor.Red;
        // 绘制矩形
        canvas.drawRect(10, 10, 80, 80);

        canvas.pen.color = SColor.Transparent;
        canvas.brush.color = SColor.Red;
        //绘制矩形
        canvas.drawRect(new SPoint(110, 10), new SSize(80, 80));

        canvas.pen.color = SColor.Blue;
        canvas.brush.color = SColor.Transparent;
        // 绘制矩形
        canvas.drawRect(new SRect(210, 10, 80, 80));

        canvas.pen.lineWidth = 1;
        canvas.pen.color = SColor.Blue;
        canvas.brush.color = SColor.Transparent;
        // 长度为 360 ,以10递增绘制矩形
        for (let i = 1; i < 100; i += 10) {
            //绘制矩形
            canvas.drawRect(310 + i, i, 80, 80);
        }

        canvas.pen.lineWidth = 2;
        canvas.pen.color = SColor.Blue;
        canvas.brush.color = SColor.Red;
        let k = new Date().getTime() / 100 % 10;
        // 长度随机 ,以10递增绘制矩形
        for (let i = 1; i < k * 10; i += 10) {
            canvas.drawRect(510 + i, i, 80, 80);
        }

        this.update();
    }
}

@Component
export default class DrawRect1 extends Vue {
    /**
     * 页面挂载
     */
    mounted(): void {
        new TestView();
    }
}
</script>