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