Explorar el Código

修改图片示例

zhangyu hace 5 años
padre
commit
6562c3def9
Se han modificado 2 ficheros con 22 adiciones y 64 borrados
  1. 21 63
      docs/.vuepress/components/example/web/graph/scene/ImageItem.vue
  2. 1 1
      package.json

+ 21 - 63
docs/.vuepress/components/example/web/graph/scene/ImageItem.vue

@@ -1,78 +1,29 @@
 <template>
     <div>
         <el-row>
-            <el-button @click="undo">Undo</el-button>
-            <el-button @click="redo">Redo</el-button>
-            <el-button @click="reset">Reset</el-button>
+            <el-button @click="Full">铺满</el-button>
+            <el-button @click="Equivalency">等比缩放</el-button>
+            <el-button @click="AutoFit">自适应</el-button>
         </el-row>
-        <canvas id="imageItem1" width="740" height="400" tabindex="0"/>
+        <canvas id="ImageItem1" width="740" height="400"/>
     </div>
 </template>
 
 <script lang="ts">
-    import { SUndoStack } from "@saga-web/base";
-    import { SGraphItem, SGraphScene, SGraphView, SGraphPropertyCommand, SGraphMoveCommand } from "@saga-web/graph";
-    import { SPoint, SPainter } from "@saga-web/draw/lib";
-    import { SObjectItem } from "@saga-web/big/lib";
-
-    /**
-     * 图片item
-     *
-     * @author  张宇(taohuzy@163.com)
-     */
-    class SImageItem extends SObjectItem {
-
-        /**
-         * Item绘制操作
-         *
-         * @param   painter      绘画类
-         */
-        onDraw(painter: SPainter): void {
-            console.log('draw');
-        } // Function onDraw()
-    }// Class SImageItem
+    import { SGraphScene, SGraphView } from "@saga-web/graph";
+    import { SImageItem } from "@saga-web/big/lib";
+    import { SImageShowType } from "@saga-web/big/lib/enums/SImageShowType";
 
     class SScene extends SGraphScene {
-        undoStack = new SUndoStack();
         imageItem: SImageItem = new SImageItem(null);
-
         constructor() {
             super();
+            this.imageItem.moveable = true;
+            this.imageItem.width = 400;
+            this.imageItem.height = 300;
+            this.imageItem.url = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
             this.addItem(this.imageItem);
-            this.grabItem = this.imageItem;
-            this.imageItem.connect("onMove", this, this.onItemMove.bind(this));
-        }
-
-        updateText(str: string): void {
-            if (this.imageItem.text !== str) {
-                let old = this.imageItem.text;
-                this.imageItem.text = str;
-                this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "text", old, str));
-            }
         }
-
-        updateColor(color: string): void {
-            if (this.imageItem.color !== color) {
-                let old = this.imageItem.color;
-                this.imageItem.color = color;
-                this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "color", old, color));
-            }
-        }
-
-        updateSize(size: number): void {
-            if (this.imageItem.font.size !== size) {
-                let old = new SFont(this.imageItem.font);
-                let font = new SFont(this.imageItem.font);
-                font.size = size;
-                this.imageItem.font = font;
-                this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "font", old, font));
-            }
-        }
-
-        onItemMove(item: SGraphItem, ...arg: any): void {
-            this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
-        }
-
     }
 
     class ImageView extends SGraphView {
@@ -85,6 +36,7 @@
         mounted(): void {
             let view = new ImageView();
             view.scene = this.scene;
+            view.fitSceneToView();
         },
         data() {
             return {
@@ -92,9 +44,15 @@
             }
         },
         methods: {
-            undo() {},
-            redo() {},
-            reset() {},
+            Full() {
+                this.scene.imageItem.showType = SImageShowType.Full;
+            },
+            Equivalency() {
+                this.scene.imageItem.showType = SImageShowType.Equivalency;
+            },
+            AutoFit() {
+                this.scene.imageItem.showType = SImageShowType.AutoFit;
+            },
         }
     }
 </script>

+ 1 - 1
package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@saga-web/base": "^2.1.9",
-    "@saga-web/big": "^1.0.21",
+    "@saga-web/big": "^1.0.24",
     "@saga-web/draw": "^2.1.84",
     "@saga-web/graph": "^2.1.67",
     "@saga-web/feng-map": "1.0.6",