浏览代码

多边形 线 增加蒙版

haojianlong 4 年之前
父节点
当前提交
5d84e7139e

+ 39 - 11
src/lib/items/SFHFQZoneLegendItem.ts

@@ -2,7 +2,7 @@
 import { SGraphItem } from "@saga-web/graph/lib";
 import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
 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 { hexify } from "@/components/mapClass/until"
 import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
@@ -85,6 +85,18 @@ export class SFHFQZoneLegendItem 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()
+    }
 
     /**
      * 构造函数
@@ -130,27 +142,27 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
                 this.color = data.Properties.color
             }
             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){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated",this, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             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) => {
-                                return pre + (cur.y / arr.length)
-                            }, 0);
+                    return pre + (cur.y / arr.length)
+                }, 0);
             this.textItem.moveTo(x, y);
         })
     }
 
     toData(): any {
-        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.text;
         this.data.Properties.FillColor = this.fillColor.value;
         this.data.Properties.StrokeColor = this.strokeColor.value;
@@ -161,10 +173,26 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
                 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;
     }
 
+    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

+ 39 - 4
src/lib/items/SLineMarkerItem.ts

@@ -1,7 +1,7 @@
 
-import { SGraphItem } from "@saga-web/graph/lib";
-import { SPoint } from "@saga-web/draw/lib";
-import { ItemOrder, SLineItem } from '@saga-web/big/lib';
+import { SGraphItem, SLineStyle } from "@saga-web/graph/lib";
+import { SPoint, SPainter, SColor, SLineCapStyle } from "@saga-web/draw/lib";
+import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib';
 import { Marker } from '../types/Marker';
 
 /**
@@ -13,6 +13,19 @@ export class SLineMarkerItem extends SLineItem {
     /** 标识对象数据 */
     data: Marker;
 
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
+
     /**
      * 构造函数
      *
@@ -45,7 +58,7 @@ export class SLineMarkerItem extends SLineItem {
     } // Constructor
 
     toData(): Marker {
-        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Pos = { X: this.x, Y: this.y };
         this.data.Properties.Line = this.line.map(pos => {
             return {
                 X: pos.x,
@@ -58,4 +71,26 @@ export class SLineMarkerItem extends SLineItem {
         return this.data;
     }
 
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            painter.pen.color = new SColor(this.strokeColor);
+            if (this.lineStyle == SLineStyle.Dashed) {
+                painter.pen.lineDash = [
+                    painter.toPx(this.lineWidth * 3),
+                    painter.toPx(this.lineWidth * 7)
+                ];
+            }
+            else if (this.lineStyle == SLineStyle.Dotted) {
+                painter.pen.lineDash = [
+                    painter.toPx(this.lineWidth),
+                    painter.toPx(this.lineWidth)
+                ];
+            }
+            painter.drawLine(this.line[0], this.line[1]);
+        } else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SLineMarkerItem

+ 44 - 14
src/lib/items/SSCPZZoneLegendItem.ts

@@ -2,7 +2,7 @@
 import { SGraphItem } from "@saga-web/graph/lib";
 import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
 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 { hexify } from "@/components/mapClass/until"
 import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
@@ -84,11 +84,25 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
             this.textItem.hide();
         }
     }
+
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
+
     /** 图例说明  */
-    set itemExplain(v:string){
-      this.data.Properties.ItemExplain = v
+    set itemExplain(v: string) {
+        this.data.Properties.ItemExplain = v
     }
-    get itemExplain():string{
+    get itemExplain(): string {
         return this.data.Properties.ItemExplain
     }
 
@@ -136,27 +150,27 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
                 this.color = data.Properties.color
             }
             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){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated",this, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             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) => {
-                                return pre + (cur.y / arr.length)
-                            }, 0);
+                    return pre + (cur.y / arr.length)
+                }, 0);
             this.textItem.moveTo(x, y);
         })
     }
 
     toData(): any {
-        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.text;
         this.data.Properties.FillColor = this.fillColor.value;
         this.data.Properties.StrokeColor = this.strokeColor.value;
@@ -167,10 +181,26 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
                 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;
     }
 
+    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

+ 39 - 11
src/lib/items/SZoneLegendItem.ts

@@ -1,7 +1,7 @@
 
 import { SGraphItem } from "@saga-web/graph/lib";
 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 { hexify } from "@/components/mapClass/until"
 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()
+    }
 
     /**
      * 构造函数
@@ -130,27 +142,27 @@ export class SZoneLegendItem extends SPolygonItem {
                 this.color = data.Properties.color
             }
             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){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated",this, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             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) => {
-                                return pre + (cur.y / arr.length)
-                            }, 0);
+                    return pre + (cur.y / arr.length)
+                }, 0);
             this.textItem.moveTo(x, y);
         })
     }
 
     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.Properties.FillColor = this.fillColor.value;
         this.data.Properties.StrokeColor = this.strokeColor.value;
@@ -161,10 +173,26 @@ export class SZoneLegendItem extends SPolygonItem {
                 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;
     }
 
+    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

+ 26 - 1
src/lib/items/TipelineItem.ts

@@ -1,4 +1,4 @@
-import { SPolylineItem, ItemOrder } from '@saga-web/big/lib';
+import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib';
 import { SPainter, SColor } from '@saga-web/draw';
 import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib';
 import { Relation } from '../types/Relation';
@@ -69,6 +69,20 @@ export class TipelineItem extends SPolylineItem {
       this.data.Anchor2ID = this._anchor2ID;
     }
   }
+
+  /** 是否蒙版遮罩  */
+  _maskFlag: boolean = false;
+  get maskFlag(): boolean {
+    return this._maskFlag;
+  }
+  set maskFlag(v: boolean) {
+    if (v === this._maskFlag) {
+      return
+    }
+    this._maskFlag = v;
+    this.update()
+  }
+
   /** 数据存储  */
   data: Relation | null = null;
   /** 接收事件作出修改  */
@@ -142,4 +156,15 @@ export class TipelineItem extends SPolylineItem {
 
     return this.data
   }
+
+  onDraw(painter: SPainter) {
+    if (this.maskFlag && this.status == SItemStatus.Normal) {
+      let color = new SColor(this.strokeColor)
+      color.alpha = 100;
+      painter.pen.color = color;
+      painter.drawPolyline(this.pointList);
+    } else {
+      super.onDraw(painter);
+    }
+  }
 }