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

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

    class TestView extends SCanvasView {

        constructor() {
            super("circle")
        }

        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>