<template> <div class="edit-line"> <div class="btn-list"> <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">画线</el-button> <el-tooltip class="item" effect="dark" content="双击 item 也可进入编辑状态" placement="top-start"> <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button> </el-tooltip> <el-button :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']" size="small" @click="deleteItem" >删除</el-button> <el-tooltip class="item" effect="dark" content="长按 Shoft 配合左键也可触发该功能" placement="top-start"> <el-button :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']" size="small" @click="eqDrawLine" >垂直水平划线</el-button> </el-tooltip> </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 slot="header" class="clearfix"> <span>属性修改</span> </div> <div class="always-item"> <span>线宽:</span> <el-input-number size="small" v-model="lineWidth" @change="changeLineWidth" :min="1" :max="50" ></el-input-number> </div> <div class="always-item"> <span>线类型:</span> <el-select style="width:130px" size="small" v-model="lineType" @change="changeType" placeholder="请选择" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </div> <div class="always-item"> <span>线颜色:</span> <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker> </div> </el-card> </div> </div> </div> </template> <script> import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/"; import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus"; import { SPoint } from "@persagy-web/draw/"; import { EditLineItem } from "./../../../../../guides/edit/items/src/EditLineItem"; import { hexify } from "./../../../../public/until/rgbaUtil"; //注: 开发者引入 SWallItem 包为: import {SWallItem} from "@persagy-web/edit/"; export default { name: "editLine", data() { return { scene: null, view: null, isCreated: false, //是否创建完成 cmdStatus: "", //选中状态 lineItem: null, //存放创建的Item lineWidth: 1, lineColor: "", lineType: "", options: [ { value: "Solid", label: "实线" }, { value: "Dashed", label: "虚线" }, { value: "Dotted", label: "点" } ] }; }, 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 = []; this.lineItem = new EditLineItem(null, []); this.lineItem.status = SItemStatus.Create; this.lineItem.connect("finishCreated", this, this.finishCreated); this.scene.addItem(this.lineItem); this.scene.grabItem = this.lineItem; this.view.update(); }, deleteItem() { this.cmdStatus = ""; this.scene.removeItem(this.lineItem); this.lineItem = null; this.view.update(); }, edit() { if (this.lineItem) { if (this.lineItem.status == SItemStatus.Normal) { this.scene.grabItem = this.lineItem; this.lineItem.status = SItemStatus.Edit; this.cmdStatus = "edit"; } else { this.lineItem.status = SItemStatus.Normal; this.scene.grabItem = null; this.cmdStatus = ""; } } }, eqDrawLine() { this.cmdStatus = "eqDrawLine"; this.scene.root.children = []; this.lineItem = new EditLineItem(null, []); this.lineItem.verAndLeve = true; this.lineItem.status = SItemStatus.Create; this.lineItem.connect("finishCreated", this, this.finishCreated); this.scene.addItem(this.lineItem); this.scene.grabItem = this.lineItem; this.view.update(); }, // 改变线宽属性 changeLineWidth(val) { if (this.lineItem) { this.lineWidth = val; this.lineItem.lineWidth = val; } }, // 改变颜色 changeColor(val) { if (this.lineItem) { this.lineColor = hexify(val); this.lineItem.strokeColor = this.lineColor; } }, //改变线得类型 changeType(val) { if (this.lineItem) { this.lineItem.lineStyle = SLineStyle[val]; } }, // 完成创建后的回调 finishCreated() { this.cmdStatus = ""; } }, watch: { lineItem(val) { if (val) { this.lineWidth = val.lineWidth; // 线宽 this.lineStyle = val.lineStyle; // 线条样式 this.lineColor = val.strokeColor.value; // 线条填充色 this.lineType = this.options[val.lineStyle].value; } else { this.lineWidth = 0; } } } }; </script> <style scoped lang="less"> .edit-line { width: 100%; height: 500px; .content { display: flex; justify-content: flex-start; .left { margin-right: 20px; } .line-property { width: 300px; margin-top: 20px; .always{ width: 100%; height: 100%; } .always-item { display: flex; margin-top: 10px; justify-content: space-between; } } } .heightLight { color: #409eff; border-color: #c6e2ff; background-color: #ecf5ff; } } </style>