path.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536
  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, Prop, Vue } from "vue-property-decorator";
  7. class TestView222 extends SCanvasView {
  8. path:SPath;
  9. constructor() {
  10. super('pathCanvas');
  11. this.path = new SPath();
  12. // @ts-ignore
  13. this.path.polygon([{x:700,y:150},{x:0,y:150},{x:0,y:0}]);
  14. // @ts-ignore
  15. this.path.polygon([{x:100,y:100},{x:100,y:200},{x:200,y:200}]);
  16. // this.path.polygon([{x:0,y:0},{x:0,y:150},{x:700,y:150}]);
  17. // this.path.polygon([{x:200,y:200},{x:100,y:200},{x:100,y:100}]);
  18. }
  19. onDraw(painter: SPainter) {
  20. painter.drawPath(this.path)
  21. }
  22. }
  23. @Component
  24. export default class PathCanvas extends Vue {
  25. mounted(): void {
  26. new TestView222();
  27. }
  28. }
  29. </script>
  30. <style scoped>
  31. </style>