roundRect.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <div style="margin-top: 10px">
  3. <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
  4. <canvas id="roundRect" width="740" height="400"/>
  5. </div>
  6. </template>
  7. <script>
  8. import {SGraphScene, SGraphShape, SGraphView} from '@persagy-web/graph/lib'
  9. import {SRect} from '@persagy-web/draw/lib'
  10. class RoundRect extends SGraphShape {
  11. constructor(parent, data) {
  12. super(parent, data.Style);
  13. this.leftTopX = data.X;
  14. this.leftTopY = data.Y;
  15. this.width = data.Width;
  16. this.height = data.Height;
  17. this.radius = data.Radius;
  18. }
  19. boundingRect() {
  20. return new SRect(this.leftTopX, this.leftTopY, this.width, this.height)
  21. }
  22. onDraw(painter) {
  23. super.onDraw(painter);
  24. painter.drawRoundRect(this.leftTopX, this.leftTopY, this.width, this.height, this.radius)
  25. }
  26. }
  27. export default {
  28. name: "roundRect",
  29. data() {
  30. return {
  31. view: '',
  32. item: '',
  33. item2: '',
  34. rectData: {
  35. X: 0,
  36. Y: 0,
  37. Width: 500,
  38. Height: 500,
  39. Radius: 50,
  40. Style: {
  41. "Default": {
  42. "Stroke": "#cccccc",
  43. "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  44. "LineWidth": 2,
  45. "Effect": {}
  46. },
  47. "Selected": {
  48. "Stroke": "#66ff66",
  49. "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  50. "LineWidth": 3,
  51. "Effect": {}
  52. },
  53. "Disabled": {
  54. "Stroke": "#333333",
  55. "Fill": "#afafaf",
  56. "LineWidth": 1,
  57. "Effect": {}
  58. },
  59. }
  60. },
  61. rectData2: {
  62. X: 1000,
  63. Y: 0,
  64. Width: 500,
  65. Height: 500,
  66. Radius: 50,
  67. Style: {
  68. "Default": {
  69. "Stroke": "#cccccc",
  70. "Fill": "#ffccee",
  71. "LineWidth": 2,
  72. "Effect": {}
  73. },
  74. "Selected": {
  75. "Stroke": "#66ff66",
  76. "Fill": "#ff33ee",
  77. "LineWidth": 3,
  78. "Effect": {}
  79. },
  80. "Disabled": {
  81. "Stroke": "#333333",
  82. "Fill": "#afafaf",
  83. "LineWidth": 1,
  84. "Effect": {}
  85. },
  86. }
  87. }
  88. }
  89. },
  90. mounted() {
  91. this.init()
  92. },
  93. methods: {
  94. init() {
  95. this.view = new SGraphView('roundRect');
  96. const scene = new SGraphScene();
  97. this.item = new RoundRect(null, this.rectData);
  98. this.item.selectable = true;
  99. scene.addItem(this.item);
  100. this.item2 = new RoundRect(null, this.rectData2);
  101. this.item2.selectable = true;
  102. scene.addItem(this.item2);
  103. this.view.scene = scene;
  104. this.view.fitSceneToView();
  105. this.view.scalable = false
  106. },
  107. changeEnable() {
  108. if (this.item) {
  109. this.item.enabled = !this.item.enabled
  110. }
  111. },
  112. }
  113. }
  114. </script>
  115. <style scoped>
  116. </style>