DrawPolyline1.vue 880 B

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