polygon.vue 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <div style="margin-top: 10px;">
  3. <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
  4. <canvas :id="id" width="740" height="400" />
  5. </div>
  6. </template>
  7. <script lang="ts">
  8. import {SGraphScene, SGraphPolyGroupItem, SGraphView} from "@persagy-web/graph/lib";
  9. import {SSize} from "@persagy-web/draw/lib";
  10. import { Component, Vue } from "vue-property-decorator";
  11. import { v1 as uuid } from "uuid";
  12. class Expolygon extends SGraphPolyGroupItem{
  13. resize(old:SSize,newS:SSize):void{
  14. const xs = newS.width / old.width;
  15. const ys = newS.height / old.height;
  16. // @ts-ignore
  17. this.pointList = this.pointList.map(t => {
  18. // @ts-ignore
  19. return t.map(item => {
  20. item.x = item.x * xs;
  21. item.y = item.y * ys;
  22. return item
  23. })
  24. });
  25. // console.log(this.pointList)
  26. }
  27. }
  28. @Component
  29. export default class ZoneCanvas extends Vue {
  30. view: SGraphView | undefined;
  31. item: Expolygon | undefined;
  32. id: string = uuid();
  33. rectData = {
  34. outline: [
  35. [{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:200,y:0}],
  36. [{x:1000,y:1000},{x:1200,y:1000},{x:1200,y:1200},{x:1000,y:1200}]
  37. ],
  38. style: {
  39. "default":{
  40. "stroke": "#cccccc",
  41. "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  42. "lineWidth": 2,
  43. "effect": {}
  44. },
  45. "selected": {
  46. "stroke": "#66ff66",
  47. "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  48. "lineWidth": 3,
  49. "effect": {}
  50. },
  51. "disabled": {
  52. "stroke": "#333333",
  53. "fill": "#afafaf",
  54. "lineWidth": 1,
  55. "effect": {}
  56. },
  57. }
  58. };
  59. mounted() {
  60. this.init();
  61. };
  62. init(){
  63. this.view = new SGraphView(this.id);
  64. const scene = new SGraphScene();
  65. this.item = new Expolygon(null, this.rectData);
  66. this.item.selectable = true;
  67. scene.addItem(this.item);
  68. this.view.scene = scene;
  69. this.view.fitSceneToView();
  70. this.view.scalable = false;
  71. };
  72. changeEnable(){
  73. if (this.item) {
  74. this.item.enabled = !this.item.enabled;
  75. }
  76. }
  77. }
  78. </script>
  79. <style scoped>
  80. </style>