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

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

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

    class TestView222 extends SCanvasView {
        path: SPath;

        constructor() {
            super('pathCanvas');
            this.path = new SPath();
            // @ts-ignore
            this.path.polygon([{x: 700, y: 150}, {x: 0, y: 150}, {x: 0, y: 0}]);
            // @ts-ignore
            this.path.polygon([{x: 100, y: 100}, {x: 100, y: 200}, {x: 200, y: 200}]);
            // this.path.polygon([{x:0,y:0},{x:0,y:150},{x:700,y:150}]);
            // this.path.polygon([{x:200,y:200},{x:100,y:200},{x:100,y:100}]);
        }

        onDraw(painter: SPainter) {
            //绘制路径
            painter.drawPath(this.path)
        }
    }

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

<style scoped>

</style>