<template>
    <canvas id="drawLine2" 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("drawLine2")
    }

    /**
     * Item 绘制操作
     * @param canvas   绘制对象
     */
    onDraw(canvas: SPainter): void {
        // 在此编写绘制操作相关命令
        canvas.drawLine(0, 0, 100, 100);
        canvas.pen.lineWidth = 1;
        canvas.pen.color = SColor.Blue;
        // 长度为 360 ,以10递增绘制一条线段
        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;
        // 长度为 360 ,以10递增绘制一条线段
        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));
        }
    }
}

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