fl-web-component 1.4.7 → 1.4.9-beta.0

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-2e0d2de9]{width:100%;height:100%;cursor:pointer}[data-v-2e0d2de9] .tips-label{width:60px;color:#000;font:12px Helvetica;margin-top:-3em;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-2e0d2de9] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;-webkit-box-shadow:0 1px 3px 1px rgba(0,0,0,.25);box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-2e0d2de9] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-2e0d2de9] .measure-label-font{word-break:break-all}[data-v-2e0d2de9] .mark-label-img{padding-top:5px;width:20px;height:20px}.lil-gui{background:hsla(0,0%,100%,.95)!important;border:1px solid #e0e0e0!important;border-radius:8px!important;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.15)!important;box-shadow:0 4px 12px rgba(0,0,0,.15)!important;backdrop-filter:blur(10px)!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}.lil-gui .title{background:linear-gradient(135deg,#f8f9fa,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important;font-weight:600!important;padding:0 12px!important;border-radius:8px 8px 0 0!important}.lil-gui .controller{border-bottom:1px solid #f1f3f4!important;background:transparent!important}.lil-gui .controller:last-child{border-bottom:none!important}.lil-gui .controller .name{color:#495057!important;font-weight:500!important;font-size:12px!important}.lil-gui .controller .widget{background:#f8f9fa!important;border:1px solid #ced4da!important;border-radius:4px!important;color:#495057!important}.lil-gui .controller .widget:focus,.lil-gui .controller .widget:hover{border-color:#80bdff!important;-webkit-box-shadow:0 0 0 2px rgba(0,123,255,.25)!important;box-shadow:0 0 0 2px rgba(0,123,255,.25)!important}.lil-gui .controller .widget:focus{outline:none!important}.lil-gui .controller input[type=range]{background:#e9ecef!important;height:4px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-radius:2px!important}.lil-gui .controller.number .fill{border-right:solid #008de9}.lil-gui .controller input[type=range]::-webkit-slider-thumb{background:#007bff!important;border:2px solid #fff!important;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2)!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;-webkit-appearance:none!important;appearance:none!important;cursor:pointer!important}.lil-gui .controller input[type=range]::-moz-range-thumb{background:#007bff!important;border:2px solid #fff!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;cursor:pointer!important}.lil-gui .controller .option{background:#fff!important;color:#495057!important;border-bottom:1px solid #f1f3f4!important}.lil-gui .controller .option:hover{background:#f8f9fa!important}.lil-gui .controller .option:last-child{border-bottom:none!important}.lil-gui input:active{background:#e6eff4}.lil-gui .controller button{background:linear-gradient(135deg,#007bff,#0056b3)!important;color:#fff!important;border:none!important;border-radius:4px!important;font-weight:500!important;-webkit-transition:all .2s ease!important;transition:all .2s ease!important}.lil-gui .controller button:hover{background:linear-gradient(135deg,#0056b3,#004085)!important;-webkit-transform:translateY(-1px)!important;transform:translateY(-1px)!important;-webkit-box-shadow:0 4px 8px rgba(0,123,255,.3)!important;box-shadow:0 4px 8px rgba(0,123,255,.3)!important}.lil-gui .controller .color{border:2px solid #fff!important;border-radius:4px!important;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1)!important;box-shadow:0 2px 4px rgba(0,0,0,.1)!important}.lil-gui .controller.number .slider,.lil-gui .controller.number .slider:hover{background-color:#e6eff4}.lil-gui input,.lil-gui input:hover,.lil-gui input[type=number]:focus,.lil-gui input[type=text]:focus{background:#e6eff4}.lil-gui .controller>.name{min-width:25px}.lil-gui .controller.number input{color:#2e3136}.lil-gui .controller.number .slider:active{background-color:#e6eff4}.lil-gui .folder>.title{background:linear-gradient(135deg,#f1f3f4,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important}.lil-gui .folder>.title:before{color:#6c757d!important}.lil-gui .folder.closed>.children{display:none!important}#konva-container[data-v-459d4d3b]{z-index:3;width:100%;height:100%;cursor:pointer;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}#svg-tigger[data-v-0ec35ee4]{cursor:pointer;height:100%;width:100%}
+@charset "UTF-8";#fl-model[data-v-62715e67]{width:100%;height:100%;cursor:pointer}[data-v-62715e67] .tips-label{width:60px;color:#000;font:12px Helvetica;margin-top:-3em;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-62715e67] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;-webkit-box-shadow:0 1px 3px 1px rgba(0,0,0,.25);box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-62715e67] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-62715e67] .measure-label-font{word-break:break-all}[data-v-62715e67] .mark-label-img{padding-top:5px;width:20px;height:20px}.loading-overlay[data-v-62715e67]{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;-webkit-transition:opacity .3s ease,visibility .3s ease;transition:opacity .3s ease,visibility .3s ease}.loading-overlay--visible[data-v-62715e67]{opacity:1;visibility:visible}.loading-content[data-v-62715e67]{background:#fff;border-radius:12px;padding:30px;text-align:center;-webkit-box-shadow:0 8px 32px rgba(0,0,0,.3);box-shadow:0 8px 32px rgba(0,0,0,.3);min-width:300px;max-width:400px}.loading-spinner[data-v-62715e67]{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #409eff;border-radius:50%;-webkit-animation:spin-62715e67 1s linear infinite;animation:spin-62715e67 1s linear infinite;margin:0 auto 20px}@-webkit-keyframes spin-62715e67{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin-62715e67{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loading-text[data-v-62715e67]{font-size:16px;font-weight:500;color:#333;margin-bottom:20px}.loading-progress-bar[data-v-62715e67]{width:100%;height:8px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:15px}.loading-progress-fill[data-v-62715e67]{height:100%;background:-webkit-gradient(linear,left top,right top,from(#409eff),to(#67c23a));background:linear-gradient(90deg,#409eff,#67c23a);border-radius:4px;-webkit-transition:width .3s ease;transition:width .3s ease}.loading-details[data-v-62715e67]{font-size:12px;color:#666;line-height:1.5}.lil-gui{background:hsla(0,0%,100%,.95)!important;border:1px solid #e0e0e0!important;border-radius:8px!important;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.15)!important;box-shadow:0 4px 12px rgba(0,0,0,.15)!important;backdrop-filter:blur(10px)!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}.lil-gui .title{background:linear-gradient(135deg,#f8f9fa,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important;font-weight:600!important;padding:0 12px!important;border-radius:8px 8px 0 0!important}.lil-gui .controller{border-bottom:1px solid #f1f3f4!important;background:transparent!important}.lil-gui .controller:last-child{border-bottom:none!important}.lil-gui .controller .name{color:#495057!important;font-weight:500!important;font-size:12px!important}.lil-gui .controller .widget{background:#f8f9fa!important;border:1px solid #ced4da!important;border-radius:4px!important;color:#495057!important}.lil-gui .controller .widget:focus,.lil-gui .controller .widget:hover{border-color:#80bdff!important;-webkit-box-shadow:0 0 0 2px rgba(0,123,255,.25)!important;box-shadow:0 0 0 2px rgba(0,123,255,.25)!important}.lil-gui .controller .widget:focus{outline:none!important}.lil-gui .controller input[type=range]{background:#e9ecef!important;height:4px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-radius:2px!important}.lil-gui .controller.number .fill{border-right:solid #008de9}.lil-gui .controller input[type=range]::-webkit-slider-thumb{background:#007bff!important;border:2px solid #fff!important;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2)!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;-webkit-appearance:none!important;appearance:none!important;cursor:pointer!important}.lil-gui .controller input[type=range]::-moz-range-thumb{background:#007bff!important;border:2px solid #fff!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;cursor:pointer!important}.lil-gui .controller .option{background:#fff!important;color:#495057!important;border-bottom:1px solid #f1f3f4!important}.lil-gui .controller .option:hover{background:#f8f9fa!important}.lil-gui .controller .option:last-child{border-bottom:none!important}.lil-gui input:active{background:#e6eff4}.lil-gui .controller button{background:linear-gradient(135deg,#007bff,#0056b3)!important;color:#fff!important;border:none!important;border-radius:4px!important;font-weight:500!important;-webkit-transition:all .2s ease!important;transition:all .2s ease!important}.lil-gui .controller button:hover{background:linear-gradient(135deg,#0056b3,#004085)!important;-webkit-transform:translateY(-1px)!important;transform:translateY(-1px)!important;-webkit-box-shadow:0 4px 8px rgba(0,123,255,.3)!important;box-shadow:0 4px 8px rgba(0,123,255,.3)!important}.lil-gui .controller .color{border:2px solid #fff!important;border-radius:4px!important;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1)!important;box-shadow:0 2px 4px rgba(0,0,0,.1)!important}.lil-gui .controller.number .slider,.lil-gui .controller.number .slider:hover{background-color:#e6eff4}.lil-gui input,.lil-gui input:hover,.lil-gui input[type=number]:focus,.lil-gui input[type=text]:focus{background:#e6eff4}.lil-gui .controller>.name{min-width:25px}.lil-gui .controller.number input{color:#2e3136}.lil-gui .controller.number .slider:active{background-color:#e6eff4}.lil-gui .folder>.title{background:linear-gradient(135deg,#f1f3f4,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important}.lil-gui .folder>.title:before{color:#6c757d!important}.lil-gui .folder.closed>.children{display:none!important}#konva-container[data-v-459d4d3b]{z-index:3;width:100%;height:100%;cursor:pointer;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}.main_body[data-v-5f081c10]{position:relative;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.classification_title[data-v-5f081c10]{margin:0 0 10px 0;color:#fff;font-size:14px;cursor:default}.toolbar[data-v-5f081c10]{z-index:10;position:absolute;width:520px;padding:8px 16px;border-radius:6px;-webkit-box-shadow:0 2px 10px 0 rgba(6,29,44,.25);box-shadow:0 2px 10px 0 rgba(6,29,44,.25);background-color:#fff;top:10px;left:50%;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.icon_toolbar[data-v-5f081c10],.text_toolbar[data-v-5f081c10]{float:left;width:32px;height:32px;padding:0!important;background-repeat:no-repeat;background-size:24px;background-position:50%}.icon_active[data-v-5f081c10],.icon_toolbar[data-v-5f081c10]:hover,.text_toolbar[data-v-5f081c10]:hover{background-color:#eee}[data-v-5f081c10].icon_color .el-color-picker__trigger{height:24px;margin-top:4px;width:24px!important}[data-v-5f081c10].el-color-picker--medium,[data-v-5f081c10].el-color-picker--medium .el-color-picker__trigger{width:24px!important;height:24px!important}.canvas_container[data-v-5f081c10]{position:relative;width:100%;height:100%;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box}.canvas_container canvas[data-v-5f081c10]{position:absolute;left:0}.canvas_container #ctx_front[data-v-5f081c10]{z-index:5;background-color:transparent}.canvas_container #ctx_back[data-v-5f081c10]{z-index:3}.canvas_container #ctx_base[data-v-5f081c10]{z-index:1}#text[data-v-5f081c10]{position:absolute;z-index:-1;resize:none;outline:none;border:1px dashed #9c9c9c;overflow:hidden;background:transparent;line-height:30px;display:none}#text[data-v-5f081c10]:hover{border:1px dashed #53a8ff}#svg-component[data-v-6e1600cc],#svg-tigger[data-v-6e1600cc]{cursor:pointer;height:100%;width:100%;position:relative}#toolbar-show[data-v-6e1600cc]{z-index:20;position:absolute;top:0;left:0;background:#fff}#three-box[data-v-5504c19e],#toolbar-show[data-v-6e1600cc]{width:100%;height:100%;overflow:hidden}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "fl-web-component",
-  "version": "1.4.7",
+  "version": "1.4.9-beta.0",
   "scripts": {
+    "postinstall": "patch-package",
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",
     "lint": "eslint \"{src,packages}/**/*.{vue,js}\" --fix",
@@ -12,8 +13,10 @@
     "build": "npm run lint && vue-cli-service build --target lib --name fl-web-component --formats commonjs ./src/main.js",
     "build:test": "vue-cli-service build --target lib --name fl-web-component --formats commonjs ./src/main.js",
     "publish:base": "npm run build && npm publish --registry https://registry.npmjs.org/",
+    "publish:beta:base": "npm run build && npm publish --tag beta --registry https://registry.npmjs.org/",
     "==": "=============================================================",
-    "tip3": "发版注意: 【修改bug执行publish:fix】【新增功能执行publish:feat】【新特性执行publish:perf】",
+    "tip3": "发版注意: 【测试版执行publish:beta】【修改bug执行publish:fix】【新增功能执行publish:feat】【新特性执行publish:perf】",
+    "publish:beta": "npm version prerelease --preid=beta && npm run publish:beta:base",
     "publish:fix": "npm version patch && npm run publish:base",
     "publish:feat": "npm version minor && npm run publish:base",
     "publish:perf": "npm version major && npm run publish:base"
@@ -26,13 +29,15 @@
   ],
   "main": "dist/fl-web-component.common.js",
   "dependencies": {
+    "3d-tiles-renderer": "^0.4.14",
     "camera-controls": "2.9.0",
     "core-js": "^3.42.0",
     "dxf-parser": "^1.1.2",
     "element-ui": "2.15.14",
+    "fflate": "^0.8.2",
     "html2canvas": "^1.4.1",
     "jspdf": "^3.0.1",
-    "konva": "^9.3.14",
+    "konva": "^9.3.12",
     "lodash": "^4.17.21",
     "meshline": "^3.3.1",
     "regenerator-runtime": "^0.14.1",
@@ -43,6 +48,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/runtime-corejs3": "^7.27.1",
     "@vue/cli-plugin-babel": "~4.4.0",
@@ -56,7 +63,8 @@
     "patch-package": "^6.4.7",
     "sass": "1.32.13",
     "sass-loader": "10.1.1",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "worker-loader": "^3.0.8"
   },
   "eslintConfig": {
     "root": true,

package/packages/components/com-flcanvas/components/entityFormatting.js

@@ -416,7 +416,14 @@ function drawText(recordDxf, entity, group, key, configParams) {
         }
         dim.attrs.rotation = 360-entity.rotation ;
     }else{
-        dim.attrs.y=  -parseFloat(y) - fontSize;
+        // 支持 DXF 垂直对齐（valign），仅在未旋转时按插入点对齐
+        if (entity.valign === 2) {          // Middle
+            dim.attrs.y = -parseFloat(y) - fontSize / 2;
+        } else if (entity.valign === 3) {   // Top
+            dim.attrs.y = -parseFloat(y);
+        } else {                            // Baseline / Bottom 或未设置，保持原逻辑
+            dim.attrs.y = -parseFloat(y) - fontSize;
+        }
     }
     if (entity.xScale) {
         dim.attrs.fontSize =(fontSize+0.35)* entity.xScale;
@@ -432,6 +439,7 @@ function drawText(recordDxf, entity, group, key, configParams) {
 
         }
     }
+
     //dim.attrs.x= dim.attrs.x-parseFloat(2);
     group.push({
         "type":'text',

package/packages/components/com-graphics/box.json

@@ -0,0 +1,77 @@
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 5,
+      "min": [268.0, 578.0, 5.0],
+      "max": [280.0, 588.0, 5.02],
+      "flag": 1,
+      "obb": [
+        268.0, 588.0, 5.0, 268.0, 578.0, 5.0, 268.0, 588.0, 5.02, 268.0, 588.0, 5.02, 268.0, 578.0,
+        5.0, 268.0, 578.0, 5.02, 268.0, 578.0, 5.0, 271.0, 578.0, 5.0, 268.0, 578.0, 5.02, 268.0,
+        578.0, 5.02, 271.0, 578.0, 5.0, 271.0, 578.0, 5.02, 271.0, 578.0, 5.0, 271.0, 585.0, 5.0,
+        271.0, 578.0, 5.02, 271.0, 578.0, 5.02, 271.0, 585.0, 5.0, 271.0, 585.0, 5.02, 271.0, 585.0,
+        5.0, 280.0, 585.0, 5.0, 271.0, 585.0, 5.02, 271.0, 585.0, 5.02, 280.0, 585.0, 5.0, 280.0,
+        585.0, 5.02, 271.0, 578.0, 5.0, 268.0, 578.0, 5.0, 271.0, 585.0, 5.0, 271.0, 585.0, 5.0,
+        268.0, 578.0, 5.0, 268.0, 588.0, 5.0, 271.0, 585.0, 5.0, 268.0, 588.0, 5.0, 280.0, 588.0,
+        5.0, 280.0, 588.0, 5.0, 280.0, 585.0, 5.0, 271.0, 585.0, 5.0, 268.0, 578.0, 5.02, 271.0,
+        578.0, 5.02, 268.0, 588.0, 5.02, 268.0, 588.0, 5.02, 271.0, 578.0, 5.02, 271.0, 585.0, 5.02,
+        268.0, 588.0, 5.02, 271.0, 585.0, 5.02, 280.0, 585.0, 5.02, 280.0, 585.0, 5.02, 280.0,
+        588.0, 5.02, 268.0, 588.0, 5.02, 280.0, 585.0, 5.0, 280.0, 588.0, 5.0, 280.0, 585.0, 5.02,
+        280.0, 585.0, 5.02, 280.0, 588.0, 5.0, 280.0, 588.0, 5.02, 280.0, 588.0, 5.0, 268.0, 588.0,
+        5.0, 280.0, 588.0, 5.02, 280.0, 588.0, 5.02, 268.0, 588.0, 5.0, 268.0, 588.0, 5.02
+      ],
+      "transp": 1.0
+    },
+    {
+      "id": 288,
+      "min": [2881.839, 3967.814, -0.01065],
+      "max": [2882.217, 3967.836, 0.01065],
+      "flag": 2,
+      "obb": [
+        2882.02807617188, 3967.82495117188, -2.55106394476346e-20, 0.188999995589256,
+        0.0109999999403954, 0.0106499996036291, 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0
+      ],
+      "transp": 1.0
+    },
+    {
+      "id": 291,
+      "min": [2882.104, 3967.956, -0.01065],
+      "max": [2882.374, 3968.124, 0.01065],
+      "flag": 2,
+      "obb": [
+        2882.23901367188, 3968.0400390625, -2.55106394476346e-20, 0.188999995589256,
+        0.0109999999403954, 0.0106499996036291, 0.500014126300812, 0.86601722240448, 0.0,
+        -0.86601722240448, 0.500014126300812, 0.0, 0.0, 0.0, 1.0
+      ],
+      "transp": 1.0
+    },
+    {
+      "id": 292,
+      "min": [2882.217, 3968.04, -0.01065],
+      "max": [2882.374, 3968.124, 0.01065],
+      "flag": 3,
+      "obb": [
+        276.758514404297, 586.730529785156, 5.27499485015869, 
+        276.844261169434, 586.816268920898, 5.47500514984131, 
+        276.758514404297, 586.816268920898, 5.27499485015869, 
+        276.844261169434, 586.902008056641, 5.47500514984131, 
+        276.758514404297, 586.987747192383, 5.27499485015869,
+        276.844261169434, 587.073486328125, 5.47500514984131
+      ]
+    },
+    {
+      "id": 293,
+      "min": [2882.217, 3968.04, -0.01065],
+      "max": [2882.374, 3968.124, 0.01065],
+      "flag": 3,
+      "obb": [
+        276.758514404297, 586.730529785156, 5.27499485015869, 
+        276.844261169434, 586.816268920898, 5.47500514984131, 
+        276.758514404297, 586.816268920898, 5.27499485015869, 
+        276.844261169434, 586.902008056641, 5.47500514984131
+      ]
+    }
+  ]
+}

