Prechádzať zdrojové kódy

更新simgtext,包版本

haojianlong 4 rokov pred
rodič
commit
008e38d4ea

+ 3 - 3
docs/.vuepress/components/example/web/graph/DrawLine1.vue

@@ -43,12 +43,12 @@
 
             canvas.pen.color = new SColor('#03a9f4');
             canvas.pen.lineWidth = 5;
-            canvas.drawLine(400, 50, 700, 50);
+            canvas.drawLine(450, 50, 700, 50);
             canvas.pen.lineWidth = 3;
-            canvas.pen.dashOffset = new Date().getTime()/50%60;
+            canvas.pen.dashOffset = new Date().getTime()/50%80;
             canvas.pen.lineDash = [30,50];
             canvas.pen.color = SColor.White;
-            canvas.drawLine(400, 50, 700, 50);
+            canvas.drawLine(450, 50, 700, 50);
             this.update();
         }
     }

+ 103 - 39
docs/.vuepress/components/example/web/graph/scene/SImgTextItem.vue

@@ -1,15 +1,14 @@
-import {SItemStatus} from "@saga-web/big/lib";
 <template>
     <div>
-        <el-input v-model="input" placeholder="请输入内容"></el-input>
-        <el-button @click="change">00000</el-button>
+        <el-button @click="changemaodian">切换锚点显示状态</el-button>
+        <el-button @click="changetext">切换文本显示状态</el-button>
         <canvas id="editPolygon" width="740" height="400" tabindex="0"></canvas>
     </div>
 </template>
 
 <script lang="ts">
     import {SGraphItem, SGraphScene, SGraphView} from "@saga-web/graph/lib";
-    import {SImageItem, SItemStatus, SObjectItem, STextItem} from "@saga-web/big/lib";
+    import {SAnchorItem, SImageItem, SItemStatus, SObjectItem, STextItem} from "@saga-web/big/lib";
     import {SColor, SPainter, SRect, SSize, STextBaseLine} from "@saga-web/draw/lib";
     import {SMouseEvent} from "@saga-web/base/lib";
 
@@ -17,35 +16,62 @@ import {SItemStatus} from "@saga-web/big/lib";
      * 图例item  icon
      *
      * */
