|
@@ -1,51 +1,77 @@
|
|
|
-import {SItemStatus} from "@saga-web/big/lib";
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-input v-model="input" placeholder="请输入内容"></el-input>
|
|
|
- <el-button @click="change">00000</el-button>
|
|
|
+ <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} from "@saga-web/graph/lib";
|
|
|
- import {SImageItem, SItemStatus, SObjectItem, STextItem} from "@saga-web/big/lib";
|
|
|
- import {SColor, SPainter, SRect, SSize, STextBaseLine} from "@saga-web/draw/lib";
|
|
|
+ import {SGraphItem, SGraphScene, SGraphView, SObjectItem, STextItem, SImageItem, SAnchorItem} from "@saga-web/graph/lib";
|
|
|
+ import { SItemStatus }from "@saga-web/big/lib";
|
|
|
+ import {SColor, SPainter, SRect, SSize} from "@saga-web/draw/lib";
|
|
|
import {SMouseEvent} from "@saga-web/base/lib";
|
|
|
|
|
|
/**
|
|
|
* 图例item icon
|
|
|
*
|
|
|
* */
|
|
|
- class SImgTextItem extends SObjectItem{
|
|
|
+ class SImgTextItem extends SObjectItem {
|
|
|
|
|
|
/** item状态 */
|
|
|
- _status:SItemStatus = SItemStatus.Create;
|
|
|
- get status():SItemStatus{
|
|
|
+ _status: SItemStatus = SItemStatus.Normal;
|
|
|
+ get status(): SItemStatus {
|
|
|
return this._status;
|
|
|
}
|
|
|
- set status(v:SItemStatus){
|
|
|
+ set status(v: SItemStatus) {
|
|
|
this._status = v;
|
|
|
this.update();
|
|
|
}
|
|
|
|
|
|
/** 是否显示文字 */
|
|
|
- _showText:boolean = true;
|
|
|
- get showText():boolean{
|
|
|
+ _showText: boolean = true;
|
|
|
+ get showText(): boolean {
|
|
|
return this._showText;
|
|
|
}
|
|
|
- set showText(v:boolean){
|
|
|
+ set showText(v: boolean) {
|
|
|
if (v === this._showText) {
|
|
|
return
|
|
|
}
|
|
|
this._showText = v;
|
|
|
- if (v) {
|
|
|
- this.textItem.show();
|
|
|
- } else {
|
|
|
- this.textItem.hide();
|
|
|
- }
|
|
|
+ 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);
|
|
|
|
|
@@ -56,21 +82,55 @@ import {SItemStatus} from "@saga-web/big/lib";
|
|
|
* 构造体
|
|
|
*
|
|
|
* */
|
|
|
- constructor(parent:SGraphItem|null){
|
|
|
+ constructor(parent: SGraphItem | null) {
|
|
|
super(parent);
|
|
|
this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
|
|
|
- setTimeout(() => {
|
|
|
- this.img.width = 28;
|
|
|
- this.img.height = 28;
|
|
|
- this.update();
|
|
|
- },1000);
|
|
|
- this.img.isTransform = true;
|
|
|
- this.textItem.text = `图例item示例`;
|
|
|
- this.textItem.moveTo(16,0);
|
|
|
- this.textItem.font.textBaseLine = STextBaseLine.Middle;
|
|
|
+ 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 改之前的大小
|
|
@@ -87,7 +147,6 @@ import {SItemStatus} from "@saga-web/big/lib";
|
|
|
* @return 是否处理事件
|
|
|
* */
|
|
|
onDoubleClick(event: SMouseEvent): boolean {
|
|
|
- console.log('doubleclick');
|
|
|
this.status = SItemStatus.Edit;
|
|
|
return true;
|
|
|
} // Function onDoubleClick()
|
|
@@ -98,10 +157,10 @@ import {SItemStatus} from "@saga-web/big/lib";
|
|
|
* @return SRect 所有子对象的并集
|
|
|
* */
|
|
|
boundingRect(): SRect {
|
|
|
- let rect = new SRect();
|
|
|
- this.children.forEach(t => {
|
|
|
- rect = rect.unioned(t.boundingRect());
|
|
|
- });
|
|
|
+ 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()
|
|
|
|
|
@@ -114,14 +173,10 @@ import {SItemStatus} from "@saga-web/big/lib";
|
|
|
painter.pen.lineWidth = painter.toPx(1);
|
|
|
painter.pen.color = new SColor("#00FF00");
|
|
|
painter.brush.color = SColor.Transparent;
|
|
|
- painter.drawRect(this.boundingRect());
|
|
|
- super.onDraw(painter);
|
|
|
-
|
|
|
- if (this.status == SItemStatus.Edit) {
|
|
|
- this.anchorList.forEach(t => {
|
|
|
-
|
|
|
- })
|
|
|
+ if (this.showAnchor) {
|
|
|
+ painter.brush.color = SColor.Gray
|
|
|
}
|
|
|
+ painter.drawRect(this.boundingRect());
|
|
|
} // Function onDraw()
|
|
|
}
|
|
|
|
|
@@ -137,21 +192,33 @@ import {SItemStatus} from "@saga-web/big/lib";
|
|
|
},
|
|
|
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(){
|
|
|
- const item = new SImgTextItem(null);
|
|
|
- item.moveable = true;
|
|
|
-
|
|
|
- this.scene.addItem(item);
|
|
|
- this.view.fitSceneToView();
|
|
|
+ // @ts-ignore
|
|
|
+ this.item = new SImgTextItem(null);
|
|
|
+ // @ts-ignore
|
|
|
+ this.item.moveable = true;
|
|
|
+
|
|
|
+ // @ts-ignore
|
|
|
+ this.scene.addItem(this.item);
|
|
|
+ // this.view.fitSceneToView();
|
|
|
},
|
|
|
- change() {
|
|
|
-
|
|
|
+ changemaodian(){
|
|
|
+ // @ts-ignore
|
|
|
+ this.item.showAnchor = !this.item.showAnchor;
|
|
|
+ },
|
|
|
+ changetext(){
|
|
|
+ // @ts-ignore
|
|
|
+ this.item.showText = !this.item.showText;
|
|
|
}
|
|
|
}
|
|
|
}
|