<template>
    <canvas height="100" id="drawPolyline1" width="800"/>
</template>

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

/**
 * 绘制折线
 *
 * @author 郝洁 <haojie@persagy.com>
 */
class TestView extends SCanvasView {
    /** 绘制数组 */
    arr: SPoint[] = [new SPoint(10, 10), new SPoint(10, 40), new SPoint(30, 30)];

    /**
     * 构造函数
     */
    constructor() {
        super("drawPolyline1")
    }

    /**
     * Item 绘制操作
     * @param canvas   绘制对象
     */
    onDraw(canvas: SPainter): void {
        // 绘制折线
        canvas.drawPolyline(this.arr);
    }
}

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