polygon.vue 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <div style="margin-top: 10px;">
  3. <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
  4. <canvas :id="'polygon'+time" width="740" height="400" />
  5. </div>
  6. </template>
  7. <script>
  8. import {SGraphScene, SGraphPolyGroupItem, SGraphView} from "@persagy-web/graph/lib";
  9. export default {
  10. name: "rect1",
  11. data(){
  12. return {
  13. view: '',
  14. item: '',
  15. time: Date.now(),
  16. rectData: {
  17. Outline: [
  18. [{X:0,Y:0},{X:0,Y:1000},{X:700,Y:1500},{X:500,Y:1000},{X:200,Y:0}],
  19. [{X:1000,Y:1000},{X:1200,Y:1000},{X:1200,Y:1200},{X:1000,Y:1200}]
  20. ],
  21. Style: {
  22. "Default":{
  23. "Stroke": "#cccccc",
  24. "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  25. "LineWidth": 2,
  26. "Effect": {}
  27. },
  28. "Selected": {
  29. "Stroke": "#66ff66",
  30. "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  31. "LineWidth": 3,
  32. "Effect": {}
  33. },
  34. "Disabled": {
  35. "Stroke": "#333333",
  36. "Fill": "#afafaf",
  37. "LineWidth": 1,
  38. "Effect": {}
  39. },
  40. }
  41. },
  42. }
  43. },
  44. mounted() {
  45. this.init();
  46. },
  47. methods:{
  48. init(){
  49. this.view = new SGraphView(`polygon${this.time}`);
  50. const scene = new SGraphScene();
  51. this.item = new SGraphPolyGroupItem(null, this.rectData);
  52. this.item.selectable = true;
  53. scene.addItem(this.item);
  54. this.view.scene = scene;
  55. this.view.fitSceneToView();
  56. this.view.scalable = false;
  57. },
  58. changeEnable(){
  59. if (this.item) {
  60. this.item.enabled = !this.item.enabled;
  61. }
  62. }
  63. }
  64. }
  65. </script>
  66. <style scoped>
  67. </style>