<template> <div class="edit-line"> <div class="btn-list"> <el-button :class="[cmdStatus=='choice' ? 'heightLight' : '']" size="small" @click="choice">选择</el-button> <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">画线</el-button> <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button> <el-button :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']" size="small" @click="deleteItem">删除 </el-button> <el-button :class="[cmdStatus=='undo' ? 'heightLight' : '']" size="small" @click="undo">undo</el-button> <el-button :class="[cmdStatus=='redo' ? 'heightLight' : '']" size="small" @click="redo">redo</el-button> <el-button :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']" size="small" @click="eqDrawLine">垂直水平划线 </el-button> </div> <div class="content"> <div class="left"> <canvas id="edit_line" width="700" height="460" tabindex="0"/> </div> <div class="line-property"> <el-card shadow="always"> <div class="always-item"> <span>线宽:</span> <input type="text"/> </div> <div class="always-item"> <span>线类型:</span> <input type="text"/> </div> <div class="always-item"> <span>线颜色:</span> <input type="text"/> </div> </el-card> </div> </div> </div> </template> <script> import { SGraphScene, SGraphView } from "@persagy-web/graph/"; import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus"; import { EditLineItem } from "./../../../../../guides/edit/items/src/EditLineItem"; //注: 开发者引入 SWallItem 包为: import {SWallItem} from "@persagy-web/edit/"; export default { name: "line", data() { return { /** 命令所属的场景类 */ scene: null, view: null, // 实例化 view isCreated: false, //是否创建完成 cmdStatus: 'choice' //选中状态 }; }, /** * 页面挂载 */ mounted() { this.view = new SGraphView("edit_line"); this.scene = new SGraphScene(); this.view.scene = this.scene; }, methods: { create() { this.cmdStatus = 'create'; // this.scene.root.children = []; const lineItem = new EditLineItem(null, []); lineItem.status = SItemStatus.Create; lineItem.connect("finishCreated", this, this.finishCreated); this.scene.addItem(lineItem); this.scene.grabItem = lineItem; this.scene.updated() }, // 完成创建后的回调 finishCreated() { this.cmdStatus = 'choice' } } }; </script> <style scoped lang="less"> .edit-line { width: 100%; height: 500px; .content { display: flex; .left { flex: 1; } .line-property { width: 300px; .always-item { display: flex; margin-top: 10px; justify-content: space-around; } } } .heightLight { color: #409EFF; border-color: #c6e2ff; background-color: #ecf5ff; } } </style>