DrawRect1.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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, Vue } from "vue-property-decorator";
  7. /**
  8. * 绘制矩形
  9. *
  10. * @author 郝洁 <haojie@persagy.com>
  11. */
  12. class TestView extends SCanvasView {
  13. /**
  14. * 构造函数
  15. */
  16. constructor() {
  17. super("drawRect1")
  18. }
  19. /**
  20. * Item 绘制操作
  21. * @param canvas 绘制对象
  22. */
  23. onDraw(canvas: SPainter): void {
  24. // 清除画布
  25. canvas.clearRect(0, 0, 800, 200);
  26. // 绘制操作相关命令
  27. canvas.pen.color = SColor.Blue;
  28. canvas.brush.color = SColor.Red;
  29. // 绘制矩形
  30. canvas.drawRect(10, 10, 80, 80);
  31. canvas.pen.color = SColor.Transparent;
  32. canvas.brush.color = SColor.Red;
  33. //绘制矩形
  34. canvas.drawRect(new SPoint(110, 10), new SSize(80, 80));
  35. canvas.pen.color = SColor.Blue;
  36. canvas.brush.color = SColor.Transparent;
  37. // 绘制矩形
  38. canvas.drawRect(new SRect(210, 10, 80, 80));
  39. canvas.pen.lineWidth = 1;
  40. canvas.pen.color = SColor.Blue;
  41. canvas.brush.color = SColor.Transparent;
  42. for (let i = 1; i < 100; i += 10) {
  43. //绘制矩形
  44. canvas.drawRect(310 + i, i, 80, 80);
  45. }
  46. canvas.pen.lineWidth = 2;
  47. canvas.pen.color = SColor.Blue;
  48. canvas.brush.color = SColor.Red;
  49. let k = new Date().getTime() / 100 % 10;
  50. for (let i = 1; i < k * 10; i += 10) {
  51. canvas.drawRect(510 + i, i, 80, 80);
  52. }
  53. this.update();
  54. }
  55. }
  56. @Component
  57. export default class DrawRect1 extends Vue {
  58. /**
  59. * 页面挂载
  60. */
  61. mounted(): void {
  62. new TestView();
  63. }
  64. }
  65. </script>