<template>
    <canvas height="250" id="circle" width="740"/>
</template>

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

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

    /**
     * Item 绘制操作
     * @param painter   绘制对象
     */
    onDraw(canvas: SPainter): void {
        canvas.clearRect(new SRect(0, 0, 800, 400));

        canvas.pen.color = SColor.Blue;
        canvas.brush.color = SColor.Red;
        canvas.drawCircle(100, 100, 50);

        canvas.pen.lineWidth = 10;
        canvas.pen.lineDash = [10, 11];
        canvas.pen.lineCapStyle = SLineCapStyle.Butt;
        canvas.pen.color = new SColor("#585858");
        canvas.brush.color = new SColor("#585858");

        canvas.pen.dashOffset = new Date().getTime() / 50 % 60;
        canvas.drawCircle(230, 100, 40);

        canvas.pen.dashOffset = -new Date().getTime() / 50 % 60;
        canvas.drawCircle(315, 100, 40);

        canvas.pen.color = SColor.Transparent;
        canvas.brush.color = SColor.White;
        canvas.drawCircle(230, 100, 15);
        canvas.drawCircle(315, 100, 15);

        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(
                450 + 50 * Math.cos(q1),
                100 + 50 * Math.sin(q1),
                450 + 50 * Math.cos(q2),
                100 + 50 * Math.sin(q2));
        }

        canvas.pen.color = SColor.Blue;
        for (let i = 0; i < 360; i += 10) {
            let q = i * Math.PI / 180;
            canvas.drawLine(
                650,
                100,
                650 + 50 * Math.cos(q),
                100 + 50 * Math.sin(q));
        }

        this.update();
    }
}

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

<style scoped>

</style>
