area.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  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. item._resizeable = false;
  54. scene.addItem(item);
  55. this.view.scene = scene;
  56. this.view.fitSceneToView();
  57. this.view.scalable = false;
  58. }
  59. }
  60. </script>
  61. <style scoped>
  62. </style>