DrawRect1.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <canvas id="drawRect1" width="800" height="180" />
  3. </template>
  4. <script lang="ts">
  5. import { SCanvasView, SColor, SPainter, SPoint, SRect, SSize } from "@saga-web/draw/lib";
  6. class TestView extends SCanvasView {
  7. constructor() {
  8. super("drawRect1")
  9. }
  10. onDraw(canvas: SPainter): void {
  11. canvas.clearRect(0,0,800,200);
  12. canvas.pen.color = SColor.Blue;
  13. canvas.brush.color = SColor.Red;
  14. canvas.drawRect(10, 10, 80, 80);
  15. canvas.pen.color = SColor.Transparent;
  16. canvas.brush.color = SColor.Red;
  17. canvas.drawRect(new SPoint(110, 10), new SSize(80, 80));
  18. canvas.pen.color = SColor.Blue;
  19. canvas.brush.color = SColor.Transparent;
  20. canvas.drawRect(new SRect(210, 10, 80, 80));
  21. canvas.pen.lineWidth = 1;
  22. canvas.pen.color = SColor.Blue;
  23. canvas.brush.color = SColor.Transparent;
  24. for (let i = 1; i < 100; i += 10) {
  25. canvas.drawRect(310 + i, i, 80, 80);
  26. }
  27. canvas.pen.lineWidth = 2;
  28. canvas.pen.color = SColor.Blue;
  29. canvas.brush.color = SColor.Red;
  30. let k = new Date().getTime()/100%10;
  31. for (let i = 1; i < k*10; i += 10) {
  32. canvas.drawRect(510 + i, i, 80, 80);
  33. }
  34. this.update();
  35. }
  36. }
  37. export default {
  38. mounted() {
  39. new TestView();
  40. }
  41. }
  42. </script>