<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_polygon" 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> <!-- <div class="always-item"> <span>填充色:</span> <el-color-picker v-model="fillColor" @change="changeFillColor" 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 ,SColor} from "@persagy-web/draw/"; //注: 开发者引入 EditPolygonItem 包为: import {EditPolygonItem} from "@persagy-web/edit/"; import { EditPolylineItem } from "./../../../../../guides/edit/items/src/EditPolylineItem"; import { hexify } from "./../../../../public/until/rgbaUtil"; export default { name: "EditPolylineItem", data() { return { scene: null, //场景 view: null, //view实例 isCreated: false, //是否创建完成 cmdStatus: "", //选中状态 polylineItem: null, //存放创建的Item lineWidth: 1, //border线宽 lineColor: "", //border线颜色 fillColor:"", //填充色 lineType: "", //border线类型 options: [ { value: "Solid", label: "实线" }, { value: "Dashed", label: "虚线" }, { value: "Dotted", label: "点" } ] }; }, mounted() { this.view = new SGraphView("edit_polygon"); this.scene = new SGraphScene(); this.view.scene = this.scene; }, methods: { create() { this.cmdStatus = "create"; this.scene.root.children = []; this.polylineItem = new EditPolylineItem(null,[]); this.polylineItem.status = SItemStatus.Create; this.polylineItem.connect("finishCreated", this, this.finishCreated); this.scene.addItem(this.polylineItem); this.scene.grabItem = this.polylineItem; this.view.update(); }, deleteItem() { this.cmdStatus = ""; this.scene.removeItem(this.polylineItem); this.polylineItem = null; this.view.update(); }, edit() { if (this.polylineItem) { if (this.polylineItem.status == SItemStatus.Normal) { this.scene.grabItem = this.polylineItem; this.polylineItem.status = SItemStatus.Edit; // this.polylineItem.verAndLeve = false; this.cmdStatus = "edit"; } else { this.polylineItem.status = SItemStatus.Normal; this.scene.grabItem = null; this.cmdStatus = ""; } } }, eqDrawLine() { this.cmdStatus = "eqDrawLine"; this.scene.root.children = []; this.polylineItem = new EditPolylineItem(null, []); this.polylineItem.verAndLeve = true; this.polylineItem.status = SItemStatus.Create; this.polylineItem.connect("finishCreated", this, this.finishCreated); this.polylineItem.moveable = true; this.scene.addItem(this.polylineItem); this.scene.grabItem = this.polylineItem; this.view.update(); }, // 改变线宽属性 changeLineWidth(val) { if (this.polylineItem) { this.lineWidth = val; this.polylineItem.lineWidth = val; } }, // 改变颜色 changeColor(val) { if (this.polylineItem) { this.lineColor = hexify(val); this.polylineItem.strokeColor = new SColor(this.lineColor); } }, // 改变填充颜色 changeFillColor(val) { if (this.polylineItem) { this.fillColor = hexify(val); this.polylineItem.fillColor = new SColor(this.lineColor); } }, //改变线得类型 changeType(val) { if (this.polylineItem) { this.polylineItem.lineStyle = SLineStyle[val]; } }, // 完成创建后的回调 finishCreated() { this.cmdStatus = ""; } }, watch: { polylineItem(val) { if (val) { this.lineWidth = val.lineWidth; // 线宽 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>