DrawPolyline1.vue 857 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <template>
  2. <canvas height="100" id="drawPolyline1" width="800"/>
  3. </template>
  4. <script lang="ts">
  5. import { SCanvasView, SPainter, SPoint } 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. arr: SPoint[] = [new SPoint(10, 10), new SPoint(10, 40), new SPoint(30, 30)];
  14. /**
  15. * 构造函数
  16. */
  17. constructor() {
  18. super("drawPolyline1")
  19. }
  20. /**
  21. * Item 绘制操作
  22. * @param painter 绘制对象
  23. */
  24. onDraw(canvas: SPainter): void {
  25. // 绘制折线
  26. canvas.drawPolyline(this.arr);
  27. }
  28. }
  29. @Component
  30. export default class DrawPolyline1 extends Vue {
  31. /**
  32. * 页面挂载
  33. */
  34. mounted(): void {
  35. new TestView();
  36. }
  37. }
  38. </script>