persagy-web-doc/docs/.vuepress/components/scene/items/SImgTextItem.vue

<template>
    <div>
        <el-button @click="changemaodian">切换锚点显示状态</el-button>
        <el-button @click="changetext">切换文本显示状态</el-button>
        <canvas id="editPolygon" width="740" height="400" tabindex="0"></canvas>
    </div>
</template>

<script lang="ts">
import {
    SAnchorItem,
    SGraphItem,
    SGraphScene,
    SGraphView,
    SImageItem,
    SObjectItem,
    STextItem
} from "@persagy-web/graph/lib";
import { SItemStatus } from "@persagy-web/big/lib";
import { SColor, SPainter, SRect, SSize, SPoint, SFont } from "@persagy-web/draw/lib";
import { SMouseEvent } from "@persagy-web/base/lib";
import { Anchor } from "@persagy-web/big/lib/types/topology/Anchor";

/**
 * 图例item  icon
 *
 * @author 郝洁 <haojie@persagy.com>
 */
class SImgTextItem extends SObjectItem {
    /** item 状态 */
    _status: SItemStatus = SItemStatus.Normal;
    get status(): SItemStatus {
        return this._status;
    } // Get status
    set status(v: SItemStatus) {
        this._status = v;
        // 标准状态时
        if (v == SItemStatus.Normal) {
            this.moveable = true;
            this.textItem.moveable = false;
            this.img.moveable = false;
        } else if (v == SItemStatus.Edit) {
            // 编辑状态时
            this.moveable = false;
            this.textItem.moveable = true;
            this.img.moveable = true;
        } else if (v == SItemStatus.Create) {
            // 创建状态时
            this.moveable = true;
            this.textItem.moveable = false;
            this.img.moveable = false;
        }
        this.update();
    }

    /** 是否显示文字 */
    _showText: boolean = true;
    get showText(): boolean {
        return this._showText;
    }
    set showText(v: boolean) {
        // 当文字是显示状态时
        if (v === this._showText) {
            return;
        }
        this._showText = v;
        // 是否显示文字
        if (v) {
            this.textItem.show();
        } else {
            this.textItem.hide();
        }
    }

    /** 是否被选中 */
    get selected(): boolean {
        return this._selected && this.selectable && this.enabled;
    }
    set selected(value: boolean) {
        // 如果选择状态未变更
        if (this.selected == value) {
            return;
        }
        this._selected = value;
        // 选中时
        if (value) {
            this.img.scale = 1.25;
        } else {
            this.img.scale = 1;
        }
        this.update();
    }

    /** 是否激活 */
    _isActive: boolean = false;
    get isActive(): boolean {
        return this._isActive;
    }
    set isActive(v: boolean) {
        this._isActive = v;
        // 激活状态
        if (v) {
            this.cursor = "pointer";
            this.textItem.cursor = "pointer";
            this.img.cursor = "pointer";
        } else {
            this.cursor = "auto";
            this.textItem.cursor = "auto";
            this.img.cursor = "auto";
        }
        this.update();
    }

    /** 激活显示颜色 */
    _activeColor: SColor = new SColor("#00000033");
    get activeColor(): SColor {
        return this._activeColor;
    }
    set activeColor(v: SColor) {
        this._activeColor = v;
        this.update();
    }

    /** X 轴坐标 */
    get x(): number {
        return this.pos.x;
    }
    set x(v: number) {
        this.pos.x = v;
        this.$emit("changePos");
        this.update();
    }

    /** Y 轴坐标 */
    get y(): number {
        return this.pos.y;
    }
    set y(v: number) {
        this.pos.y = v;
        this.$emit("changePos");
        this.update();
    }

    /** icon宽 */
    get sWidth(): number {
        return this.img.width;
    }
    set sWidth(v: number) {
        this.img.width = v;
        this.img.origin = new SPoint(
            this.img.width * 0.5,
            this.img.height * 0.5
        );
        this.changeAnchorPoint();
        this.update();
    }

    /** icon高 */
    get sHeight(): number {
        return this.img.height;
    }
    set sHeight(v: number) {
        this.img.height = v;
        this.img.origin = new SPoint(
            this.img.width * 0.5,
            this.img.height * 0.5
        );
        this.changeAnchorPoint();
        this.update();
    }

