path.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <canvas id="pathCanvas" width="740" height="250"/>
  3. </template>
  4. <script lang="ts">
  5. import { SCanvasView, SPainter, SPath } from "@persagy-web/draw/lib";
  6. import { Component, Vue } from "vue-property-decorator";
  7. /**
  8. * 绘制路径
  9. *
  10. * @author 郝洁 <haojie@persagy.com>
  11. */
  12. class TestView222 extends SCanvasView {
  13. path: SPath;
  14. /**
  15. * 构造函数
  16. */
  17. constructor() {
  18. super('pathCanvas');
  19. this.path = new SPath();
  20. // @ts-ignore
  21. this.path.polygon([{x: 700, y: 150}, {x: 0, y: 150}, {x: 0, y: 0}]);
  22. // @ts-ignore
  23. this.path.polygon([{x: 100, y: 100}, {x: 100, y: 200}, {x: 200, y: 200}]);
  24. // this.path.polygon([{x:0,y:0},{x:0,y:150},{x:700,y:150}]);
  25. // this.path.polygon([{x:200,y:200},{x:100,y:200},{x:100,y:100}]);
  26. }
  27. /**
  28. * Item 绘制操作
  29. * @param painter 绘制对象
  30. */
  31. onDraw(painter: SPainter) {
  32. //绘制路径
  33. painter.drawPath(this.path)
  34. }
  35. }
  36. @Component
  37. export default class PathCanvas extends Vue {
  38. /**
  39. * 页面挂载
  40. */
  41. mounted(): void {
  42. new TestView222();
  43. }
  44. }
  45. </script>
  46. <style scoped>
  47. </style>