area.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <div style="margin-top: 10px;">
  3. <canvas :id="id" width="740" height="400" />
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import {SGraphAreaGroupItem, SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
  8. import { Component, Prop, Vue } from "vue-property-decorator";
  9. import { v1 as uuid } from "uuid";
  10. @Component
  11. export default class AreaCanvas extends Vue {
  12. id: string = uuid();
  13. view: SGraphView | undefined;
  14. areaData = {
  15. Outline: [
  16. [
  17. [{X:0,Y:0},{X:0,Y:1000},{X:1000,Y:1000},{X:1000,Y:0}],
  18. [{X:200,Y:200},{X:800,Y:200},{X:800,Y:800},{X:200,Y:800}]
  19. ],
  20. [
  21. [{X:1000,Y:1000},{X:1200,Y:1000},{X:1200,Y:1200},{X:1000,Y:1200}]
  22. ]
  23. ],
  24. Style: {
  25. "Default":{
  26. "Stroke": "#cccccc",
  27. "Fill": "SLinearGradient{0,0;0,1200;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  28. "LineWidth": 2,
  29. "Effect": {}
  30. },
  31. "Selected": {
  32. "Stroke": "#66ff66",
  33. "Fill": "SRadialGradient{500,500,50;500,500,800;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  34. "LineWidth": 3,
  35. "Effect": {}
  36. },
  37. "Disabled": {
  38. "Stroke": "#333333",
  39. "Fill": "#afafaf",
  40. "LineWidth": 1,
  41. "Effect": {}
  42. },
  43. }
  44. };
  45. mounted() {
  46. this.init();
  47. };
  48. init(){
  49. this.view = new SGraphView(this.id);
  50. const scene = new SGraphScene();
  51. const item = new SGraphAreaGroupItem(null, this.areaData);
  52. item.selectable = true;
  53. scene.addItem(item);
  54. this.view.scene = scene;
  55. this.view.fitSceneToView();
  56. this.view.scalable = false;
  57. }
  58. }
  59. </script>
  60. <style scoped>
  61. </style>