|
@@ -0,0 +1,48 @@
|
|
|
+<template>
|
|
|
+ <canvas id="drawRect1" width="800" height="180" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+ import { SCanvasView, SColor, SPainter, SPoint, SRect, SSize } from "@saga-web/draw/lib";
|
|
|
+
|
|
|
+ class TestView extends SCanvasView {
|
|
|
+
|
|
|
+ constructor() {
|
|
|
+ super("drawRect1")
|
|
|
+ }
|
|
|
+
|
|
|
+ onDraw(canvas: SPainter): void {
|
|
|
+ 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;
|
|
|
+ for (let i = 1; i < 100; i += 10) {
|
|
|
+ canvas.drawRect(510 + i, i, 80, 80);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ export default {
|
|
|
+ mounted() {
|
|
|
+ new TestView();
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|