haojianlong %!s(int64=4) %!d(string=hai) anos
pai
achega
f36d99cb4a

BIN=BIN
docs/.vuepress/components/scene/items/1.jpg


+ 31 - 38
docs/.vuepress/components/scene/items/ImageItem.vue

@@ -5,53 +5,46 @@
             <el-button @click="Equivalency">等比缩放</el-button>
             <el-button @click="AutoFit">自适应</el-button>
         </el-row>
-        <canvas id="ImageItem1" width="740" height="400"/>
+        <canvas :id="id" width="740" height="400"/>
     </div>
 </template>
 
-<script>
-    import { SGraphScene, SGraphView, SImageShowType, SImageItem } from "@persagy-web/graph";
+<script lang="ts">
+    import { SGraphScene, SGraphView } from "@persagy-web/graph";
+    import { SGraphSvgItem} from "@persagy-web/graph/lib";
+    import { Component, Vue } from "vue-property-decorator";
+    import { SSize} from "@persagy-web/draw/lib";
+    import { v1 as uuid } from "uuid";
 
-    class SScene extends SGraphScene {
-        imageItem = 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);
+    class Img extends SGraphSvgItem{
+        resize(oldSize:SSize, newSize: SSize) :void {
+            this.width = newSize.width;
+            this.height = newSize.height;
         }
     }
 
-    class ImageView extends SGraphView {
-        constructor() {
-            super("ImageItem1");
-        }
-    }
-
-    export default {
+    @Component
+    export default class ZoneCanvas extends Vue {
+        id: string = uuid();
+        url: string = require('./1.jpg');
         mounted() {
-            let view = new ImageView();
-            view.scene = this.scene;
+            const view = new SGraphView(this.id);
+            const scene = new SGraphScene();
+            const item = new Img(null, {Url: this.url, X: 0, Y: 0, Width: 100, Height: 100});
+            item.selectable = true;
+            view.scene = scene;
+            scene.addItem(item);
             view.fitSceneToView();
-        },
-        data() {
-            return {
-                scene: new SScene(),
-            }
-        },
-        methods: {
-            Full() {
-                this.scene.imageItem.showType = SImageShowType.Full;
-            },
-            Equivalency() {
-                this.scene.imageItem.showType = SImageShowType.Equivalency;
-            },
-            AutoFit() {
-                this.scene.imageItem.showType = SImageShowType.AutoFit;
-            },
-        }
+        };
+        Full() {
+            // this.scene.imageItem.showType = SImageShowType.Full;
+        };
+        Equivalency() {
+            // this.scene.imageItem.showType = SImageShowType.Equivalency;
+        };
+        AutoFit() {
+            // this.scene.imageItem.showType = SImageShowType.AutoFit;
+        };
     }
 </script>
 

+ 1 - 1
docs/guides/format/style.md

@@ -8,7 +8,7 @@
 
 ``` json
 {
-    "default":{
+    "Default":{
         "Stroke": "SColor",
         "Fill": "SColor | Gradient",
         "LineWidth": "number",