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 v-if="item.render" v-html="item.render(row[item.prop])"></div>
  7. </div>
  8. </template>
  9. <script lang="ts">
  10. import {SGraphRectItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
  11. import { Component, Vue } from "vue-property-decorator";
  12. @Component
  13. export default class RectCanvas extends Vue {
  14. id: string = 'rect' + Date.now();
  15. view: SGraphView | undefined;
  16. item: SGraphRectItem | undefined;
  17. item2: SGraphRectItem | undefined;
  18. R: number = 0;
  19. rectData = {
  20. X: 0,
  21. Y: 0,
  22. Width: 500,
  23. Height: 500,
  24. Radius: 0,
  25. Style: {
  26. "Default":{
  27. "Stroke": "#cccccc",
  28. "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  29. "LineWidth": 2,
  30. "Effect": {}
  31. },
  32. "Selected": {
  33. "Stroke": "#66ff66",
  34. "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  35. "LineWidth": 3,
  36. "Effect": {}
  37. },
  38. "Disabled": {
  39. "Stroke": "#333333",
  40. "Fill": "#afafaf",
  41. "LineWidth": 1,
  42. "Effect": {}
  43. },
  44. }
  45. };
  46. rectData2 = {
  47. X: 1000,
  48. Y: 0,
  49. Width: 500,
  50. Height: 500,
  51. Radius: 0,
  52. Style: {
  53. "Default":{
  54. "Stroke": "#cccccc",
  55. "Fill": "#ffccee",
  56. "LineWidth": 2,
  57. "Effect": {}
  58. },
  59. "Selected": {
  60. "Stroke": "#66ff66",
  61. "Fill": "#ff33ee",
  62. "LineWidth": 3,
  63. "Effect": {}
  64. },
  65. "Disabled": {
  66. "Stroke": "#333333",
  67. "Fill": "#afafaf",
  68. "LineWidth": 1,
  69. "Effect": {}
  70. },
  71. }
  72. };
  73. private mounted (): void {
  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>