rect.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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 lang="ts">
  9. import {SGraphRectItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
  10. import { Component, Vue } from "vue-property-decorator";
  11. @Component
  12. export default class RectCanvas extends Vue {
  13. id: string = 'rect' + Date.now();
  14. view: SGraphView | undefined;
  15. item: SGraphRectItem | undefined;
  16. item2: SGraphRectItem | undefined;
  17. R: number = 0;
  18. rectData = {
  19. x: 0,
  20. y: 0,
  21. width: 500,
  22. height: 500,
  23. radius: 0,
  24. style: {
  25. "default":{
  26. "stroke": "#cccccc",
  27. "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  28. "lineWidth": 2,
  29. "effect": {}
  30. },
  31. "selected": {
  32. "stroke": "#66ff66",
  33. "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  34. "lineWidth": 3,
  35. "effect": {}
  36. },
  37. "disabled": {
  38. "stroke": "#333333",
  39. "fill": "#afafaf",
  40. "lineWidth": 1,
  41. "effect": {}
  42. },
  43. }
  44. };
  45. rectData2 = {
  46. x: 1000,
  47. y: 0,
  48. width: 500,
  49. height: 500,
  50. radius: 0,
  51. style: {
  52. "default":{
  53. "stroke": "#cccccc",
  54. "fill": "#ffccee",
  55. "lineWidth": 2,
  56. "effect": {}
  57. },
  58. "selected": {
  59. "stroke": "#66ff66",
  60. "fill": "#ff33ee",
  61. "lineWidth": 3,
  62. "effect": {}
  63. },
  64. "disabled": {
  65. "stroke": "#333333",
  66. "fill": "#afafaf",
  67. "lineWidth": 1,
  68. "effect": {}
  69. },
  70. }
  71. };
  72. private mounted (): void {
  73. this.init();
  74. }
  75. init(): void {
  76. this.view = new SGraphView(this.id);
  77. const scene = new SGraphScene();
  78. this.item = new SGraphRectItem(null, this.rectData);
  79. this.item.selectable = true;
  80. this.item._resizeable = false;
  81. scene.addItem(this.item);
  82. this.item2 = new SGraphRectItem(null, this.rectData2);
  83. this.item2.selectable = true;
  84. this.item2._resizeable = false;
  85. scene.addItem(this.item2);
  86. this.view.scene = scene;
  87. this.view.fitSceneToView();
  88. this.view.scalable = false;
  89. }
  90. changeEnable(): void{
  91. if (this.item) {
  92. this.item.enabled = !this.item.enabled;
  93. }
  94. }
  95. // 修改圆角半径
  96. changeY(val: number): void {
  97. if (this.item){
  98. this.item.radius = val;
  99. }
  100. if(this.item2) {
  101. this.item2.radius = val;
  102. }
  103. }
  104. }
  105. </script>
  106. <style scoped>
  107. </style>