|
@@ -1,7 +1,7 @@
|
|
|
|
|
|
import { SGraphItem } from "@saga-web/graph/lib";
|
|
import { SGraphItem } from "@saga-web/graph/lib";
|
|
import { Legend } from '../types/Legend';
|
|
import { Legend } from '../types/Legend';
|
|
-import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
|
|
|
|
|
|
+import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
|
|
import { STextItem } from '@saga-web/graph/lib';
|
|
import { STextItem } from '@saga-web/graph/lib';
|
|
import { hexify } from "@/components/mapClass/until"
|
|
import { hexify } from "@/components/mapClass/until"
|
|
import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
|
|
import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
|
|
@@ -84,6 +84,18 @@ export class SZoneLegendItem extends SPolygonItem {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ /** 是否蒙版遮罩 */
|
|
|
|
+ _maskFlag: boolean = false;
|
|
|
|
+ get maskFlag(): boolean {
|
|
|
|
+ return this._maskFlag;
|
|
|
|
+ }
|
|
|
|
+ set maskFlag(v: boolean) {
|
|
|
|
+ if (v === this._maskFlag) {
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this._maskFlag = v;
|
|
|
|
+ this.update()
|
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
/**
|
|
* 构造函数
|
|
* 构造函数
|
|
@@ -103,10 +115,15 @@ export class SZoneLegendItem extends SPolygonItem {
|
|
this.setPointList = [];
|
|
this.setPointList = [];
|
|
let setPointList: SPoint[];
|
|
let setPointList: SPoint[];
|
|
if (data.OutLine) {
|
|
if (data.OutLine) {
|
|
- setPointList = data.OutLine.map(i => {
|
|
|
|
- return (new SPoint(i.X, i.Y))
|
|
|
|
- })
|
|
|
|
- this.setPointList = setPointList;
|
|
|
|
|
|
+ if (data.OutLine[0] instanceof SPoint) {
|
|
|
|
+ // @ts-ignore
|
|
|
|
+ this.setPointList = data.OutLine;
|
|
|
|
+ } else {
|
|
|
|
+ setPointList = data.OutLine.map(i => {
|
|
|
|
+ return (new SPoint(i.X, i.Y))
|
|
|
|
+ })
|
|
|
|
+ this.setPointList = setPointList;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
// 设置线宽
|
|
// 设置线宽
|
|
if (data.Properties.LineWidth) {
|
|
if (data.Properties.LineWidth) {
|
|
@@ -125,27 +142,27 @@ export class SZoneLegendItem extends SPolygonItem {
|
|
this.color = data.Properties.color
|
|
this.color = data.Properties.color
|
|
}
|
|
}
|
|
if (data.Properties.font) {
|
|
if (data.Properties.font) {
|
|
- this.font =new SFont("sans-serif", data.Properties.font);
|
|
|
|
|
|
+ this.font = new SFont("sans-serif", data.Properties.font);
|
|
}
|
|
}
|
|
// if( data.Properties.LineDash){
|
|
// if( data.Properties.LineDash){
|
|
// this.LineDash =this._legend.Properties.LineDash
|
|
// this.LineDash =this._legend.Properties.LineDash
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
// 监听多边形创建完成事件,并动态计算文本位置
|
|
// 监听多边形创建完成事件,并动态计算文本位置
|
|
- this.connect("finishCreated",this, () => {
|
|
|
|
|
|
+ this.connect("finishCreated", this, () => {
|
|
// 计算文本位置
|
|
// 计算文本位置
|
|
let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
|
|
let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
|
|
- return pre + (cur.x / arr.length)
|
|
|
|
- }, 0),
|
|
|
|
|
|
+ return pre + (cur.x / arr.length)
|
|
|
|
+ }, 0),
|
|
y: number = this.getPointList.reduce((pre, cur, index, arr) => {
|
|
y: number = this.getPointList.reduce((pre, cur, index, arr) => {
|
|
- return pre + (cur.y / arr.length)
|
|
|
|
- }, 0);
|
|
|
|
|
|
+ return pre + (cur.y / arr.length)
|
|
|
|
+ }, 0);
|
|
this.textItem.moveTo(x, y);
|
|
this.textItem.moveTo(x, y);
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
toData(): any {
|
|
toData(): any {
|
|
- this.data.Pos = {X: this.x, Y: this.y};
|
|
|
|
|
|
+ this.data.Pos = { X: this.x, Y: this.y };
|
|
this.data.Name = this.name;
|
|
this.data.Name = this.name;
|
|
this.data.Properties.FillColor = this.fillColor.value;
|
|
this.data.Properties.FillColor = this.fillColor.value;
|
|
this.data.Properties.StrokeColor = this.strokeColor.value;
|
|
this.data.Properties.StrokeColor = this.strokeColor.value;
|
|
@@ -156,10 +173,26 @@ export class SZoneLegendItem extends SPolygonItem {
|
|
Y: pos.y
|
|
Y: pos.y
|
|
}
|
|
}
|
|
});
|
|
});
|
|
- this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
|
|
|
|
- this.data.Properties.font = this.font.size;
|
|
|
|
- this.data.Properties.color = this.color;
|
|
|
|
|
|
+ this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
|
|
|
|
+ this.data.Properties.font = this.font.size;
|
|
|
|
+ this.data.Properties.color = this.color;
|
|
return this.data;
|
|
return this.data;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ onDraw(painter: SPainter) {
|
|
|
|
+ if (this.maskFlag && this.status == SItemStatus.Normal) {
|
|
|
|
+ let color = new SColor(this.strokeColor)
|
|
|
|
+ color.alpha = 100;
|
|
|
|
+ let brushcolor = new SColor(this.fillColor)
|
|
|
|
+ brushcolor.alpha = 100;
|
|
|
|
+ painter.pen.color = color;
|
|
|
|
+ painter.pen.lineCapStyle = SLineCapStyle.Square;
|
|
|
|
+ painter.pen.lineWidth = painter.toPx(this._lineWidth);
|
|
|
|
+ painter.brush.color = brushcolor;
|
|
|
|
+ // @ts-ignore
|
|
|
|
+ painter.drawPolygon([...this.pointList]);
|
|
|
|
+ } else {
|
|
|
|
+ super.onDraw(painter);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
} // Class SZoneLegendItem
|
|
} // Class SZoneLegendItem
|