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 } from "@persagy-web/draw/lib";
    import { SMouseEvent } from "@persagy-web/base/lib";

    /**
     * 图例item  icon
     *
     * */
    class SImgTextItem extends SObjectItem {

        /** item状态  */
        _status: SItemStatus = SItemStatus.Normal;
        get status(): SItemStatus {
            return this._status;
        }

        set status(v: SItemStatus) {
            this._status = v;
            this.update();
        }

        /** 是否显示文字  */
        _showText: boolean = true;
        get showText(): boolean {
            return this._showText;
        }

        set showText(v: boolean) {
            if (v === this._showText) {
                return
            }
            this._showText = v;
            this.textItem.visible = v;
        }

        /** 是否显示锚点  */
        _showAnchor: boolean = false;
        get showAnchor(): boolean {
            return this._showAnchor;
        }

        set showAnchor(v: boolean) {
            this._showAnchor = v;
            this.anchorList.forEach(t => {
                t.visible = v;
            })
        }

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

        /** img Item    */
        img: SImageItem = new SImageItem(this);

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

        /**
         * 构造体
         *
         * */
        constructor(parent: SGraphItem | null) {
            super(parent);
            this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
            this.img.width = 32;
            this.img.height = 32;
            let anchorPoint = [{x: 0, y: this.img.height / 2}, {x: 0, y: -this.img.height / 2}, {
                x: -this.img.width / 2,
                y: 0
            }, {x: this.img.width / 2, y: 0}];
            this.anchorList = anchorPoint.map(t => {
                let item = new SAnchorItem(this);
                item.moveTo(t.x, t.y);
                return item;
            });
            this.update();
            this.textItem.text = "x2";
            this.textItem.moveTo(18, -6);
            this.moveable = true;
            this.selectable = true;
            this.textItem.enabled = false;
            this.img.enabled = false;
        }

        onMouseEnter(event: SMouseEvent): boolean {
            this.showAnchor = true;
            return true;
        }

        onMouseLeave(event: SMouseEvent): boolean {
            this.showAnchor = false;
            return true;
        }

        onMouseMove(event: SMouseEvent): boolean {
            return super.onMouseMove(event);
        }

        /**
         * 鼠标按下事件
         *
         * */
        onMouseDown(event: SMouseEvent): boolean {
            console.log(this.textItem)
            if (this.status == SItemStatus.Normal) {
                return super.onMouseDown(event);
            } else if (this.status == SItemStatus.Edit) {
                return super.onMouseDown(event);
            }
            return true;
        } // Function onMouseDown()

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

        /**
         * 鼠标双击事件
         *
         * @param   event   鼠标事件
         * @return  是否处理事件
         * */
        onDoubleClick(event: SMouseEvent): boolean {
            this.status = SItemStatus.Edit;
            return true;
        } // Function onDoubleClick()

        /**
         * 宽高发发生变化
         *
         * @return  SRect   所有子对象的并集
         * */
        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;
        } // Function boundingRect()

        /**
         * Item绘制操作
         *
         * @param   painter painter对象
         */
        onDraw(painter: SPainter): void {
            painter.pen.lineWidth = painter.toPx(1);
            painter.pen.color = new SColor("#00FF00");
            painter.brush.color = SColor.Transparent;
            if (this.showAnchor) {
                painter.brush.color = SColor.Gray
            }
            painter.drawRect(this.boundingRect());
        } // Function onDraw()
    }


    export default {
        name: "ImgTextItem",
        data() {
            return {
                scene: null,
                view: null,
                input: '',
            };
        },
        mounted() {
            console.log(22222222222222222)
            // @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>

<style scoped>
    canvas {
        border: 1px solid #ccc;
    }

    canvas:focus {
        outline: none;
    }
</style>