rect.vue 3.9 KB

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