selectContainer.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <div>
  3. <canvas :id="id" width="740" height="400" tabindex="0"/>
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import { Component, Vue } from "vue-property-decorator";
  8. import { v1 as uuid } from "uuid";
  9. import { SGraphRectItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
  10. import { SRect } from "@persagy-web/draw/lib";
  11. /**
  12. * 选择容器
  13. *
  14. *
  15. * @author 郝洁 <haojie@persagy.com>
  16. */
  17. class ResizeRect extends SGraphRectItem {
  18. resize(oldSize: SRect, newSize: SRect): void {
  19. this.width = newSize.width;
  20. this.height = newSize.height;
  21. }
  22. }
  23. @Component
  24. export default class SelectContainerCanvas extends Vue {
  25. /** 图 id */
  26. id: string = uuid();
  27. /** 实例化 view */
  28. view: SGraphView | undefined;
  29. /** 矩形数据 */
  30. rectData = {
  31. x: 0,
  32. y: 0,
  33. width: 500,
  34. height: 500,
  35. radius: 0,
  36. style: {
  37. "default": {
  38. "stroke": "#cccccc",
  39. "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  40. "lineWidth": 2,
  41. "effect": {}
  42. },
  43. "selected": {
  44. "stroke": "#66ff66",
  45. "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  46. "lineWidth": 3,
  47. "effect": {}
  48. },
  49. "disabled": {
  50. "stroke": "#333333",
  51. "fill": "#afafaf",
  52. "lineWidth": 1,
  53. "effect": {}
  54. },
  55. }
  56. };
  57. /**
  58. * 页面挂载
  59. */
  60. mounted(): void {
  61. this.init()
  62. };
  63. /**
  64. * 初始化加载
  65. */
  66. init(): void {
  67. this.view = new SGraphView(this.id);
  68. const scene = new SGraphScene();
  69. const item = new ResizeRect(null, this.rectData);
  70. scene.addItem(item);
  71. item.selectable = true;
  72. item.moveable = true;
  73. this.view.scene = scene;
  74. this.view.fitSceneToView();
  75. this.view.scalable = false;
  76. };
  77. }
  78. </script>
  79. <style scoped>
  80. </style>