<template> <canvas id="drawRect1" width="800" height="180"/> </template> <script lang="ts"> import { SCanvasView, SColor, SPainter, SPoint, SRect, SSize } from "@persagy-web/draw/lib"; import { Component, Vue } from "vue-property-decorator"; /** * 绘制矩形 * * @author 郝洁 <haojie@persagy.com> */ class TestView extends SCanvasView { /** * 构造函数 */ constructor() { super("drawRect1") } /** * Item 绘制操作 * @param canvas 绘制对象 */ onDraw(canvas: SPainter): void { // 清除画布 canvas.clearRect(0, 0, 800, 200); // 绘制操作相关命令 canvas.pen.color = SColor.Blue; canvas.brush.color = SColor.Red; // 绘制矩形 canvas.drawRect(10, 10, 80, 80); canvas.pen.color = SColor.Transparent; canvas.brush.color = SColor.Red; //绘制矩形 canvas.drawRect(new SPoint(110, 10), new SSize(80, 80)); canvas.pen.color = SColor.Blue; canvas.brush.color = SColor.Transparent; // 绘制矩形 canvas.drawRect(new SRect(210, 10, 80, 80)); canvas.pen.lineWidth = 1; canvas.pen.color = SColor.Blue; canvas.brush.color = SColor.Transparent; // 长度为 360 ,以10递增绘制矩形 for (let i = 1; i < 100; i += 10) { //绘制矩形 canvas.drawRect(310 + i, i, 80, 80); } canvas.pen.lineWidth = 2; canvas.pen.color = SColor.Blue; canvas.brush.color = SColor.Red; let k = new Date().getTime() / 100 % 10; // 长度随机 ,以10递增绘制矩形 for (let i = 1; i < k * 10; i += 10) { canvas.drawRect(510 + i, i, 80, 80); } this.update(); } } @Component export default class DrawRect1 extends Vue { /** * 页面挂载 */ mounted(): void { new TestView(); } } </script>