1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <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.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();
- }
- }
- export default {
- mounted() {
- new TestView();
- }
- }
- </script>
|