    /** 是否显示锚点 */
    private _showAnchor: boolean = false;
    get showAnchor(): boolean {
        return this._showAnchor;
    }
    set showAnchor(v: boolean) {
        this._showAnchor = v;
        this.anchorList.forEach(t => {
            t.visible = v;
        });
    }

    /** 文本内容 */
    get text(): string {
        return this.textItem.text;
    }
    set text(v: string) {
        this.textItem.text = v;
        this.update();
    }

    /** 文本颜色 */
    get color(): SColor {
        return this.textItem.color;
    }
    set color(v: SColor) {
        this.textItem.color = v;
        this.update();
    }

    /** 文本字体 */
    get font(): SFont {
        return this.textItem.font;
    }
    set font(v: SFont) {
        this.textItem.font = v;
        this.update();
    }

    /** img Item */
    img: SImageItem = new SImageItem(this, 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2134829550,3120755721&fm=26&gp=0.jpg');

    /** text Item */
    textItem: STextItem = new STextItem(this);

    /**
     * 构造体
     *
     * @param parent  父类
     * @param data    锚点数据
     */
    constructor(parent: SGraphItem | null, data?: Anchor[]) {
        super(parent);
        this.img.width = 32;
        this.img.height = 32;
        this.img.origin = new SPoint(
            this.img.width * 0.5,
            this.img.height * 0.5
        );
        this.img.connect("onMove", this, this.changeAnchorPoint.bind(this));
        let anchorPoint;
        // 锚点数据存在时
        if (data && data.length) {
            anchorPoint = data.map(t => {
                return {
                    x: t.pos.x,
                    y: t.pos.y,
                    id: t.id
                };
            });
        } else {
            anchorPoint = [
                { x: this.img.x, y: this.img.y, id: "" },
                { x: this.img.x, y: this.img.y, id: "" },
                { x: this.img.x, y: this.img.y, id: "" },
                { x: this.img.x, y: this.img.y, id: "" }
                // { x: this.img.x, y: this.img.y + this.img.height / 2, id: "" },
                // { x: this.img.x, y: this.img.y - this.img.height / 2, id: "" },
                // { x: this.img.x - this.img.width / 2, y: this.img.y, id: "" },
                // { x: this.img.x + this.img.width / 2, y: this.img.y, id: "" }
            ];
        }
        this.anchorList = anchorPoint.map(t => {
            let item = new SAnchorItem(this);
            if (t.id) {
                item.id = t.id;
            }
            item.moveTo(t.x, t.y);
            return item;
        });
        this.showAnchor = false;
        this.textItem.text = "测试文本";
        this.textItem.font.size = 12;
        // 偏移二分之一文本高度
        this.textItem.moveTo(
            this.img.width * 0.5,
            -(this.font.size * 1.25 * 0.5)
        );
        this.showSelect = false;
        this.moveable = true;
        this.selectable = true;
    }

    /**
     * 计算并移动锚点的位置
     */
    private changeAnchorPoint(): void {
        // 判断是否有锚点
        if (this.anchorList.length) {
            let anchorPoint = [
                { x: this.img.x, y: this.img.y },
                { x: this.img.x, y: this.img.y },
                { x: this.img.x, y: this.img.y },
                { x: this.img.x, y: this.img.y }
                // { x: this.img.x, y: this.img.y + this.img.height / 2 },
                // { x: this.img.x, y: this.img.y - this.img.height / 2 },
                // { x: this.img.x - this.img.width / 2, y: this.img.y },
                // { x: this.img.x + this.img.width / 2, y: this.img.y }
            ];
            this.anchorList.forEach((item, index) => {
                item.moveTo(anchorPoint[index].x, anchorPoint[index].y);
            });
        }
    }

    /**
     * 鼠标按下事件
     *
     * @param event   事件对象
     * @return 是否处理事件
     */
    onMouseDown(event: SMouseEvent): boolean {
        console.log(123123123)
        // console.log(super.onMouseDown(event));
        // 如果为show状态 双击改对象则需改为编辑状态
        if (this.status == SItemStatus.Normal) {
            return super.onMouseDown(event);
        } else if (this.status == SItemStatus.Edit) {
            // 编辑状态时
            return super.onMouseDown(event);
        }
        console.log('----------------')
        return true;
    }

    /**
     * 宽高发发生变化
     *
     * @param oldSize 改之前的大小
     * @param newSize 改之后大小
     */
    onResize(oldSize: SSize, newSize: SSize): void {
        console.log(arguments);
    }

    /**
     * 鼠标双击事件
     *
     * @param event   鼠标事件
     * @return 是否处理事件
     */
    onDoubleClick(event: SMouseEvent): boolean {
        // 如果为show状态 双击改对象则需改为编辑状态，处于编辑状态时
        if (SItemStatus.Normal == this.status) {
            this.status = SItemStatus.Edit;
            this.grabItem(this);
        } else if (SItemStatus.Edit == this.status) {
            // 处于编辑状态时
            this.status = SItemStatus.Normal;
            this.releaseItem();
        }
        this.update();
        return true;
    }

    /**
     * Item 对象边界区域
     *
     * @return 边界矩阵
     */
    boundingRect(): SRect {
        let rect = this.img
            .boundingRect()
            .adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
        // 显示文字时
        if (this.showText) {
            rect = rect.unioned(
                this.textItem
                    .boundingRect()
                    .adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0)
            );
        }

        return rect.adjusted(-5, -5, 10, 10);
    }

