feat: update 更新demo

01-底图尺寸转换.md

-# 图片尺寸“是怎么转换”的
-
-1. 原图尺寸
-  - 
\ No newline at end of file

docs.md

-帮助我设计一个基于leafer-ui的画布编辑器
-这是一个需要渲染一个底图,然后可以使用框选工具,在页面上框选一个区域,然后对这个区域进行一些标识,让用户使用时根据区域和信息进行业务互动
-1. 请看src/api目录,有一个pageinfo.json,里面有底图,marklist.json是框选的数据
-top,bottom是定位信息,里面的值是
\ No newline at end of file

package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "@leafer-in/editor": "^1.9.2",
     "@leafer-in/export": "^1.9.2",
+    "@leafer-in/find": "^1.9.4",
+    "@leafer-in/flow": "^1.9.4",
     "@leafer-in/resize": "^1.9.2",
     "@leafer-in/state": "^1.9.2",
     "@leafer-in/view": "^1.9.2",
@@ -19,6 +21,9 @@
     "element-ui": "^2.15.14",
     "konva": "^9.3.22",
     "leafer-ui": "^1.9.2",
+    "leafer-x-easy-snap": "^1.10.0",
+    "leafer-x-ruler": "^2.0.0",
+    "leafer-x-tooltip-canvas": "^1.0.1",
     "lodash": "^4.17.21",
     "vue": "^2.6.14",
     "vue-konva": "^3.2.2"

pnpm-lock.yaml

@@ -14,6 +14,12 @@ importers:
       '@leafer-in/export':
         specifier: ^1.9.2
         version: 1.9.2(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2)
+      '@leafer-in/find':
+        specifier: ^1.9.4
+        version: 1.9.4(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2)
+      '@leafer-in/flow':
+        specifier: ^1.9.4
+        version: 1.9.4(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-in/resize@1.9.2(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2)
       '@leafer-in/resize':
         specifier: ^1.9.2
         version: 1.9.2(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2)
@@ -41,6 +47,15 @@ importers:
       leafer-ui:
         specifier: ^1.9.2
         version: 1.9.2
+      leafer-x-easy-snap:
+        specifier: ^1.10.0
+        version: 1.10.0
+      leafer-x-ruler:
+        specifier: ^2.0.0
+        version: 2.0.0(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-in/resize@1.9.2(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2))(@leafer-ui/draw@1.9.2)
+      leafer-x-tooltip-canvas:
+        specifier: ^1.0.1
+        version: 1.0.1(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-in/resize@1.9.2(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2)
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -686,6 +701,21 @@ packages:
       '@leafer-ui/draw': ^1.9.2
       '@leafer-ui/interface': ^1.9.2
 
+  '@leafer-in/find@1.9.4':
+    resolution: {integrity: sha512-qmGCYPrQ/s3No08/WFWq9C9WI2FcyBJGuM08a1Drr5VAnTHZ5L97FLs1yfZbFou3ehni137Fwx9b7PyqzkkLJg==}
+    peerDependencies:
+      '@leafer-in/interface': ^1.9.4
+      '@leafer-ui/draw': ^1.9.4
+      '@leafer-ui/interface': ^1.9.4
+
+  '@leafer-in/flow@1.9.4':
+    resolution: {integrity: sha512-0gTkBHqt2IZ6QcvgLSIx8x7LBJ3mQ12doyBpU8Ase54E3q5nqt+ErlM4SBQNuOSTEUzvplYAXVXXv4AHEeh/jA==}
+    peerDependencies:
+      '@leafer-in/interface': ^1.9.4
+      '@leafer-in/resize': ^1.9.4
+      '@leafer-ui/draw': ^1.9.4
+      '@leafer-ui/interface': ^1.9.4
+
   '@leafer-in/interface@1.9.2':
     resolution: {integrity: sha512-XjumeGJpRpPyZR+20vYKkcY7lGXiOkZk5kWHkaqG5Sq/gVj5nwXcZFn6ruEPXTOx7vwmt7H/hLOWoFH4mSCfhg==}
     peerDependencies:
@@ -2639,6 +2669,15 @@ packages:
   leafer-ui@1.9.2:
     resolution: {integrity: sha512-VlPGCK6eJp0OCLEravau8soK17p2QLy50JdxvqEw6mCSoeE0Jc09plEHeFmMdbD4QkLwUhWO6xVuCrPpAc1xIA==}
 
+  leafer-x-easy-snap@1.10.0:
+    resolution: {integrity: sha512-t2kCKPH2vvkxPxIxngrrEaNbvoTrtON+KxatcGnkEnur/qfAprLfH0EbAt5UUG+Vn0ZRmCj8xuteLT1MnXTL2g==}
+
+  leafer-x-ruler@2.0.0:
+    resolution: {integrity: sha512-4uEtGYS/tOqXc74TzF83tM7zKK7rmPmzEFgmM6halx+tnsaBhsjT4kD/yeRbsPq4eQc85L9ViiDPzymRuxInSw==}
+
+  leafer-x-tooltip-canvas@1.0.1:
+    resolution: {integrity: sha512-brweqF0xZLOYhFGHDX25cW17g0mZz+dtcFF+WsB27PPgjQ0epjNd++2NZLmdFUzl+laYPBBphnxHHR2gowVy+w==}
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -4812,6 +4851,19 @@ snapshots:
       '@leafer-ui/draw': 1.9.2
       '@leafer-ui/interface': 1.9.2
 
+  '@leafer-in/find@1.9.4(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2)':
+    dependencies:
+      '@leafer-in/interface': 1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2)
+      '@leafer-ui/draw': 1.9.2
+      '@leafer-ui/interface': 1.9.2
+
+  '@leafer-in/flow@1.9.4(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-in/resize@1.9.2(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2)':
+    dependencies:
+      '@leafer-in/interface': 1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2)
+      '@leafer-in/resize': 1.9.2(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2)
+      '@leafer-ui/draw': 1.9.2
+      '@leafer-ui/interface': 1.9.2
+
   '@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2)':
     dependencies:
       '@leafer-ui/interface': 1.9.2
