rect.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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 Rect 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. scene.addItem(this.item);
  81. this.item2 = new SGraphRectItem(null, this.rectData2);
  82. this.item2.selectable = true;
  83. scene.addItem(this.item2);
  84. this.view.scene = scene;
  85. this.view.fitSceneToView();
  86. this.view.scalable = false;
  87. }
  88. changeEnable(): void{
  89. if (this.item) {
  90. this.item.enabled = !this.item.enabled;
  91. }
  92. }
  93. // 修改圆角半径
  94. changeY(val: number): void {
  95. if (this.item){
  96. this.item.radius = val;
  97. }
  98. if(this.item2) {
  99. this.item2.radius = val;
  100. }
  101. }
  102. }
  103. </script>
  104. <style scoped>
  105. </style>