polyline.vue 1.8 KB

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