polygon.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  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. ],
  20. Style: {
  21. "Default":{
  22. "Stroke": "#cccccc",
  23. "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  24. "LineWidth": 2,
  25. "Effect": {}
  26. },
  27. "Selected": {
  28. "Stroke": "#66ff66",
  29. "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  30. "LineWidth": 3,
  31. "Effect": {}
  32. },
  33. "Disabled": {
  34. "Stroke": "#333333",
  35. "Fill": "#afafaf",
  36. "LineWidth": 1,
  37. "Effect": {}
  38. },
  39. }
  40. },
  41. }
  42. },
  43. mounted() {
  44. this.init();
  45. },
  46. methods:{
  47. init(){
  48. this.view = new SGraphView(`polygon${this.time}`);
  49. const scene = new SGraphScene();
  50. this.item = new SGraphPolyGroupItem(null, this.rectData);
  51. this.item.selectable = true;
  52. scene.addItem(this.item);
  53. this.view.scene = scene;
  54. this.view.fitSceneToView();
  55. this.view.scalable = false;
  56. },
  57. changeEnable(){
  58. if (this.item) {
  59. this.item.enabled = !this.item.enabled;
  60. }
  61. }
  62. }
  63. }
  64. </script>
  65. <style scoped>
  66. </style>