<template> <div class="edit-line"> <!-- 所有按钮 --> <div class="btn-list"> <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">添加</el-button> <el-button :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']" size="small" @click="deleteItem" >删除</el-button> </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="showType" @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, SImageShowType } from "@persagy-web/graph/"; import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus"; import { SPoint, SColor } from "@persagy-web/draw/"; //注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/"; import { EditImageItem } from "./../../../../../guides/edit/items/src/EditImageItem"; import { hexify } from "./../../../../public/until/rgbaUtil"; class SScene extends SGraphScene { cmdStatus = ""; imageItem = null; constructor() { super(); } onMouseDown(event) { if (this.cmdStatus == "create" && this.imageItem) { this.imageItem.moveTo(event.x, event.y); this.addItem(this.imageItem); this.changeStatus(""); } else { return super.onMouseDown(event); } } // 触发cmdStatus changeStatus() {} } export default { name: "EditPolylineItem", data() { return { scene: null, //场景 view: null, //view实例 isCreated: false, //是否创建完成 cmdStatus: "", //选中状态 imageItem: null, //存放创建的Item lineWidth: 1, //border线宽 lineColor: "", //border线颜色 fillColor: "", //填充色 showType: "", //图展示类型 options: [ { value: "Full", label: "铺满" }, { value: "AutoFit", label: "自适应" }, { value: "Equivalency", label: "等比缩放" } ] }; }, mounted() { this.view = new SGraphView("edit_polygon"); this.scene = new SScene(); this.view.scene = this.scene; this.scene.changeStatus = this.changeStatus }, methods: { create() { this.cmdStatus = "create"; this.scene.root.children = []; this.imageItem = new EditImageItem(null); this.imageItem.url = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg"; this.imageItem.width = 100; this.imageItem.height = 100; this.imageItem.moveable = true; this.scene.imageItem = this.imageItem; }, deleteItem() { this.cmdStatus = ""; this.scene.removeItem(this.imageItem); this.imageItem = null; this.view.update(); }, edit() { if (this.imageItem) { if (this.imageItem.status == SItemStatus.Normal) { this.scene.grabItem = this.imageItem; this.imageItem.status = SItemStatus.Edit; // this.imageItem.verAndLeve = false; this.cmdStatus = "edit"; } else { this.imageItem.status = SItemStatus.Normal; this.scene.grabItem = null; this.cmdStatus = ""; } } }, eqDrawLine() { this.cmdStatus = "eqDrawLine"; this.scene.root.children = []; // this.imageItem = new EditPolylineItem(null, []); this.imageItem.verAndLeve = true; this.imageItem.status = SItemStatus.Create; this.imageItem.connect("finishCreated", this, this.finishCreated); this.imageItem.moveable = true; this.scene.addItem(this.imageItem); this.view.update(); }, // 改变线宽属性 changeLineWidth(val) { if (this.imageItem) { this.lineWidth = val; this.imageItem.lineWidth = val; } }, // 改变颜色 changeColor(val) { if (this.imageItem) { this.lineColor = hexify(val); this.imageItem.strokeColor = new SColor(this.lineColor); } }, // 改变填充颜色 changeFillColor(val) { if (this.imageItem) { this.fillColor = hexify(val); this.imageItem.fillColor = new SColor(this.lineColor); } }, //改变图的展示类型 changeType(val) { if (this.imageItem) { this.imageItem.showType = SImageShowType[val]; } }, // 完成创建后的回调 changeStatus() { this.cmdStatus = ""; } }, watch: { imageItem(val) { // if (val) { // this.lineWidth = val.lineWidth; // 线宽 this.showType = this.options[val.showType].value; // } else { // this.lineWidth = 0; // } }, cmdStatus(val) { this.scene.cmdStatus = val; } } }; </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>