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