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

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

/**
 * 编辑图片场景类
 *
 * @author 韩耀龙 <hanyaolong@persagy.com>
 */
class SScene extends SGraphScene {
    /** 命令状态 */
    cmdStatus = "";
    /** 绘制图片 Item */
    imageItem = null;

    /**
     * 构造函数
     */
    constructor() {
        super();
    }

    /**
     * 鼠标按下事件
     *
     * @param event   事件
     * @returns 是否处理
     */
    onMouseDown(event) {
        if (this.cmdStatus == "create" && this.imageItem) { // 创建状态并且 Image 图片存在
            //todo 缺少注释
            this.imageItem.moveTo(event.x, event.y);
            this.addItem(this.imageItem);
            this.changeStatus("");
        } else {
            return super.onMouseDown(event);
        }
    }

    /**
     * 改变状态
     */
    changeStatus() {
        // todo 未完成
    }
}

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>