rect.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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. console.log(9999999999999)
  74. this.init();
  75. }
  76. init(): void {
  77. this.view = new SGraphView(this.id);
  78. const scene = new SGraphScene();
  79. this.item = new SGraphRectItem(null, this.rectData);
  80. this.item.selectable = true;
  81. scene.addItem(this.item);
  82. this.item2 = new SGraphRectItem(null, this.rectData2);
  83. this.item2.selectable = true;
  84. scene.addItem(this.item2);
  85. this.view.scene = scene;
  86. this.view.fitSceneToView();
  87. this.view.scalable = false;
  88. }
  89. changeEnable(): void{
  90. if (this.item) {
  91. this.item.enabled = !this.item.enabled;
  92. }
  93. }
  94. // 修改圆角半径
  95. changeY(val: number): void {
  96. if (this.item){
  97. this.item.radius = val;
  98. }
  99. if(this.item2) {
  100. this.item2.radius = val;
  101. }
  102. }
  103. }
  104. </script>
  105. <style scoped>
  106. </style>