persagy-web-doc/docs/.vuepress/components/engine/shape/DrawRect1.vue

<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";

    class TestView extends SCanvasView {

        constructor() {
            super("drawRect1")
        }

        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;
            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;
            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>