DrawRect1.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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. // 长度为 360 ,以10递增绘制矩形
  43. for (let i = 1; i < 100; i += 10) {
  44. //绘制矩形
  45. canvas.drawRect(310 + i, i, 80, 80);
  46. }
  47. canvas.pen.lineWidth = 2;
  48. canvas.pen.color = SColor.Blue;
  49. canvas.brush.color = SColor.Red;
  50. let k = new Date().getTime() / 100 % 10;
  51. // 长度随机 ,以10递增绘制矩形
  52. for (let i = 1; i < k * 10; i += 10) {
  53. canvas.drawRect(510 + i, i, 80, 80);
  54. }
  55. this.update();
  56. }
  57. }
  58. @Component
  59. export default class DrawRect1 extends Vue {
  60. /**
  61. * 页面挂载
  62. */
  63. mounted(): void {
  64. new TestView();
  65. }
  66. }
  67. </script>