path.vue 953 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <template>
  2. <canvas id="pathCanvas" width="740" height="250" />
  3. </template>
  4. <script>
  5. import {SCanvasView, SPath} from "@persagy-web/draw/lib";
  6. class TestView222 extends SCanvasView {
  7. constructor() {
  8. super('pathCanvas');
  9. this.path = new SPath();
  10. this.path.polygon([{x:700,y:150},{x:0,y:150},{x:0,y:0}]);
  11. this.path.polygon([{x:100,y:100},{x:100,y:200},{x:200,y:200}]);
  12. // this.path.polygon([{x:0,y:0},{x:0,y:150},{x:700,y:150}]);
  13. // this.path.polygon([{x:200,y:200},{x:100,y:200},{x:100,y:100}]);
  14. }
  15. onDraw(painter) {
  16. console.log(this.path)
  17. painter.drawPath(this.path)
  18. }
  19. }
  20. export default {
  21. name: 'pathCanvas',
  22. data(){
  23. return{
  24. view: ''
  25. }
  26. },
  27. mounted() {
  28. new TestView222()
  29. }
  30. }
  31. </script>
  32. <style scoped>
  33. </style>