polyline.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <div>
  3. <canvas id="editPolyline" width="740" height="400" tabindex="0"></canvas>
  4. </div>
  5. </template>
  6. <script>
  7. import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
  8. import { SItemStatus, SCircleCornerPolylineItem } from "@persagy-web/big/lib";
  9. /**
  10. * 可编辑折线示例
  11. *
  12. * @author 郝洁 <haojie@persagy.com>
  13. */
  14. export default {
  15. name: "editPolyline",
  16. data() {
  17. return {
  18. /** 命令所属的场景类 */
  19. scene: null,
  20. /** 实例化 view */
  21. view: null,
  22. item: null,
  23. };
  24. },
  25. /**
  26. * 页面挂载
  27. */
  28. mounted() {
  29. this.view = new SGraphView("editPolyline");
  30. this.scene = new SGraphScene();
  31. this.view.scene = this.scene;
  32. this.init()
  33. },
  34. methods: {
  35. /**
  36. * 初始化加载
  37. */
  38. init() {
  39. this.scene.root.children = [];
  40. this.item = new SCircleCornerPolylineItem(null);
  41. // [15, 20],
  42. // [20, 200],
  43. // [200, 300],
  44. // [300, 100],
  45. // [200, 20]
  46. this.item.pointList = [
  47. { x: 15000, y: 20000 },
  48. { x: 20000, y: 20000 },
  49. { x: 20000, y: 30000 },
  50. { x: 30000, y: 10000 },
  51. { x: 20000, y: 10000 },
  52. ];
  53. // this.item.generatePath();
  54. this.scene.addItem(this.item);
  55. this.scene.grabItem = this.item;
  56. this.view.update();
  57. console.log(this.item)
  58. this.view.fitSceneToView()
  59. },
  60. }
  61. }
  62. </script>
  63. <style scoped>
  64. canvas {
  65. border: 1px solid #eeeeee;
  66. outline: none;
  67. }
  68. </style>