persagy-web-doc/docs/.vuepress/components/edit/items/editpolyline/editpolyline.vue

<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 { 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";

/**
 * 编辑折线示例
 *
 * @author 郝洁 <haojie@persagy.com>
 */

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>