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