<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 {SGraphItem, SGraphScene, SGraphView, SObjectItem, STextItem, SImageItem, SAnchorItem} 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>