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

/**
 * 绘制路径
 *
 * @author 郝洁 <haojie@persagy.com>
 */
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}]);
    }

    /**
     * Item 绘制操作
     * @param painter   绘制对象
     */
    onDraw(painter: SPainter) {
        //绘制路径
        painter.drawPath(this.path)
    }
}

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

<style scoped>

</style>