1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <template>
- <div>
- <canvas id="editPolyline" width="740" height="400" tabindex="0"></canvas>
- </div>
- </template>
- <script>
- import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
- import { SItemStatus, SCircleCornerPolylineItem } from "@persagy-web/big/lib";
- /**
- * 可编辑折线示例
- *
- * @author 郝洁 <haojie@persagy.com>
- */
- export default {
- name: "editPolyline",
- data() {
- return {
- /** 命令所属的场景类 */
- scene: null,
- /** 实例化 view */
- view: null,
- item: null,
- };
- },
- /**
- * 页面挂载
- */
- mounted() {
- this.view = new SGraphView("editPolyline");
- this.scene = new SGraphScene();
- this.view.scene = this.scene;
- this.init()
- },
- methods: {
- /**
- * 初始化加载
- */
- init() {
- this.scene.root.children = [];
- this.item = new SCircleCornerPolylineItem(null);
- // [15, 20],
- // [20, 200],
- // [200, 300],
- // [300, 100],
- // [200, 20]
- this.item.pointList = [
- { x: 15000, y: 20000 },
- { x: 20000, y: 20000 },
- { x: 20000, y: 30000 },
- { x: 30000, y: 10000 },
- { x: 20000, y: 10000 },
- ];
- // this.item.generatePath();
- this.scene.addItem(this.item);
- this.scene.grabItem = this.item;
- this.view.update();
- console.log(this.item)
- this.view.fitSceneToView()
- },
- }
- }
- </script>
- <style scoped>
- canvas {
- border: 1px solid #eeeeee;
- outline: none;
- }
- </style>
|