Kaynağa Gözat

1.文本item添加边框和背景色属性
2.直线item添加线条样式属性

zhangyu 5 yıl önce
ebeveyn
işleme
d9bb633713

+ 1 - 5
saga-web-big/src/index.ts

@@ -21,7 +21,6 @@ import { SPolylineItem } from "./items/SPolylineItem";
 import { SLineItem } from "./items/SLineItem";
 import { SRelationState } from "./enums/SRelationState";
 import { SItemStatus } from "./enums/SItemStatus";
-import { SLineStyle } from "./enums/SLineStyle";
 import { SNoneLegendItem } from "./items/topology/SNoneLegendItem";
 import { SLineLegendItem } from "./items/topology/SLineLegendItem";
 import { SZoneLegendItem } from "./items/topology/SZoneLegendItem";
@@ -33,7 +32,6 @@ import { STextMarkerItem } from "./items/topology/STextMarkerItem";
 export {
     SCompassItem,
     SCurveRelation,
-    SEntityItem,
     SFloorItem,
     SLayerItem,
     SLineRelation,
@@ -55,13 +53,11 @@ export {
     SIconTextItem,
     SRelationState,
     SItemStatus,
-    SMarkerItem,
     SNoneLegendItem,
     SLineLegendItem,
     SZoneLegendItem,
     SImageLegendItem,
     SImageMarkerItem,
     SLineMarkerItem,
-    STextMarkerItem,
-    SLineStyle
+    STextMarkerItem
 };

+ 10 - 11
saga-web-big/src/items/SLineItem.ts

@@ -1,12 +1,8 @@
-import { SColor, SLine, SPainter, SPoint, SRect } from "@saga-web/draw/lib";
-import { SMouseEvent, SUndoStack, SMouseButton } from "@saga-web/base";
-import { SMathUtil } from "../utils/SMathUtil";
-import { SItemStatus, SLineStyle } from "..";
-import {
-    SGraphItem,
-    SGraphPointListInsert,
-    SGraphPointListUpdate
-} from "@saga-web/graph/lib";
+import {SColor, SLine, SPainter, SPoint, SRect} from "@saga-web/draw/lib";
+import {SMouseButton, SMouseEvent, SUndoStack} from "@saga-web/base";
+import {SMathUtil} from "../utils/SMathUtil";
+import {SItemStatus} from "..";
+import {SGraphItem, SGraphPointListInsert, SGraphPointListUpdate, SLineStyle} from "@saga-web/graph/lib";
 
 /**
  * 直线item
@@ -413,9 +409,12 @@ export class SLineItem extends SGraphItem {
 
             // 绘制直线
             painter.pen.color = new SColor(this.strokeColor);
-            painter.pen.lineDash = [3, 2];
+            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]);
-
             if (
                 this.status == SItemStatus.Edit ||
                 this.status == SItemStatus.Create

+ 2 - 2
saga-web-big/src/items/topology/SImageMarkerItem.ts

@@ -116,9 +116,9 @@ export class SImageMarkerItem extends SImageItem {
     onDraw(painter: SPainter): void {
         if (this.img) {
             // 要绘制图片的宽度
-            let width = 0;
+            let width: number = 0;
             // 要绘制图片的宽度
-            let height = 0;
+            let height: number = 0;
             // 图片item的宽高比
             let itemAspectRatio: number = this.width / this.height;
             // 原始图片的宽高比

saga-web-big/src/enums/SLineStyle.ts → saga-web-graph/src/enums/SLineStyle.ts


+ 3 - 1
saga-web-graph/src/index.ts

@@ -43,6 +43,7 @@ import { SObjectItem } from "./items/SObjectItem";
 import { SAnchorItem } from "./items/SAnchorItem";
 import { STextItem } from "./items/STextItem";
 import { SImageShowType } from "./enums/SImageShowType";
+import { SLineStyle } from "./enums/SLineStyle";
 
 export {
     SGraphItem,
@@ -60,5 +61,6 @@ export {
     SObjectItem,
     SAnchorItem,
     STextItem,
-    SImageShowType
+    SImageShowType,
+    SLineStyle
 };

+ 2 - 2
saga-web-graph/src/items/SImageItem.ts

@@ -79,9 +79,9 @@ export class SImageItem extends SObjectItem {
     onDraw(painter: SPainter): void {
         if (this.img) {
             // 要绘制图片的宽度
-            let width = 0;
+            let width: number = 0;
             // 要绘制图片的宽度
-            let height = 0;
+            let height: number = 0;
             // 图片item的宽高比
             let itemAspectRatio: number = this.width / this.height;
             // 原始图片的宽高比

+ 52 - 24
saga-web-graph/src/items/STextItem.ts

@@ -1,6 +1,7 @@
 import { SObjectItem } from "./SObjectItem";
 import { SPainter, SRect, SColor, SFont } from "@saga-web/draw/lib";
 import { SGraphItem } from "../SGraphItem";
+import { SLineStyle } from "../enums/SLineStyle";
 
 /**
  * 文本item
@@ -38,6 +39,46 @@ export class STextItem extends SObjectItem {
         this.update();
     }
 
+    /** 背景色 */
+    private _backgroundColor: string = "#00000000";
+    get backgroundColor(): string {
+        return this._backgroundColor;
+    }
+    set backgroundColor(v: string) {
+        this._backgroundColor = v;
+        this.update();
+    }
+
+    /** 边框宽度 */
+    private _borderWidth: number = 1;
+    get borderWidth(): number {
+        return this._borderWidth;
+    }
+    set borderWidth(v: number) {
+        this._borderWidth = v;
+        this.update();
+    }
+
+    /** 边框色 */
+    private _borderColor: string = "#00000000";
+    get borderColor(): string {
+        return this._borderColor;
+    }
+    set borderColor(v: string) {
+        this._borderColor = v;
+        this.update();
+    }
+
+    /** 边框样式    */
+    private _borderStyle: SLineStyle = SLineStyle.Soild;
+    get borderStyle(): SLineStyle {
+        return this._borderStyle;
+    }
+    set borderStyle(v: SLineStyle) {
+        this._borderStyle = v;
+        this.update();
+    }
+
     /** 文本绘制最大宽 */
     maxWidth: number | undefined = undefined;
 
@@ -64,39 +105,26 @@ export class STextItem extends SObjectItem {
     } // Function boundingRect()
 
     /**
-     * 绘制编辑和创建状态文本Item
+     * 绘制显示状态文本Item
      *
      * @param painter    绘制类
      */
-    protected drawEditText(painter: SPainter): void {
-        //绘制文本
-        painter.brush.color = new SColor(this.color);
-        painter.font = this.font;
-        this.drawFormatText(painter);
-
+    protected drawShowText(painter: SPainter): void {
         //绘制矩形轮廓
-        painter.brush.color = SColor.Transparent;
-        painter.pen.color = new SColor("#17B8EA");
-        painter.pen.lineDash = [3, 2];
-        painter.pen.lineWidth = painter.toPx(1);
+        painter.brush.color = this.backgroundColor;
+        painter.pen.color = this.borderColor;
+        painter.pen.lineWidth = painter.toPx(this.borderWidth);
+        if (this.borderStyle == SLineStyle.Dashed) {
+            painter.pen.lineDash = [painter.toPx(this.borderWidth * 3), painter.toPx(this.borderWidth * 7)];
+        } else if (this.borderStyle == SLineStyle.Dotted) {
+            painter.pen.lineDash = [painter.toPx(this.borderWidth), painter.toPx(this.borderWidth)];
+        }
         painter.drawRect(this.boundingRect());
-    } // Function drawEditText()
 
-    /**
-     * 绘制显示状态文本Item
-     *
-     * @param painter    绘制类
-     */
-    protected drawShowText(painter: SPainter): void {
-        // 绘制文本
+        //绘制文本
         painter.brush.color = new SColor(this.color);
         painter.font = this.font;
         this.drawFormatText(painter);
-
-        // 绘制矩形轮廓
-        painter.brush.color = SColor.Transparent;
-        painter.pen.color = SColor.Transparent;
-        painter.drawRect(this.boundingRect());
     } // Function drawShowText()
 
     /**