-    class SImgTextItem extends SObjectItem{
+    class SImgTextItem extends SObjectItem {
 
         /** item状态  */
-        _status:SItemStatus = SItemStatus.Create;
-        get status():SItemStatus{
+        _status: SItemStatus = SItemStatus.Normal;
+        get status(): SItemStatus {
             return this._status;
         }
-        set status(v:SItemStatus){
+        set status(v: SItemStatus) {
             this._status = v;
             this.update();
         }
 
         /** 是否显示文字  */
-        _showText:boolean = true;
-        get showText():boolean{
+        _showText: boolean = true;
+        get showText(): boolean {
             return this._showText;
         }
-        set showText(v:boolean){
+        set showText(v: boolean) {
             if (v === this._showText) {
                 return
             }
             this._showText = v;
-            if (v) {
-                this.textItem.show();
-            } else {
-                this.textItem.hide();
-            }
+            this.textItem.visible = v;
+        }
+
+        /** 是否显示锚点  */
+        _showAnchor: boolean = false;
+        get showAnchor():boolean{
+            return this._showAnchor;
+        }
+        set showAnchor(v:boolean){
+            this._showAnchor = v;
+            this.anchorList.forEach(t => {
+                t.visible = v;
+            })
         }
 
+        /** X轴坐标 */
+        get x(): number {
+            return this.pos.x;
+        } // Get x
+        set x(v: number) {
+            this.pos.x = v;
+            this.$emit("changePos");
+            this.update();
+        } // Set x
+        /** Y轴坐标 */
+        get y(): number {
+            return this.pos.y;
+        } // Get y
+        set y(v: number) {
+            this.pos.y = v;
+            this.$emit("changePos");
+            this.update();
+        } // Set y
+
         /** img Item    */
         img: SImageItem = new SImageItem(this);
 
@@ -56,20 +82,51 @@ import {SItemStatus} from "@saga-web/big/lib";
          * 构造体
          *
          * */
-        constructor(parent:SGraphItem|null){
+        constructor(parent: SGraphItem | null) {
             super(parent);
             this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
-            setTimeout(() => {
-                this.img.width = 28;
-                this.img.height = 28;
-                this.update();
-            },1000);
-            this.img.isTransform = true;
-            this.textItem.text = `图例item示例`;
-            this.textItem.moveTo(16,0);
-            this.textItem.font.textBaseLine = STextBaseLine.Middle;
+            this.img.width = 32;
+            this.img.height = 32;
+            let anchorPoint = [{ x: 0, y: this.img.height / 2 }, { x: 0, y: -this.img.height / 2 }, { x: -this.img.width / 2, y: 0 }, { x: this.img.width / 2, y: 0 }];
+            this.anchorList = anchorPoint.map(t => {
+                let item = new SAnchorItem(this);
+                item.moveTo(t.x, t.y);
+                return item;
+            });
+            this.update();
+            this.textItem.text = "请填写文本";
+            this.textItem.moveTo(16, -6);
+            this.moveable = true;
+            this.selectable = true;
+        }
+
+        onMouseEnter(event: SMouseEvent): boolean {
+            this.showAnchor = true;
+            return true;
+        }
+
+        onMouseLeave(event: SMouseEvent): boolean {
+            this.showAnchor = false;
+            return true;
         }
 
+        onMouseMove(event: SMouseEvent): boolean {
+            return super.onMouseMove(event);
+        }
+
+        /**
+         * 鼠标按下事件
+         *
+         * */
+        onMouseDown(event: SMouseEvent): boolean {
+            if (this.status == SItemStatus.Normal) {
+                return super.onMouseDown(event);
+            } else if (this.status == SItemStatus.Edit) {
+                return super.onMouseDown(event);
+            }
+            return true;
+        } // Function onMouseDown()
+
         /**
          * 宽高发发生变化
          *
@@ -98,9 +155,13 @@ import {SItemStatus} from "@saga-web/big/lib";
          * @return  SRect   所有子对象的并集
          * */
         boundingRect(): SRect {
-            let rect = new SRect();
+            let rect :SRect = new SRect();
             this.children.forEach(t => {
-                rect = rect.unioned(t.boundingRect());
+                if (rect.isNull()) {
+                    rect = t.boundingRect().adjusted(t.pos.x,t.pos.y,0,0);
+                } else {
+                    rect = rect.unioned(t.boundingRect().adjusted(t.pos.x,t.pos.y,0,0));
+                }
             });
             return rect;
         } // Function boundingRect()
@@ -114,14 +175,11 @@ import {SItemStatus} from "@saga-web/big/lib";
             painter.pen.lineWidth = painter.toPx(1);
             painter.pen.color = new SColor("#00FF00");
             painter.brush.color = SColor.Transparent;
-            painter.drawRect(this.boundingRect());
-            super.onDraw(painter);
-
-            if (this.status == SItemStatus.Edit) {
-                this.anchorList.forEach(t => {
-
-                })
+            if (this.showAnchor) {
+                painter.brush.color = SColor.Gray
             }
+            painter.drawRect(this.boundingRect());
+            // super.onDraw(painter);
         } // Function onDraw()
     }
 
@@ -144,14 +202,20 @@ import {SItemStatus} from "@saga-web/big/lib";
         },
         methods:{
             init(){
-                const item = new SImgTextItem(null);
-                item.moveable = true;
+                this.item = new SImgTextItem(null);
+                this.item.moveable = true;
 
-                this.scene.addItem(item);
-                this.view.fitSceneToView();
+                this.scene.addItem(this.item);
+                // this.view.fitSceneToView();
             },
             change() {
 
+            },
+            changemaodian(){
+                this.item.showAnchor = !this.item.showAnchor;
+            },
+            changetext(){
+                this.item.showText = !this.item.showText;
             }
         }
     }

+ 2 - 2
package.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@saga-web/base": "^2.1.9",
-    "@saga-web/big": "^1.0.17",
+    "@saga-web/big": "^1.0.24",
     "@saga-web/draw": "^2.1.84",
-    "@saga-web/graph": "^2.1.66",
+    "@saga-web/graph": "^2.1.68",
     "@saga-web/feng-map": "1.0.6",
     "axios": "^0.18.1",
     "element-ui": "^2.12.0",