文本

persagy-web-big-edit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/big-edit",
-    "version": "2.2.38",
+    "version": "2.2.40",
     "description": "博锐尚格二维图形编辑器。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -40,7 +40,7 @@
         "typescript": "^3.5.3"
     },
     "dependencies": {
-        "@persagy-web/edit": "2.2.31",
+        "@persagy-web/edit": "2.2.33",
         "@types/uuid": "^8.0.0",
         "crypto-js": "^4.0.0",
         "axios": "^0.20.0"

persagy-web-big/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/big",
-    "version": "2.2.58",
+    "version": "2.2.60",
     "description": "博锐尚格建筑信息化库",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -41,7 +41,7 @@
         "typescript": "^3.9.3"
     },
     "dependencies": {
-        "@persagy-web/graph": "2.2.49",
+        "@persagy-web/graph": "2.2.51",
         "axios": "^0.18.0",
         "pako": "^1.0.10",
         "crypto-js": "^4.0.0",

persagy-web-draw/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/draw",
-    "version": "2.2.15",
+    "version": "2.2.16",
     "description": "博锐尚格绘制引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",

persagy-web-draw/src/SFont.ts

@@ -27,6 +27,7 @@
 import { STextAlign } from "./enums/STextAlign";
 import { STextBaseLine } from "./enums/STextBaseLine";
 import { STextDirection } from "./enums/STextDirection";
+import { SFontStyle } from "./types/SFontStyle";
 
 /**
  * 字体
@@ -48,6 +49,12 @@ export class SFont {
     /** 文本方向 */
     textDirection = STextDirection.Inherit;
 
+    /** 文本样式 */
+    style = SFontStyle.Normal;
+
+    /** 字体的粗细 */
+    weight: number | string = "normal";
+
     /**
      * 构造函数
      */
@@ -87,7 +94,10 @@ export class SFont {
             this.textAlign = name.textAlign;
             // this.textBaseLine = name.textBaseLine;
             this.textDirection = name.textDirection;
-        } else { // 重载  constructor(name: string, size?: number);
+            this.style = name.style;
+            this.weight = name.weight;
+        } else {
+            // 重载  constructor(name: string, size?: number);
             this.name = name;
             this.size = size != undefined ? size : 16;
         }

persagy-web-draw/src/engines/SCanvasPaintEngine.ts

@@ -380,7 +380,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param font  字体
      */
     changeFont(font: SFont): void {
-        this._canvas.font = `${font.size}px ${font.name}`;
+        this._canvas.font = `${font.weight} ${font.size}px ${font.name}`;
         this.setTextAlign(font.textAlign);
         this.setBaseLine(font.textBaseLine);
         this.setTextDirection(font.textDirection);
@@ -534,7 +534,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * 设置字体
      */
     private setFont(): void {
-        this._canvas.font = `${this.state.font.size}px ${this.state.font.name}`;
+        this._canvas.font = `${this.state.font.weight} ${this.state.font.size}px ${this.state.font.name}`;
         this.setTextAlign(this.state.font.textAlign);
         this.setBaseLine(this.state.font.textBaseLine);
         this.setTextDirection(this.state.font.textDirection);
@@ -574,20 +574,28 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param value     对齐方式
      */
     private setBaseLine(value: STextBaseLine): void {
+        // 没有传入类型
         if (value == undefined) {
             return;
         }
+
+        // 类型为文本基线是普通的字母基线
         if (value == STextBaseLine.Alphabetic) {
             this._canvas.textBaseline = "alphabetic";
         } else if (value == STextBaseLine.Top) {
+            // 文本基线是 em 方框的顶端
             this._canvas.textBaseline = "top";
         } else if (value == STextBaseLine.Hanging) {
+            // 文本基线是悬挂基线
             this._canvas.textBaseline = "hanging";
         } else if (value == STextBaseLine.Middle) {
+            // 文本基线是 em 方框的正中
             this._canvas.textBaseline = "middle";
         } else if (value == STextBaseLine.Ideographic) {
+            // 文本基线是表意基线
             this._canvas.textBaseline = "ideographic";
         } else {
+            // 文本基线是 em 方框的底端
             this._canvas.textBaseline = "bottom";
         }
     }
@@ -598,14 +606,18 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param value     文本方向
      */
     private setTextDirection(value: STextDirection): void {
+        // 没有传入类型
         if (value == undefined) {
             return;
         }
+        // 默认
         if (value == STextDirection.Inherit) {
             this._canvas.direction = "inherit";
         } else if (value == STextDirection.LTR) {
+            // 文本方向从左向右
             this._canvas.direction = "ltr";
         } else {
+            // 文本方向从右向左
             this._canvas.direction = "rtl";
         }
     }
@@ -629,6 +641,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
      *
      */
     setClip(): void {
+        // 存有裁剪路劲
         if (this.state.clip) {
             this.drawWay(this.state.clip);
             this._canvas.clip();

persagy-web-draw/src/types/SFontStyle.ts

@@ -0,0 +1,39 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2021.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+/**
+ * 字体样式
+ *
+ * @author 郝建龙 <haojianlong@sagacloud.cn>
+ */
+export enum SFontStyle {
+    /** 标准的字体样式, 对应 canvas 中 'normal' */
+    Normal,
+    /** 斜体字体样式, 对应 canvas 中 'italic' */
+    Italic,
+    /** 倾斜的字体样式, 对应 canvas 中 'oblique' */
+    Oblique
+}

persagy-web-edit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/edit",
-    "version": "2.2.31",
+    "version": "2.2.33",
     "description": "博锐尚格二维图形编辑器。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -40,7 +40,7 @@
         "typescript": "^3.5.3"
     },
     "dependencies": {
-        "@persagy-web/big": "2.2.58",
+        "@persagy-web/big": "2.2.60",
         "@types/uuid": "^8.0.0"
     }
 }

persagy-web-edit/src/items/SBaseTextEdit.ts

@@ -465,7 +465,7 @@ export class SBaseTextEdit extends SGraphEdit {
      *
      * @param painter       绘画类
      */
-    onDraw(painter: SPainter): void {
+    onTopDraw(painter: SPainter): void {
         // 设置了绘制对象
         if (!(this._painter instanceof SPainter)) {
             this._painter = painter;

persagy-web-graph/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/graph",
-    "version": "2.2.49",
+    "version": "2.2.51",
     "description": "博锐尚格二维图形引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -40,7 +40,7 @@
         "typescript": "^3.5.3"
     },
     "dependencies": {
-        "@persagy-web/draw": "2.2.15",
+        "@persagy-web/draw": "2.2.16",
         "@types/uuid": "^8.0.0"
     }
 }

persagy-web-graph/src/SGraphItem.ts

@@ -831,4 +831,56 @@ export class SGraphItem extends SObject {
         }
         return true;
     }
+
+    /**
+     * 绘制顶层
+     *
+     * @param painter   绘制对象
+     * @param rect      绘制区域
+     */
+    onTopPaint(painter: SPainter, rect: SRect): void {
+        this.onTopDraw(painter);
+        for (let item of this.children) {
+            // 如果 item 不可见
+            if (!item.visible) {
+                continue;
+            }
+            // item 所占矩阵与要刷新的矩阵相交则刷新,否则不刷
+            // if (item.boundingRect()--rect){
+            //
+            // }
+
+            // 保存画布状态
+            painter.save();
+            try {
+                // item 位移到指定位置绘制
+                painter.translate(item.x, item.y);
+                painter.scale(item.scale, item.scale);
+                painter.rotate(item.rotate);
+                // painter.globalAlpha = item.globalAlpha;
+
+                // 如果不进行变形处理，则取消 painter 的变型操作
+                if (!item.isTransform) {
+                    let matrix = painter.worldTransform;
+                    item._inverseScale = 1.0 / matrix.a;
+                    painter.scale(item._inverseScale, item._inverseScale);
+                }
+
+                // rect 调整  宽度高度取最小值  根据 pos 位移
+                // 绘制 item
+                item.onTopPaint(painter, rect);
+            } catch (e) {
+                console.log(e);
+            }
+            // 恢复画布状态
+            painter.restore();
+        }
+    }
+
+    /**
+     * Item 绘制操作
+     *
+     * @param painter   绘制对象
+     */
+    onTopDraw(painter: SPainter): void {}
 }

persagy-web-graph/src/SGraphScene.ts

@@ -85,6 +85,16 @@ export class SGraphScene extends SObject {
     }
 
     /**
+     * 绘制场景
+     *
+     * @param painter     绘制对象
+     * @param rect        更新绘制区域
+     */
+    drawTop(painter: SPainter, rect: SRect): void {
+        this.root.onTopPaint(painter, rect);
+    }
+
+    /**
      * 绘制背景
      *
      * @param painter     绘制对象

persagy-web-graph/src/SGraphView.ts

@@ -371,6 +371,14 @@ export class SGraphView extends SCanvasView {
         this.scene.drawScene(painter, new SRect());
         painter.restore();
 
+        // 绘制顶层
+        painter.save();
+        painter.translate(this.origin.x, this.origin.y);
+        painter.scale(this.scale, this.scale);
+        painter.rotate(this.rotate);
+        this.scene.drawTop(painter, new SRect());
+        painter.restore();
+
         // 绘制前景
         painter.save();
         this.drawForeground(painter);

persagy-web-graph/src/items/STextItem.ts

@@ -256,7 +256,7 @@ export class STextItem extends SObjectItem {
      *
      * @param painter   绘画对象
      */
-    onDraw(painter: SPainter): void {
+    onTopDraw(painter: SPainter): void {
         if (!(this._painter instanceof SPainter)) {
             this._painter = painter;
             this.drawFormatText();