Parcourir la source

svgitem修改

haojianlong il y a 4 ans
Parent
commit
3fc9167bfe

+ 1 - 2
docs/.vuepress/components/scene/items/polygon.vue

@@ -18,7 +18,7 @@
                 time: Date.now(),
                 rectData: {
                     Outline: [
-                        [{X:0,Y:0},{X:0,Y:-1000},{X:700,Y:-1500},{X:500,Y:-1000},{X:200,Y:0}]
+                        [{X:0,Y:0},{X:0,Y:1000},{X:700,Y:1500},{X:500,Y:1000},{X:200,Y:0}]
                     ],
                     Style: {
                         "Default":{
@@ -48,7 +48,6 @@
         },
         methods:{
             init(){
-                console.log(this.time);
                 this.view = new SGraphView(`polygon${this.time}`);
                 const scene = new SGraphScene();
 

+ 10 - 31
docs/.vuepress/components/scene/items/svg.vue

@@ -5,34 +5,7 @@
 </template>
 
 <script>
-    import {SGraphScene, SGraphShape, SGraphView} from "@persagy-web/graph/lib";
-    import {SRect} from "@persagy-web/draw/lib";
-
-    class SGraphSvgItem extends SGraphShape{
-
-        constructor(parent, data) {
-            super(parent, data.Style);
-            this.img = new Image();
-            this.img.src = data.Url;
-            this.img.onload = e => {
-                console.log(e);
-                console.log('---------------');
-                // this.width =
-                this.update()
-            };
-            this.img.onerror = err => {
-                console.log(err)
-            };
-        }
-
-        boundingRect() {
-            return new SRect(0,0,100,100)
-        }
-
-        onDraw(painter) {
-            painter.drawImage(this.img, 0, 0, 100, 100)
-        }
-    }
+    import {SGraphScene, SGraphView, SGraphSvgItem} from "@persagy-web/graph/lib";
 
     export default {
         name: "svgCanvas",
@@ -40,6 +13,14 @@
             return{
                 id: 'svg' + Date.now(),
                 view: '',
+                svgData:{
+                    // https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg
+                    Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg',
+                    X: 100,
+                    Y: 100,
+                    Width: 200,
+                    Height: 200
+                }
             }
         },
         mounted() {
@@ -50,9 +31,7 @@
                 this.view = new SGraphView(this.id);
                 const scene = new SGraphScene();
                 this.view.scene = scene;
-                // https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg
-                // https://cdn-img.easyicon.net/image/2019/panda-search.svg
-                const item = new SGraphSvgItem(null, { Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg'});
+                const item = new SGraphSvgItem(null, this.svgData);
                 scene.addItem(item);
                 this.view.fitSceneToView();
             }

+ 2 - 2
docs/guides/format/systemJson.md

@@ -98,14 +98,14 @@
         {
             ID: '',                             // ID
             Name: '',                           // 名称
-            GraphElementId: '',                 // 对应的图ID
+            GraphElementId: '',                 // 对应的图ID
             Node1ID: '',                        // 关联节点1_id
             Node2ID: '',                        // 关联节点2_id
             Anchor1ID: '',                      // 关联锚点1_id
             Anchor2ID: '',                      // 关联锚点2_id
             Dir: 0,                             // 方向(0:无向,1:节点1到节点2,2:节点2到节点1)
             LineType: '',                       // 直线(Line),水平垂直
-            PointList: [],                      // 线的顶点坐标
+            PointList: [{X:0,Y:0,Z:0},...],     // 线的顶点坐标
             Style: {}                           // 线的绘图样式
         },
         ...

+ 19 - 0
docs/guides/scene/items/svg.md

@@ -3,5 +3,24 @@
 ::: details 目录
 [[toc]]
 :::
+## item 实例
+
+<GitCode fileUrl="/persagy-web-graph/src/items/SGraphSvgItem.ts" />
 
 <scene-items-svg />
+
+
+::: details 查看代码使用
+<<< @/docs/.vuepress/components/scene/items/svg.vue
+:::
+
+示例中展示了传入``` SGraphSvgItem ```的数据格式
+```json5
+{
+    Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg',    // svg 图片的路径
+    X: 100, // 该 item 的位置 x 坐标
+    Y: 100, // 该 item 的位置 y 坐标                                                                  
+    Width: 200, // 该 item 宽
+    Height: 200 // 该 item 高
+}
+```

+ 2 - 2
package.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/big": "2.2.5",
+    "@persagy-web/big": "2.2.6",
     "@persagy-web/draw": "2.2.4",
-    "@persagy-web/graph": "2.2.7",
+    "@persagy-web/graph": "2.2.8",
     "axios": "^0.19.2",
     "element-ui": "^2.12.0",
     "vue": "^2.6.10",