path.vue 932 B

123456789101112131415161718192021222324252627282930313233
  1. <template>
  2. <canvas id="pathCanvas" width="740" height="250" />
  3. </template>
  4. <script lang="ts">
  5. import {SCanvasView, SPath} from "@persagy-web/draw/lib";
  6. import { Component, Prop, Vue } from "vue-property-decorator";
  7. class TestView222 extends SCanvasView {
  8. constructor() {
  9. super('pathCanvas');
  10. this.path = new SPath();
  11. this.path.polygon([{x:700,y:150},{x:0,y:150},{x:0,y:0}]);
  12. this.path.polygon([{x:100,y:100},{x:100,y:200},{x:200,y:200}]);
  13. // this.path.polygon([{x:0,y:0},{x:0,y:150},{x:700,y:150}]);
  14. // this.path.polygon([{x:200,y:200},{x:100,y:200},{x:100,y:100}]);
  15. }
  16. onDraw(painter) {
  17. painter.drawPath(this.path)
  18. }
  19. }
  20. @Component
  21. export default class PathCanvas extends Vue {
  22. mounted(): void {
  23. new TestView222();
  24. }
  25. }
  26. </script>
  27. <style scoped>
  28. </style>