area.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  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>
  9. import {SGraphAreaGroupItem,SGraphScene, SGraphView} from "@persagy-web/graph/lib";
  10. export default {
  11. name: "areaCanvas",
  12. data(){
  13. return{
  14. id: 'area'+Date.now(),
  15. view: '',
  16. outline: [
  17. [
  18. [{X: 0, Y:0},{X: 0, Y:-100},{X: 100, Y:-100}],
  19. // [{X: 800, Y:200},{X: 800, Y:800},{X: 200, Y:800},{X: 200, Y:200}]
  20. ]
  21. ]
  22. }
  23. },
  24. mounted() {
  25. this.init();
  26. },
  27. methods:{
  28. init(){
  29. this.view = new SGraphView(this.id);
  30. const scene = new SGraphScene();
  31. const item = new SGraphAreaGroupItem(null, {OutLine: this.outline});
  32. scene.addItem(item);
  33. this.view.scene = scene;
  34. this.view.fitSceneToView();
  35. console.log(item)
  36. }
  37. }
  38. }
  39. </script>
  40. <style scoped>
  41. </style>