rect.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <div>
  3. <el-button size="small" @click="changeEnable">切换item禁用状态</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. rectData: {
  33. X: 0,
  34. Y: 0,
  35. Width: 500,
  36. Height: 500,
  37. Style: {
  38. "Default":{
  39. "Stroke": "#cccccc",
  40. "Fill": "#ccffcc",
  41. "LineWidth": 2,
  42. "Effect": {}
  43. },
  44. "Selected": {
  45. "Stroke": "#66ff66",
  46. "Fill": "#11effe",
  47. "LineWidth": 3,
  48. "Effect": {}
  49. },
  50. "Disabled": {
  51. "Stroke": "#333333",
  52. "Fill": "#afafaf",
  53. "LineWidth": 1,
  54. "Effect": {}
  55. },
  56. }
  57. }
  58. }
  59. },
  60. mounted() {
  61. this.init();
  62. },
  63. methods:{
  64. init(){
  65. this.view = new SGraphView('rect');
  66. const scene = new SGraphScene();
  67. this.item = new rect(null, this.rectData);
  68. this.item.selectable = true;
  69. this.view.scene = scene;
  70. scene.addItem(this.item);
  71. this.view.fitSceneToView();
  72. this.view.scalable = false;
  73. },
  74. changeEnable(){
  75. if (this.item) {
  76. this.item.enabled = !this.item.enabled;
  77. }
  78. }
  79. }
  80. }
  81. </script>
  82. <style scoped>
  83. </style>