area.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div style="margin-top: 10px;">
  3. <!-- <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>-->
  4. <!-- 圆角半径 : <el-input-number @change="changeY" v-model="R" size="mini" style="width: 100px"></el-input-number>-->
  5. <canvas :id="id" width="740" height="400" />
  6. </div>
  7. </template>
  8. <script lang="ts">
  9. import {SGraphAreaGroupItem, SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
  10. import {SPath, SPainter, SRect} from "@persagy-web/draw/lib";
  11. import { Component, Prop, Vue } from "vue-property-decorator";
  12. import { v1 as uuid } from "uuid";
  13. class sga extends SGraphItem{
  14. path: SPath;
  15. constructor(parent: SGraphItem | null){
  16. super(parent);
  17. this.path = new SPath();
  18. // @ts-ignore
  19. this.path.polygon([{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:500,y:0}]);
  20. // @ts-ignore
  21. this.path.polygon([{x:0,y:0},{x:500,y:0},{x:300,y:500}]);
  22. }
  23. boundingRect(): SRect {
  24. return new SRect(0,0,700,1500)
  25. }
  26. onDraw(painter: SPainter) {
  27. painter.drawPath(this.path)
  28. }
  29. }
  30. @Component
  31. export default class AreaCanvas extends Vue {
  32. id: string = uuid();
  33. view: SGraphView | undefined;
  34. mounted() {
  35. this.init();
  36. };
  37. init(){
  38. this.view = new SGraphView(this.id);
  39. const scene = new SGraphScene();
  40. const item = new sga(null);
  41. scene.addItem(item);
  42. this.view.scene = scene;
  43. this.view.fitSceneToView();
  44. this.view.scalable = false;
  45. }
  46. }
  47. </script>
  48. <style scoped>
  49. </style>