DrawRect1.vue 1.6 KB

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