path.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  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. onDraw(painter: SPainter) {
  28. //绘制路径
  29. painter.drawPath(this.path)
  30. }
  31. }
  32. @Component
  33. export default class PathCanvas extends Vue {
  34. /**
  35. * 页面挂载
  36. */
  37. mounted(): void {
  38. new TestView222();
  39. }
  40. }
  41. </script>
  42. <style scoped>
  43. </style>