@@ -7135,6 +7187,29 @@ snapshots:
       '@leafer/interface': 1.9.2
       '@leafer/partner': 1.9.2
 
+  leafer-x-easy-snap@1.10.0: {}
+
+  leafer-x-ruler@2.0.0(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-in/resize@1.9.2(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2))(@leafer-ui/draw@1.9.2):
+    dependencies:
+      '@leafer-in/editor': 1.9.2(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-in/resize@1.9.2(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2))(@leafer-ui/core@1.9.2)(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2)
+      '@leafer-ui/core': 1.9.2
+      '@leafer-ui/interface': 1.9.2
+    transitivePeerDependencies:
+      - '@leafer-in/interface'
+      - '@leafer-in/resize'
+      - '@leafer-ui/draw'
+
+  leafer-x-tooltip-canvas@1.0.1(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-in/resize@1.9.2(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2):
+    dependencies:
+      '@leafer-in/flow': 1.9.4(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-in/resize@1.9.2(@leafer-in/interface@1.9.2(@leafer-ui/interface@1.9.2)(@leafer/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2))(@leafer-ui/draw@1.9.2)(@leafer-ui/interface@1.9.2)
+      '@leafer-ui/core': 1.9.2
+      leafer-ui: 1.9.2
+    transitivePeerDependencies:
+      - '@leafer-in/interface'
+      - '@leafer-in/resize'
+      - '@leafer-ui/draw'
+      - '@leafer-ui/interface'
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1

src/api/page-point.json

+[
+  {
+    "pageId": 82412,
+    "strokes": "49.007,14.865,1,true,false,1758447403.574;48.901,15.563,1,false,false,1758447403.574;48.774,16.368,0.991,false,false,1758447403.574;48.584,17.257,0.991,false,false,1758447403.574;48.288,18.315,1,false,false,1758447403.72;48.055,19.225,1,false,false,1758447403.72;47.843,20.051,1,false,false,1758447403.72;48.182,17.892,1,false,false,1758447403.72;48.584,16.41,1,false,false,1758447404.354;49.007,15.204,1,false,false,1758447404.354;50.616,19.12,1,false,false,1758447404.354;50.785,20.241,1,false,false,1758447404.354;50.701,20.114,1,false,false,1758447404.354;50.637,19.839,1,false,false,1758447404.354;50.468,19.585,1,false,false,1758447404.354;50.468,19.585,1,false,false,1758447404.354;-3,-3,0,false,true,0;",
+    "isSaved": false,
+    "isDraw": false
+  },
+  {
+    "pageId": 82412,
+    "strokes": "53.029,15.246,0.906,true,false,1758447405.719;53.029,15.331,0.929,false,false,1758447405.719;53.093,16.939,0.951,false,false,1758447405.719;53.05,18.103,0.964,false,false,1758447405.719;52.923,19.247,0.964,false,false,1758447405.719;52.902,18.4,0.996,false,false,1758447405.719;53.347,15.775,0.991,false,false,1758447405.719;53.579,15.098,0.987,false,false,1758447405.719;53.77,14.907,0.987,false,false,1758447405.719;53.96,14.865,0.987,false,false,1758447405.915;54.553,14.738,0.991,false,false,1758447405.915;54.807,14.738,0.991,false,false,1758447405.915;55.103,14.823,1,false,false,1758447405.915;55.273,14.886,0.991,false,false,1758447405.915;55.315,14.928,1,false,false,1758447405.915;55.315,14.95,0.991,false,false,1758447405.915;55.315,15.034,0.987,false,false,1758447405.915;55.315,15.182,0.991,false,false,1758447405.915;55.167,15.563,0.991,false,false,1758447406.401;53.812,16.855,1,false,false,1758447406.401;53.601,17.003,1,false,false,1758447406.401;54.066,19.966,1,false,false,1758447406.402;53.41,20.072,1,false,false,1758447406.402;53.262,20.051,1,false,false,1758447406.402;53.093,20.009,1,false,false,1758447406.402;52.881,19.733,0.147,false,false,1758447406.402;52.881,19.733,0.147,false,false,1758447406.402;-3,-3,0,false,true,0;",
+    "isSaved": false,
+    "isDraw": false
+  },
+  {
+    "pageId": 82412,
+    "strokes": "59.421,15.5,0.96,true,false,1758447407.523;59.421,15.415,1,false,false,1758447407.523;59.358,15.246,1,false,false,1758447407.523;59.337,15.204,1,false,false,1758447407.523;59.294,15.204,1,false,false,1758447407.523;59.019,15.267,1,false,false,1758447407.523;58.3,15.521,1,false,false,1758447407.523;58.003,15.69,1,false,false,1758447407.523;57.22,16.579,1,false,false,1758447407.523;56.945,16.939,1,false,false,1758447407.912;58.638,20.284,1,false,false,1758447407.912;59.04,20.157,1,false,false,1758447407.912;59.57,19.776,1,false,false,1758447407.912;59.845,19.31,1,false,false,1758447407.912;60.056,18.908,1,false,false,1758447407.912;60.056,18.908,1,false,false,1758447407.912;-3,-3,0,false,true,0;",
+    "isSaved": false,
+    "isDraw": false
+  },
+  {
+    "pageId": 82412,
+    "strokes": "62.152,17.574,0.969,true,false,1758447409.277;62.046,19.649,0.973,false,false,1758447409.277;61.983,20.834,0.987,false,false,1758447409.277;61.962,20.749,0.987,false,false,1758447409.277;61.856,20.136,0.121,false,false,1758447409.277;61.856,20.136,0.121,false,false,1758447409.277;-3,-3,0,false,true,0;",
+    "isSaved": false,
+    "isDraw": false
+  },
+  {
+    "pageId": 82412,
+    "strokes": "64.099,16.008,0.982,true,false,1758447409.96;64.184,16.156,0.991,false,false,1758447409.96;63.972,19.352,1,false,false,1758447409.96;63.761,19.691,1,false,false,1758447409.96;63.443,20.072,1,false,false,1758447409.96;63.189,20.326,1,false,false,1758447409.96;62.914,20.39,1,false,false,1758447409.96;61.771,20.199,1,false,false,1758447409.96;61.432,20.136,1,false,false,1758447409.96;61.39,20.136,0.138,false,false,1758447409.971;61.39,20.136,0.138,false,false,1758447409.971;-3,-3,0,false,true,0;",
+    "isSaved": false,
+    "isDraw": false
+  },
+  {
+    "pageId": 82412,
+    "strokes": "67.804,15.944,1,true,false,1758447411.52;68.693,16.029,1,false,false,1758447411.52;68.989,15.987,1,false,false,1758447411.52;69.391,15.712,0.946,false,false,1758447411.52;69.243,15.648,0.826,false,false,1758447411.52;68.925,15.733,0.205,false,false,1758447411.52;68.925,15.733,0.205,false,false,1758447411.52;-3,-3,0,false,true,0;",
+    "isSaved": false,
+    "isDraw": false
+  },
+  {
+    "pageId": 82412,
+    "strokes": "67.147,17.49,0.982,true,false,1758447411.813;66.766,22.083,0.996,false,false,1758447411.813;66.788,22.189,1,false,false,1758447411.813;66.809,22.168,1,false,false,1758447411.813;66.83,22.146,1,false,false,1758447411.813;66.872,22.125,1,false,false,1758447411.813;66.999,22.104,1,false,false,1758447411.813;67.444,22.041,1,false,false,1758447411.813;67.952,21.935,1,false,false,1758447411.813;68.523,21.808,1,false,false,1758447411.958;69.243,21.511,1,false,false,1758447411.958;69.476,21.384,1,false,false,1758447411.958;69.582,21.109,0.987,false,false,1758447411.958;69.582,21.109,0.987,false,false,1758447411.958;-3,-3,0,false,true,0;",
+    "isSaved": false,
+    "isDraw": false
+  },
+  {
+    "pageId": 82412,
+    "strokes": "67.02,19.331,0.978,true,false,1758447412.397;68.269,19.268,1,false,false,1758447412.397;69.306,18.971,0.875,false,false,1758447412.397;69.37,18.971,0.129,false,false,1758447412.397;69.37,18.971,0.129,false,false,1758447412.397;-3,-3,0,false,true,0;",
+    "isSaved": false,
+    "isDraw": false
+  },
+  {
+    "pageId": 82412,
+    "strokes": "73.392,15.987,1,true,false,1758447413.761;74.492,16.325,1,false,false,1758447413.761;74.789,16.156,1,false,false,1758447413.761;76.313,15.69,1,false,false,1758447413.761;76.292,15.542,1,false,false,1758447413.761;76.08,15.479,0.978,false,false,1758447413.761;76.08,15.479,0.978,false,false,1758447413.761;-3,-3,0,false,true,0;",
+    "isSaved": false,
+    "isDraw": false
+  },
+  {
+    "pageId": 82412,
+    "strokes": "73.413,16.558,0.973,true,false,1758447414.104;73.392,16.643,0.982,false,false,1758447414.104;73.328,18.527,0.991,false,false,1758447414.104;73.307,21.215,1,false,false,1758447414.104;73.307,21.956,1,false,false,1758447414.104;73.286,22.231,1,false,false,1758447414.104;73.265,22.273,1,false,false,1758447414.105;73.222,21.914,1,false,false,1758447414.105;73.159,19.31,1,false,false,1758447414.105;73.222,18.866,1,false,false,1758447414.494;73.307,18.76,1,false,false,1758447414.494;73.688,18.908,1,false,false,1758447414.494;74.344,18.823,1,false,false,1758447414.494;75.276,18.717,1,false,false,1758447414.494;75.72,18.59,1,false,false,1758447414.494;75.678,18.442,1,false,false,1758447414.494;75.614,18.336,1,false,false,1758447414.494;75.614,18.336,1,false,false,1758447414.494;-3,-3,0,false,true,0;",
+    "isSaved": false,
+    "isDraw": false
+  },
+  {
+    "pageId": 82412,
+    "strokes": "80.123,15.373,1,true,false,1758447416.2;79.191,15.923,1,false,false,1758447416.2;79.001,21.765,1,false,false,1758447416.2;79.086,21.638,1,false,false,1758447416.2;79.953,20.538,1,false,false,1758447416.2;80.292,19.924,1,false,false,1758447416.2;81.308,17.511,1,false,false,1758447416.2;81.266,17.595,1,false,false,1758447416.2;81.223,17.913,1,false,false,1758447416.2;80.991,19.903,1,false,false,1758447416.541;80.885,20.919,1,false,false,1758447416.541;80.991,21.681,1,false,false,1758447416.541;80.969,21.617,1,false,false,1758447416.541;80.779,21.448,0.862,false,false,1758447416.541;80.779,21.448,0.862,false,false,1758447416.541;-3,-3,0,false,true,0;",
+    "isSaved": false,
+    "isDraw": false
+  }
+]