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

<template>
    <canvas id="drawLine1" width="800" height="100"/>
</template>

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

    class TestView extends SCanvasView {
        /**
         * 构造函数
         */
        constructor() {
            super("drawLine1")
        }

        /**
         * Item 绘制操作
         * @param canvas 绘制对象
         */
        onDraw(canvas: SPainter): void {
            // 清除画布
            canvas.clearRect(0, 0, 800, 100);

            // 在此编写绘制操作相关命令
            canvas.drawLine(0, 0, 100, 100);
            canvas.pen.lineWidth = 1;
            canvas.pen.color = SColor.Blue;

            for (let i = 0; i < 360; i += 10) {
                let q = i * Math.PI / 180;
                // 绘制一条线段
                canvas.drawLine(
                    200,
                    50,
                    200 + 50 * Math.cos(q),
                    50 + 50 * Math.sin(q));
            }

            canvas.pen.color = SColor.Red;

            for (let i = 0; i < 360; i += 10) {
                let q1 = i * Math.PI / 180;
                let q2 = (i + 120) * Math.PI / 180;
                canvas.drawLine(
                    350 + 50 * Math.cos(q1),
                    50 + 50 * Math.sin(q1),
                    350 + 50 * Math.cos(q2),
                    50 + 50 * Math.sin(q2));
            }

            canvas.pen.color = new SColor('#03a9f4');
            canvas.pen.lineWidth = 5;
            canvas.drawLine(450, 50, 700, 50);
            canvas.pen.lineWidth = 3;
            canvas.pen.dashOffset = new Date().getTime() / 50 % 80;
            canvas.pen.lineDash = [30, 50];
            canvas.pen.color = SColor.White;
            canvas.drawLine(450, 50, 700, 50);
            this.update();
        }
    }


    @Component
    export default class DrawLine1 extends Vue {
        mounted(): void {
            new TestView();
        }
    }
</script>