package/packages/components/com-graphics/component/ann-tool.vue

@@ -0,0 +1,465 @@
+
+<template>
+  <div class="main_body">
+    <!-- 绘制工具栏 -->
+    <div class="toolbar" v-if="toolbarShow">
+        <el-button type="text" :style="`background-image: url(${btnBg.text})`"  class="icon_toolbar icon_title" :class="[type === 'text' ? 'icon_active' : '']" title="文本" @click="handleDrawCanvas('text', '文本', 'text')" />
+        <!-- <el-button type="text" class="icon_toolbar icon_line" :class="[type === 'line' ? 'icon_active' : '']" title="折线" @click="handleDrawCanvas('crosshair', '折线', 'line')" />-->
+        <!-- <el-button type="text" class="icon_toolbar icon_rectangle" :class="[type === 'rectangle' ? 'icon_active' : '']" title="矩形" @click="handleDrawCanvas('crosshair', '矩形', 'rectangle')" />  -->
+        <!-- <el-button type="text" class="icon_toolbar icon_circle" :class="[type === 'circle' ? 'icon_active' : '']" title="圆形" @click="handleDrawCanvas('crosshair', '圆形', 'circle')" /> -->
+        <el-button
+          type="text"
+          class="icon_toolbar icon_rectangle"
+          :class="[type === 'cloud' ? 'icon_active' : '']"
+          title="云线"
+          :style="`background-image: url(${btnBg.cloud})`"
+          @click="handleDrawCanvas('crosshair', '云线', 'cloud')"
+        />
+        <!-- <el-button type="text" class="icon_toolbar icon_rubber" :class="[type === 'rubber' ? 'icon_active' : '']" title="橡皮擦" @click="handleDrawCanvas('eraser', '橡皮', 'rubber')" />-->
+        <el-button type="text" class="icon_toolbar icon_color" title="颜色" >
+          <el-color-picker v-model="defaultColor" popper-class="popperClass"  @change="colorChange"></el-color-picker>
+        </el-button>
+        <el-button type="text" :style="`background-image: url(${btnBg.clear})`" class="text_toolbar icon_clear" @click="clearAnn" title="清除"></el-button>
+        <el-button type="text" :style="`background-image: url(${btnBg.cancel})`" class="text_toolbar icon_cancel" @click="cancel" title="取消"></el-button>
+        <el-button type="text" :style="`background-image: url(${btnBg.save})`" class="text_toolbar icon_save" @click="saveDrawing" title="保存"></el-button>
+    </div>
+    <div class="canvas_container" id="canvas_container">
+      <canvas id="ctx_base" ref="ctx_base" :style="'cursor:' + cursorStyle"></canvas>
+      <input name="text" id="text" @keyup.enter="handleTextBlur" @blur="handleTextBlur" v-model="text" autofocus autocomplete="off" :style="'font-size:' + (this.slide * 10 + 14) + 'pxcolor:' + defaultColor" placeholder="输入完成请按回车键" />
+    </div>
+  </div>
+</template>
+
+<script>
+var canvas_base = null, ctx_base = null, recordImg = null
+var canvas_container = null, startPoint = null, currentPoint = null
+let originalImageWidth = 0, originalImageHeight = 0, displayImageWidth = 0, displayImageHeight = 0, translateX = 0, translateY = 0
+var annList = []
+let scale = 1.0; // 当前缩放比例
+const MIN_SCALE = 0.1; // 最小缩放比例
+const MAX_SCALE = 8.0; // 最大缩放比例
+const SCALE_STEP = 0.1; // 缩放步长
+let offsetX = 0; // X轴平移
+let offsetY = 0; // Y轴平移
+let isPanning = false; // 是否正在平移
+let panStartX = 0; // 平移起始X坐标
+let panStartY = 0; // 平移起始Y坐标
+let isSpacePressed = false; // 空格键是否按下
+import cursors from "@/utils/cursor"
+import { drawCloudLines } from '@/utils/cloud'
+export default {
+  name: 'DrawToolbar',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      currentImg: {
+        url: null,
+        width: "",
+        height: "",
+        scale: 1,
+        index: 0,
+      },
+      tl: 0,
+      tt: 0,
+      slide: 1,// 2,
+      text: '',
+      toolbarShow: true,
+      ctx_base: null,
+      ctx_front: null,
+      ctx_back: null,
+      canDraw: false,
+      baseMap: null,
+      canvasStore: [],
+      type: '',
+      cloudDensity: 3,
+      defaultColor: '#A90A0A', // 颜色选取
+      cursorStyle: 'default', // 鼠标样式
+      btnBg: {
+        'text': require('@static/ann-img/mark_font@2x.png'),
+        'cloud': require('@static/ann-img/mark_cloud@2x.png'),
+        'clear': require('@static/ann-img/mark_clear@2x.png'),
+        'cancel': require('@static/ann-img/mark_exit@2x.png'),
+        'save': require('@static/ann-img/mark_finish@2x.png'),
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.handleInitCanvas()
+    })
+  },
+  created() {
+    console.log('created')
+  },
+  methods: {
+    clearAnn() {
+      annList.splice(0)
+      this.redraw()
+    },
+    // 初始化图纸
+    handleInitCanvas() {
+      console.log('handleInitCanvas')
+      this.currentImg = {
+        url: this.src,
+        width: "",
+        height: "",
+        scale: 1,
+        index: 0,
+      }
+      canvas_container = document.getElementById("canvas_container")
+      canvas_base = document.getElementById("ctx_base")
+      ctx_base = canvas_base.getContext("2d")
+      ctx_base.strokeStyle = this.defaultColor
+
+      let img = new Image()
+      img.src = this.currentImg.url
+      let _this = this
+      img.onload = function () {
+        
+        recordImg = this
+        originalImageWidth = img.naturalWidth || img.width;
+        originalImageHeight = img.naturalHeight || img.height;
+        _this.resetView()
+      }
+      canvas_base.width = canvas_container.clientWidth
+      canvas_base.height = canvas_container.clientHeight
+      canvas_base.addEventListener('wheel', (e) => {
+        e.preventDefault()
+        const rect = canvas_base.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        let imagePointBeforeZoom = this.screenToImage(mouseX, mouseY)
+        const zoomFactor = e.deltaY > 0 ? 0.8 : 1.2
+        const newScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale * zoomFactor))
+        scale = newScale
+        const imagePointAfterZoom = this.screenToImage(mouseX, mouseY)
+        translateX += (imagePointAfterZoom.x - imagePointBeforeZoom.x) * scale
+        translateY += (imagePointAfterZoom.y - imagePointBeforeZoom.y) * scale
+        this.redraw()
+      })
+      canvas_base.addEventListener('mousedown', (e) => {
+        if (e.button === 0) {
+          // ctx_base.strokeStyle = this.defaultColor
+          // ctx_base.lineWidth = this.slide * 2
+          e = e || window.event
+          let rect = canvas_base.getBoundingClientRect()
+          let screenX = e.clientX - rect.left
+          let screenY = e.clientY - rect.top
+          let imagePoint = this.screenToImage(screenX, screenY)
+          startPoint = imagePoint;
+          currentPoint = imagePoint;
+          switch (this.type) {
+            case 'rubber':
+              ctx_front.putImageData( cbx, e.offsetX - 12, e.offsetY - 12)
+              // this.ctx_back.putImageData(cbx, e.offsetX - 12, e.offsetY - 12)
+              break
+            case 'text':
+              let text = document.getElementById("text")
+              // this.handleTextBlur()
+              this.text = ""
+              text.style.fontSize = 14 + this.slide * 10 + "px"
+              text.style.color = this.defaultColor
+              text.style.left = screenX - 5 + "px"
+              text.style.top = screenY - 20 + "px"
+              text.style.zIndex = 10
+              text.style.display = "block"
+              let textPos = this.screenToImage(screenX - 5, screenY + 10)
+              this.tl = textPos.x // currentPoint.x
+              this.tt = textPos.y // currentPoint.y
+              break;
+            case 'cloud':
+              this.canDraw = true
+              break;
+          }
+          this.redraw()
+        }
+      })
+      canvas_base.addEventListener('contextmenu', (e) => {
+        e.preventDefault()
+      })
+      canvas_base.addEventListener('mousemove', (e) => {
+        if (e.button === 0) {
+          e = e || window.event
+          let rect = canvas_base.getBoundingClientRect()
+          let screenX = e.clientX - rect.left;
+          let screenY = e.clientY - rect.top;
+          if (this.canDraw) {
+            let imagePoint = this.screenToImage(screenX, screenY)
+            currentPoint = imagePoint
+            this.redraw()
+          }
+        }
+      })
+      canvas_base.addEventListener('mouseup', (e) => {
+        if (e.button === 0 && this.canDraw) {
+            this.canDraw = false
+            if (this.type === 'cloud') {
+              let width = Math.abs(currentPoint.x - startPoint.x)
+              let height = Math.abs(currentPoint.y - startPoint.y)
+              let minSize = 5 / scale
+              if (width > minSize && height > minSize) {
+                annList.push({
+                  x: Math.min(startPoint.x, currentPoint.x),
+                  y: Math.min(startPoint.y, currentPoint.y),
+                  ex: Math.max(startPoint.x, currentPoint.x),
+                  ey: Math.max(startPoint.y, currentPoint.y),
+                  type: 'cloud',
+                  color: this.defaultColor,
+                  lineWidth: ctx_base.lineWidth
+                })
+              }
+              startPoint = null
+              currentPoint = null
+            }
+            this.redraw()
+        }
+      })
+      
+    },
+    resetView() {
+      if (!recordImg) return
+      const containerWidth = canvas_base.width;
+      const containerHeight = canvas_base.height;
+      
+      // 计算保持比例的最大尺寸
+      const widthRatio = containerWidth / originalImageWidth;
+      const heightRatio = containerHeight / originalImageHeight;
+      const scaleRatio = Math.min(widthRatio, heightRatio);
+      
+      displayImageWidth = originalImageWidth * scaleRatio;
+      displayImageHeight = originalImageHeight * scaleRatio;
+      
+      // 居中显示
+      translateX = (containerWidth - displayImageWidth) / 2;
+      translateY = (containerHeight - displayImageHeight) / 2;
+      scale = scaleRatio;
+      this.redraw()
+    },
+    redraw() {
+      if (!recordImg) return
+      ctx_base.clearRect(0, 0, canvas_base.width, canvas_base.height)
+      ctx_base.save()
+      ctx_base.translate(translateX, translateY)
+      ctx_base.scale(scale, scale)
+      ctx_base.drawImage(recordImg, 0, 0, originalImageWidth, originalImageHeight)
+      annList.forEach(item => {
+        switch (item.type) {
+          case 'cloud':
+            this.drawCloudAnn(item)
+            break;
+          case 'text':
+            this.drawTextAnn(item)
+            break;
+        }
+      })
+      if (this.canDraw && startPoint && currentPoint) {
+        if (this.type === 'cloud') {
+          let tempAnn = {
+            x: Math.min(startPoint.x, currentPoint.x),
+            y: Math.min(startPoint.y, currentPoint.y),
+            ex: Math.max(startPoint.x, currentPoint.x),
+            ey: Math.max(startPoint.y, currentPoint.y),
+            type: 'cloud',
+            color: this.defaultColor,
+            lineWidth: ctx_base.lineWidth
+          }
+          this.drawCloudAnn(tempAnn)
+        }
+      }
+      ctx_base.restore()
+    },
+    // 绘制云线
+    drawCloudAnn(annotation) {
+      ctx_base.save()
+      ctx_base.strokeStyle = annotation.color
+      ctx_base.lineWidth = annotation.lineWidth || ctx_base.lineWidth;
+      ctx_base.setLineDash([])
+      ctx_base.beginPath()
+      drawCloudLines(ctx_base, [{x: annotation.ex, y: annotation.y}, {x: annotation.ex, y: annotation.ey}, {x: annotation.x, y: annotation.ey}, {x: annotation.x, y: annotation.y}], true);
+      ctx_base.restore()
+    },
+    drawTextAnn(annotation) {
+      ctx_base.save()
+      ctx_base.strokeStyle = annotation.color
+      ctx_base.fillStyle = annotation.color
+      ctx_base.fillText(annotation.text, annotation.x, annotation.y)
+      ctx_base.restore()
+    },
+    // 屏幕坐标转换为图像坐标
+    screenToImage(screenX, screenY) {
+      const imageX = (screenX - translateX) / scale
+      const imageY = (screenY - translateY) / scale
+      return { x: imageX, y: imageY }
+    },
+    // 当前显示的颜色发生改变时
+    colorChange (val) {
+      if (this.defaultColor === null) this.defaultColor = '#A90A0A'
+      this.redraw()
+    },
+    saveDrawing() {     
+      const link = document.createElement('a');
+      link.download = `图纸批注_${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.png`;
+      link.href = canvas_base.toDataURL('image/png', 1.0);
+      link.click();
+    },
+    handleDrawCanvas(style, type, actived) {
+      if (actived !== this.type) { this.type = actived }
+      if (style !== 'eraser') this.cursorStyle = style
+      else if (style === 'eraser') this.cursorStyle = `url('${cursors.eraser}') 15 15, auto`
+      this.canDraw = false
+    },
+    /** 失焦或者回车绘制文本，框隐藏*/
+    handleTextBlur() {
+      let realTxt = this.text.replace(/^\s+|\s+$/g, '')
+      if (realTxt === '') return
+      let text = document.getElementById("text")
+      let fontSize = 1.2 // text.style.fontSize / 10
+      annList.push({
+        type: 'text',
+        x: this.tl,
+        y: this.tt,
+        text: realTxt,
+        color: this.defaultColor,
+        font: `100 ${fontSize} sans-serif`
+      });
+      text.style.display = "none"
+      this.text = ""
+      text.value = ""
+      this.redraw()
+
+    },
+    cancel() {
+      canvas_base = null
+      ctx_base = null
+      recordImg = null
+      canvas_container = null
+      startPoint = null
+      currentPoint = null
+      originalImageWidth = 0
+      originalImageHeight = 0
+      displayImageWidth = 0
+      displayImageHeight = 0
+      translateX = 0
+      translateY = 0
+      annList.splice(0 )
+      scale = 1.0 // 当前缩放比例
+      offsetX = 0 // X轴平移
+      offsetY = 0 // Y轴平移
+      isPanning = false; // 是否正在平移
+      panStartX =  // 平移起始X坐标
+      panStartY = 0 // 平移起始Y坐标
+      isSpacePressed = false // 空格键是否按下
+      this.$emit('closeAnn')
+    }
+  }
+
+}
+</script>
+<style scoped lang="scss">
+.main_body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+// P标签样式
+.classification_title {
+  margin: 0 0 10px 0;
+  color: #fff;
+  font-size: 14px;
+  cursor: default;
+}
+
+// 工具栏样式
+.toolbar {
+  z-index: 10;
+  position: absolute;
+  width: 520px;
+  padding: 8px 16px;
+  border-radius: 6px;
+  box-shadow: 0px 2px 10px 0px rgba(6,29,44,0.25);
+  background-color: #fff;
+  top: 10px;
+  left: 50%;
+  box-sizing: border-box;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: space-around
+}
+// 工具栏图标
+.icon_toolbar,
+.text_toolbar {
+  float: left;
+  width: 32px;
+  height: 32px;
+  padding: 0px !important;
+  background-repeat: no-repeat;
+  background-size: 24px;
+  background-position: center;
+}
+.icon_toolbar:hover, .text_toolbar:hover, .icon_active{
+  background-color: rgba(238, 238, 238, 1);
+}
+
+// 调色盘设置
+::v-deep.icon_color .el-color-picker__trigger {
+  height: 24px;
+  margin-top: 4px;
+  width: 24px !important
+  // opacity: 0;
+  // filter: alpha(opacity=0);
+}
+::v-deep.el-color-picker--medium,
+::v-deep.el-color-picker--medium .el-color-picker__trigger {
+  width: 24px !important;
+  height: 24px !important;
+}
+
+// 画布
+.canvas_container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  // padding: 20px;
+
+  canvas {
+    position: absolute;
+    left: 0;
+    // top: 20px;
+    // left: 20px;
+  }
+  #ctx_front {
+    z-index: 5;
+    background-color: transparent
+  }
+  #ctx_back {
+    
+    z-index: 3;
+  }
+  #ctx_base {
+    z-index: 1;
+  }
+}
+#text {
+  position: absolute;
+  z-index: -1;
+  resize: none;
+  outline: none;
+  border: 1px dashed #9c9c9c;
+  overflow: hidden;
+  background: transparent;
+  line-height: 30px;
+  display: none;
+}
+#text:hover{
+  border: 1px dashed #53a8ff
+}
+</style>