    /**
     * Item 绘制操作
     *
     * @param painter   绘制对象
     */
    onDraw(painter: SPainter): void {
        // 编辑状态时
        if (this.status == SItemStatus.Edit) {
            painter.pen.lineWidth = painter.toPx(1);
            painter.pen.lineDash = [painter.toPx(3), painter.toPx(7)];
            painter.pen.color = SColor.Black;
            painter.brush.color = SColor.Transparent;
            painter.drawRect(this.boundingRect());
        }

        // 处于激活状态时
        if (this.isActive) {
            painter.pen.color = SColor.Transparent;
            painter.brush.color = this.activeColor;
            // 是否选中
            if (this.selected) {
                painter.shadow.shadowBlur = 10;
                painter.shadow.shadowColor = this.activeColor;
                painter.shadow.shadowOffsetX = 5;
                painter.shadow.shadowOffsetY = 5;
                painter.drawCircle(
                    this.img.x,
                    this.img.y,
                    (this.sWidth / 2.0 + 3) * 1.25
                );
            } else {
                painter.drawCircle(
                    this.img.x,
                    this.img.y,
                    this.sWidth / 2.0 + 3
                );
            }
        } else {
            // 是否选中
            if (this.selected) {
                painter.pen.color = SColor.Transparent;
                painter.brush.color = SColor.Transparent;
                painter.shadow.shadowBlur = 10;
                painter.shadow.shadowColor = new SColor(`#00000033`);
                painter.shadow.shadowOffsetX = 5;
                painter.shadow.shadowOffsetY = 5;
                painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0);
            }
        }
    }
}


    export default {
        name: "ImgTextItem",
        data() {
            return {
                /** 命令所属的场景类 */
                scene: null,
                /** 实例化 view */
                view: null,
                input: '',
            };
        },
        /**
         * 页面挂载
         */
        mounted() {
            // @ts-ignore
            this.view = new SGraphView("editPolygon");
            // @ts-ignore
            this.scene = new SGraphScene();
            // @ts-ignore
            this.view.scene = this.scene;
            // @ts-ignore
            this.init()
        },
        methods: {
            /**
             * 初始化加载
             */
            init() {
                // @ts-ignore
                this.item = new SImgTextItem(null);
                // @ts-ignore
                this.item.moveable = true;

                // @ts-ignore
                this.scene.addItem(this.item);
                // this.view.fitSceneToView();
            },
            changemaodian() {
                // @ts-ignore
                this.item.showAnchor = !this.item.showAnchor;
            },
            changetext() {
                // @ts-ignore
                this.item.showText = !this.item.showText;
            }
        }
    }
</script>