12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <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, SMaskItem } from "@persagy-web/big/lib";
- import { SColor } from "@persagy-web/draw/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: 150, y: 200 },
- { x: 200, y: 200 },
- { x: 200, y: 300 },
- { x: 300, y: 100 },
- { x: 200, y: 100 },
- ];
- // this.item = new SMaskItem(null, [{x:0, y: 0}, {x:100, y:100}]);
- // this.item.fillColor = SColor.Yellow
- 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>
|