12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <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, Prop, Vue } from "vue-property-decorator";
- class TestView extends SCanvasView {
- constructor() {
- super("drawRect1")
- }
- 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>
|