소스 검색

修改图例选中 蒙版

haojianlong 4 년 전
부모
커밋
aec0e8b671

+ 5 - 1
src/components/floorMap/index.vue

@@ -180,6 +180,7 @@ export default {
                 // 增加管线类
                 // 增加图标类图例
                 this.topologyParser.relationList.forEach(t => {
+                    t.selectable = true
                     this.scene.addItem(t)
                 })
                 this.view.fitSceneToView()
@@ -197,6 +198,9 @@ export default {
             this.view = new FloorView(`canvas${this.id}`)
         },
         listChange(item, ev) {
+            console.log('--------------------')
+            console.log(item)
+            console.log(ev)
             if (ev[0].length) {
                 let selectItem1 = ev[0][0],
                     name = selectItem1.data.Name,
@@ -353,7 +357,7 @@ export default {
                     t.maskFlag = !(res.indexOf(id) > -1)
                 })
                 this.topologyParser.relationList.forEach(t => {
-                    let id = t.data.GraphElementId
+                    let id = t.data.GraphElementId || t.data.GraphElementID
                     t.maskFlag = !(res.indexOf(id) > -1)
                 })
             })

+ 9 - 0
src/lib/items/SFHFQZoneLegendItem.js

@@ -178,6 +178,15 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
+
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+
             // @ts-ignore
             painter.drawPolygon([...this.pointList])
         } else {

+ 9 - 0
src/lib/items/SFHFQZoneLegendItem.ts

@@ -214,6 +214,15 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
+
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+
             // @ts-ignore
             painter.drawPolygon([...this.pointList])
         } else {

+ 36 - 5
src/lib/items/SImageLegendItem.js

@@ -1,5 +1,5 @@
 import { SIconTextItem } from '@saga-web/big/lib/items/SIconTextItem';
-import { ItemOrder } from '@saga-web/big/lib';
+import { ItemOrder, SItemStatus } from '@saga-web/big/lib';
 import { SFont, SColor } from '@saga-web/draw/lib';
 /**
  * 图例节点Item(图标类型)
@@ -17,6 +17,8 @@ export class SImageLegendItem extends SIconTextItem {
         super(parent, data.AnchorList);
         /** 图例数量 */
         this._num = 1;
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         this.isTransform = false;
         this.zOrder = ItemOrder.markOrder;
         this.data = data;
@@ -49,7 +51,7 @@ export class SImageLegendItem extends SIconTextItem {
             this.sHeight = data.Properties.sHeight;
         }
         if (data.Properties && data.Properties.font) {
-            this.font = new SFont("sans-serif", data.Properties.font);
+            this.font = new SFont('sans-serif', data.Properties.font);
         }
         if (data.Properties && data.Properties.color) {
             this.color = new SColor(data.Properties.color);
@@ -80,6 +82,16 @@ export class SImageLegendItem extends SIconTextItem {
         this.text = `${this.data.Name}${this.data.Num > 1 ? ` × ${this.data.Num}` : ''}`;
         this.update();
     }
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Size = { Width: this.width, Height: this.height };
@@ -93,15 +105,34 @@ export class SImageLegendItem extends SIconTextItem {
         this.data.Properties.color = this.color.value;
         this.data.Properties.FrameColor = this.activeColor.value;
         this.data.Properties.IsActive = this.isActive;
-        this.data.AnchorList = this.anchorList.map(t => {
+        this.data.AnchorList = this.anchorList.map((t) => {
             return {
                 ID: t.id,
                 Pos: {
                     X: t.x,
-                    Y: t.y
-                }
+                    Y: t.y,
+                },
             };
         });
         return this.data;
     }
+    /**
+     * Item绘制框架
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onPaint(painter, rect) {
+        super.onPaint(painter, rect);
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            painter.pen.color = SColor.Transparent;
+            painter.brush.color = new SColor("#ffffffa1");
+            if (this.selected) {
+                painter.drawCircle(this.img.x, this.img.y, (this.sWidth / 2.0) * 1.25);
+            }
+            else {
+                painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0);
+            }
+        }
+    } // Function onPaint()
 } // Class SImageLegendItem

+ 34 - 2
src/lib/items/SImageLegendItem.ts

@@ -1,8 +1,8 @@
 import { SGraphItem } from '@saga-web/graph/lib'
 import { SIconTextItem } from '@saga-web/big/lib/items/SIconTextItem'
 import { Legend } from '../types/Legend'
-import { ItemOrder } from '@saga-web/big/lib'
-import { SFont, SColor } from '@saga-web/draw/lib'
+import { ItemOrder, SItemStatus } from '@saga-web/big/lib';
+import { SFont, SColor, SPainter, SRect } from '@saga-web/draw/lib';
 /**
  * 图例节点Item(图标类型)
  *
@@ -29,6 +29,19 @@ export class SImageLegendItem extends SIconTextItem {
         this.update()
     }
 
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+        return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
+
     /**
      * 构造函数
      *
@@ -109,4 +122,23 @@ export class SImageLegendItem extends SIconTextItem {
         })
         return this.data
     }
+
+    /**
+     * Item绘制框架
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onPaint(painter: SPainter, rect: SRect): void {
+        super.onPaint(painter, rect);
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            painter.pen.color = SColor.Transparent;
+            painter.brush.color = new SColor("#ffffffa1");
+            if (this.selected) {
+                painter.drawCircle(this.img.x, this.img.y, (this.sWidth / 2.0) * 1.25);
+            } else {
+                painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0);
+            }
+        }
+    } // Function onPaint()
 } // Class SImageLegendItem

+ 9 - 0
src/lib/items/SSCPZZoneLegendItem.js

@@ -185,6 +185,15 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
+
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+
             // @ts-ignore
             painter.drawPolygon([...this.pointList])
         } else {

+ 9 - 0
src/lib/items/SSCPZZoneLegendItem.ts

@@ -222,6 +222,15 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
+
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+
             // @ts-ignore
             painter.drawPolygon([...this.pointList])
         } else {

+ 9 - 0
src/lib/items/SZoneLegendItem.js

@@ -179,6 +179,15 @@ export class SZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
+
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+
             // @ts-ignore
             painter.drawPolygon([...this.pointList])
         } else {

+ 9 - 0
src/lib/items/SZoneLegendItem.ts

@@ -216,6 +216,15 @@ export class SZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
+
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+            
             // @ts-ignore
             painter.drawPolygon([...this.pointList])
         } else {

+ 11 - 1
src/lib/items/TipelineItem.js

@@ -148,8 +148,18 @@ export class TipelineItem extends SPolylineItem {
     onDraw(painter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
             let color = new SColor(this.strokeColor)
-            color.alpha = color.alpha / 2
+            color.alpha = 1
             painter.pen.color = color
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            } else {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth);
+                painter.shadow.shadowColor = SColor.Transparent
+            }
             painter.drawPolyline(this.pointList)
         } else {
             super.onDraw(painter)

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

@@ -159,8 +159,22 @@ export class TipelineItem extends SPolylineItem {
     onDraw(painter: SPainter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
             let color = new SColor(this.strokeColor)
-            color.alpha = color.alpha / 2
+            color.alpha = color.alpha / 8
             painter.pen.color = color
+            
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            } else {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth);
+                painter.shadow.shadowColor = SColor.Transparent
+            }
+            painter.drawPolyline(this.pointList)
+
+            painter.pen.color = new SColor('#ffffff80')
             painter.drawPolyline(this.pointList)
         } else {
             super.onDraw(painter)