area.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  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. console.log(this.outline[0][0])
  32. const item = new SGraphAreaGroupItem(null, {OutLine: this.outline});
  33. scene.addItem(item);
  34. this.view.scene = scene;
  35. this.view.fitSceneToView();
  36. console.log(item)
  37. }
  38. }
  39. }
  40. </script>
  41. <style scoped>
  42. </style>