@kq_npm/client3d_webgl_vue 4.3.9 → 4.4.1

package/scenetohdimage/index.js

@@ -25,10 +25,104 @@ return /******/ (function() { // webpackBootstrap
  * 场景高清出图
  **/
 class SceneToHDImageViewModel {
-  constructor(viewer) {
+  // 输出图片区域
+  // 缩放比
+  constructor(viewer, options) {
     (0,_Users_zpc_Documents_KQGEOSpace_KQGISClientForVue_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(this, "_viewer", null);
 
+    (0,_Users_zpc_Documents_KQGEOSpace_KQGISClientForVue_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(this, "_options", null);
+
+    (0,_Users_zpc_Documents_KQGEOSpace_KQGISClientForVue_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(this, "_canvasToImage", null);
+
+    (0,_Users_zpc_Documents_KQGEOSpace_KQGISClientForVue_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(this, "_exportPictureRegion", null);
+
+    (0,_Users_zpc_Documents_KQGEOSpace_KQGISClientForVue_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(this, "_pantographRatio", null);
+
     this._viewer = viewer;
+    this._options = options;
+    this._viewer.enabledFXAA = true; // this._exportPictureRegion = document.createElement("div");
+    // this._exportPictureRegion.class = "export-picture-region";
+    // this._exportPictureRegion.id = "exportPictureRegion";
+    // this._tbSlider = document.createElement("div");
+    // this._tbSlider.class = "shutter-slider";
+    // this._tbSlider.id = "tbSlider";
+    // this._viewer.container.appendChild(this._lrSlider);
+    // this._viewer.container.appendChild(this._tbSlider);
+
+    console.log(this._viewer._container.id); //声明场景出图类
+
+    this._canvasToImage = new Cesium.Kq3dCanvasToImage(this._viewer._container.id, {
+      viewer: this._viewer,
+      canvas: this._viewer.scene.canvas
+    });
+  }
+
+  resizeExportRegionSize() {} // 出图
+
+
+  sceneToImages() {
+    var width = Number(this._options.width),
+        height = Number(this._options.height),
+        resolutionWidth = Number(this._options.resolutionWidth),
+        resolutionHeight = Number(this._options.resolutionHeight); //设置宽、高、图片类型
+
+    var options = {
+      width: width,
+      //图片宽度
+      height: height,
+      //图片高度
+      type: this._options.type //图片类型
+
+    };
+
+    if (width == resolutionWidth && height == resolutionHeight) {
+      this._canvasToImage.saveAsimages(this._viewer.scene.canvas, options);
+    } else {
+      this._viewer.render();
+
+      var ctx = this._viewer.scene.canvas.getContext("2d");
+
+      var startX = (resolutionWidth - width) / 2,
+          startY = (resolutionHeight - height) / 2;
+      var canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      var newCtx = canvas.getContext("2d");
+      newCtx.drawImage(this._viewer.canvas, startX, startY, width, height, 0, 0, width, height);
+
+      this._canvasToImage.saveAsimages(canvas, options);
+    }
+  }
+
+  scaleCesiumContainer() {
+    var bWidth = $('body').width(),
+        bHeight = $('body').height();
+    var width = Number(this._options.resolutionWidth),
+        height = Number(this._options.resolutionHeight);
+    var wRatio = bWidth / width,
+        hRatio = bHeight / height; // if (wRatio < 1 || hRatio < 1) {
+
+    var scale = Math.min(wRatio, hRatio);
+    $('#cesiumContainer').css('width', width + 'px').css('height', height + 'px').css('transform', `translate(-50%,-50%) scale(${scale > 1 ? 1 : scale})`);
+    this._options.scale = scale > 1 ? 1 : scale;
+  } //将值转换成4的倍数
+
+
+  convertValueTo4Times(value) {
+    if (Math.abs(value % 4) > 0.000001) {
+      if (Math.abs(value % 4) > 1.5) {
+        value = 4 * (parseInt(value / 4) + 1);
+      } else {
+        value = 4 * parseInt(value / 4);
+      }
+    }
+
+    return value || 4;
+  } // 参数切换
+
+
+  paramsChanged(key, val) {
+    this._options[key] = val;
   } // 销毁
 
 
@@ -200,6 +294,9 @@ var vue_i18n_cjs_js_ = __webpack_require__(7080);
 const _hoisted_1 = {
   class: "kq3d-scene-to-hd-image-box"
 };
+const _hoisted_2 = {
+  class: "kq3d-scene-to-hd-image-footer"
+};
 
 
 
@@ -260,12 +357,41 @@ const __default__ = {
     } = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.getCurrentInstance)();
     let currentLang = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)("");
     let language = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)({});
-    let collapseValue = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)("content"); // 获取组件传参
+    let collapseValue = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)("screenParameter"); // 获取组件传参
     // 分析类
 
     let viewModel = null; // 参数
 
-    let formItem = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.reactive)({}); // 组件容器Ref
+    let formItem = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.reactive)({
+      screenWidth: props.settingParams && props.settingParams.screenWidth || 100,
+      // 屏幕宽度
+      minScreenWidth: props.settingParams && props.settingParams.minScreenWidth || 0,
+      // 屏幕宽度最小值
+      maxScreenWidth: props.settingParams && props.settingParams.maxScreenWidth || 1920,
+      // 屏幕宽度最大值
+      screenHeight: props.settingParams && props.settingParams.screenHeight || 100,
+      // 屏幕宽度
+      minScreenHeight: props.settingParams && props.settingParams.minScreenHeight || 0,
+      // 屏幕宽度最小值
+      maxScreenHeight: props.settingParams && props.settingParams.maxScreenHeight || 900,
+      // 屏幕宽度最大值
+      displayArea: props.settingParams && props.settingParams.displayArea || true,
+      // 是否显示区域
+      imgWidth: props.settingParams && props.settingParams.imgWidth || 100,
+      // 图片宽度
+      minImgWidth: props.settingParams && props.settingParams.minImgWidth || 0,
+      // 图片宽度最小值
+      maxImgWidth: props.settingParams && props.settingParams.maxImgWidth || 1920,
+      // 图片宽度最大值
+      imgHeight: props.settingParams && props.settingParams.imgHeight || 100,
+      // 图片高度
+      minImgHeight: props.settingParams && props.settingParams.minImgHeight || 0,
+      // 图片高度最小值
+      maxImgHeight: props.settingParams && props.settingParams.maxImgHeight || 900,
+      // 图片高度最大值
+      imgFormat: props.settingParams && props.settingParams.imgFormat || "jpg" // 图片类型
+
+    }); // 组件容器Ref
 
     let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
 
@@ -307,23 +433,48 @@ const __default__ = {
         // 生成headerTemp
         headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef, headerTempTitle);
       }
-    }; // 参数改变
+    }; // 高清出图
+
 
+    function toHDImageHander() {
+      viewModel && viewModel.sceneToImages();
+    } // 参数改变
 
-    function paramsChanged(key) {} // 销毁
+
+    function paramsChanged(key) {
+      viewModel && viewModel.paramsChanged(key, formItem[key]);
+    } // 销毁
 
 
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onBeforeUnmount)(() => {
       viewModel && viewModel.destroy();
     });
-    expose({
-      paramsChanged
-    });
+    expose({});
     return (_ctx, _cache) => {
+      const _component_kq_slider = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-slider");
+
+      const _component_kq_col = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-col");
+
+      const _component_kq_input_number = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-input-number");
+
+      const _component_kq_row = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-row");
+
+      const _component_kq_form_item = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-form-item");
+
+      const _component_kq_switch = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-switch");
+
+      const _component_kq_form = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-form");
+
       const _component_kq_collapse_item = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-collapse-item");
 
+      const _component_kq_option = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-option");
+
+      const _component_kq_select = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-select");
+
       const _component_kq_collapse = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-collapse");
 
+      const _component_kq_button = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-button");
+
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-scene-to-hd-image", {
           'kq-box-shadow': __props.showShadow
@@ -342,8 +493,351 @@ const __default__ = {
         default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_collapse_item, {
           class: "scene-content",
           title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).screenParameter,
-          name: "content"
-        }, null, 8
+          name: "screenParameter"
+        }, {
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form, {
+            "label-width": "100px",
+            "label-position": "left"
+          }, {
+            default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
+                label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).screenWidth
+              }, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+                  style: {
+                    "display": "flex"
+                  }
+                }, {
+                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
+                    span: 16
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_slider, {
+                      modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenWidth,
+                      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenWidth = $event),
+                      step: 1,
+                      min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minScreenWidth,
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxScreenHeight,
+                      onInput: _cache[1] || (_cache[1] = $event => paramsChanged('screenWidth'))
+                    }, null, 8
+                    /* PROPS */
+                    , ["modelValue", "min", "max"])]),
+                    _: 1
+                    /* STABLE */
+
+                  }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
+                    span: 8
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_input_number, {
+                      modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenWidth,
+                      "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenWidth = $event),
+                      min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minScreenWidth,
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxScreenWidth,
+                      step: 1,
+                      "controls-position": "right",
+                      onInput: _cache[3] || (_cache[3] = $event => paramsChanged('screenWidth'))
+                    }, null, 8
+                    /* PROPS */
+                    , ["modelValue", "min", "max"])]),
+                    _: 1
+                    /* STABLE */
+
+                  })]),
+                  _: 1
+                  /* STABLE */
+
+                })]),
+                _: 1
+                /* STABLE */
+
+              }, 8
+              /* PROPS */
+              , ["label"])]),
+              _: 1
+              /* STABLE */
+
+            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
+                label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).screenHeight
+              }, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+                  style: {
+                    "display": "flex"
+                  }
+                }, {
+                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
+                    span: 16
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_slider, {
+                      modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenHeight,
+                      "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenHeight = $event),
+                      step: 1,
+                      min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minScreenHeight,
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxScreenHeight,
+                      onInput: _cache[5] || (_cache[5] = $event => paramsChanged('screenHeight'))
+                    }, null, 8
+                    /* PROPS */
+                    , ["modelValue", "min", "max"])]),
+                    _: 1
+                    /* STABLE */
+
+                  }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
+                    span: 8
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_input_number, {
+                      modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenHeight,
+                      "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).screenHeight = $event),
+                      min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minScreenHeight,
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxScreenHeight,
+                      step: 1,
+                      "controls-position": "right",
+                      onInput: _cache[7] || (_cache[7] = $event => paramsChanged('screenHeight'))
+                    }, null, 8
+                    /* PROPS */
+                    , ["modelValue", "min", "max"])]),
+                    _: 1
+                    /* STABLE */
+
+                  })]),
+                  _: 1
+                  /* STABLE */
+
+                })]),
+                _: 1
+                /* STABLE */
+
+              }, 8
+              /* PROPS */
+              , ["label"])]),
+              _: 1
+              /* STABLE */
+
+            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
+                label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).displayArea
+              }, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+                  style: {
+                    "text-align": "left"
+                  }
+                }, {
+                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
+                    span: 24,
+                    style: {}
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_switch, {
+                      modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).displayArea,
+                      "onUpdate:modelValue": _cache[8] || (_cache[8] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).displayArea = $event),
+                      "controls-position": "left",
+                      onChange: _cache[9] || (_cache[9] = $event => paramsChanged('displayArea'))
+                    }, null, 8
+                    /* PROPS */
+                    , ["modelValue"])]),
+                    _: 1
+                    /* STABLE */
+
+                  })]),
+                  _: 1
+                  /* STABLE */
+
+                })]),
+                _: 1
+                /* STABLE */
+
+              }, 8
+              /* PROPS */
+              , ["label"])]),
+              _: 1
+              /* STABLE */
+
+            })]),
+            _: 1
+            /* STABLE */
+
+          })]),
+          _: 1
+          /* STABLE */
+
+        }, 8
+        /* PROPS */
+        , ["title"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_collapse_item, {
+          class: "kq3d-scene-to-hd-image-collapse-item",
+          title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).pictureSpecification,
+          name: "pictureSpecification"
+        }, {
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form, {
+            "label-width": "100px",
+            "label-position": "left"
+          }, {
+            default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
+                label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).imgFormat
+              }, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+                  style: {
+                    "display": "flex"
+                  }
+                }, {
+                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_select, {
+                    modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgFormat,
+                    "onUpdate:modelValue": _cache[10] || (_cache[10] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgFormat = $event),
+                    onChange: _cache[11] || (_cache[11] = $event => paramsChanged('imgFormat')),
+                    style: {
+                      "width": "100%"
+                    }
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_option, {
+                      label: "JPG",
+                      value: "jpg"
+                    }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_option, {
+                      label: "PNG",
+                      value: "png"
+                    }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_option, {
+                      label: "BMP",
+                      value: "bmp"
+                    }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_option, {
+                      label: "JPEG",
+                      value: "jpeg"
+                    })]),
+                    _: 1
+                    /* STABLE */
+
+                  }, 8
+                  /* PROPS */
+                  , ["modelValue"])]),
+                  _: 1
+                  /* STABLE */
+
+                })]),
+                _: 1
+                /* STABLE */
+
+              }, 8
+              /* PROPS */
+              , ["label"])]),
+              _: 1
+              /* STABLE */
+
+            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
+                label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).imgWidth + '(px)'
+              }, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+                  style: {
+                    "display": "flex"
+                  }
+                }, {
+                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
+                    span: 16
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_slider, {
+                      modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgWidth,
+                      "onUpdate:modelValue": _cache[12] || (_cache[12] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgWidth = $event),
+                      step: 1,
+                      min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minImgWidth,
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxImgWidth,
+                      onInput: _cache[13] || (_cache[13] = $event => paramsChanged('imgWidth'))
+                    }, null, 8
+                    /* PROPS */
+                    , ["modelValue", "min", "max"])]),
+                    _: 1
+                    /* STABLE */
+
+                  }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
+                    span: 8
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_input_number, {
+                      modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgWidth,
+                      "onUpdate:modelValue": _cache[14] || (_cache[14] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgWidth = $event),
+                      min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minImgWidth,
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxImgWidth,
+                      step: 1,
+                      "controls-position": "right",
+                      onInput: _cache[15] || (_cache[15] = $event => paramsChanged('imgWidth'))
+                    }, null, 8
+                    /* PROPS */
+                    , ["modelValue", "min", "max"])]),
+                    _: 1
+                    /* STABLE */
+
+                  })]),
+                  _: 1
+                  /* STABLE */
+
+                })]),
+                _: 1
+                /* STABLE */
+
+              }, 8
+              /* PROPS */
+              , ["label"])]),
+              _: 1
+              /* STABLE */
+
+            }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
+                label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).imgHeight + '(px)'
+              }, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+                  style: {
+                    "display": "flex"
+                  }
+                }, {
+                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
+                    span: 16
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_slider, {
+                      modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgHeight,
+                      "onUpdate:modelValue": _cache[16] || (_cache[16] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgHeight = $event),
+                      step: 1,
+                      min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minImgHeight,
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxImgHeight,
+                      onInput: _cache[17] || (_cache[17] = $event => paramsChanged('imgHeight'))
+                    }, null, 8
+                    /* PROPS */
+                    , ["modelValue", "min", "max"])]),
+                    _: 1
+                    /* STABLE */
+
+                  }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
+                    span: 8
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_input_number, {
+                      modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgHeight,
+                      "onUpdate:modelValue": _cache[18] || (_cache[18] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).imgHeight = $event),
+                      min: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).minImgHeight,
+                      max: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).maxImgHeight,
+                      step: 1,
+                      "controls-position": "right",
+                      onInput: _cache[19] || (_cache[19] = $event => paramsChanged('imgHeight'))
+                    }, null, 8
+                    /* PROPS */
+                    , ["modelValue", "min", "max"])]),
+                    _: 1
+                    /* STABLE */
+
+                  })]),
+                  _: 1
+                  /* STABLE */
+
+                })]),
+                _: 1
+                /* STABLE */
+
+              }, 8
+              /* PROPS */
+              , ["label"])]),
+              _: 1
+              /* STABLE */
+
+            })]),
+            _: 1
+            /* STABLE */
+
+          })]),
+          _: 1
+          /* STABLE */
+
+        }, 8
         /* PROPS */
         , ["title"])]),
         _: 1
@@ -351,7 +845,20 @@ const __default__ = {
 
       }, 8
       /* PROPS */
-      , ["model-value"])])], 2
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_2, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+        onClick: _cache[20] || (_cache[20] = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withModifiers)($event => toHDImageHander(), ["stop"])),
+        title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).sceneToHDImageTips,
+        type: "primary"
+      }, {
+        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createTextVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).sceneToHDImageTips), 1
+        /* TEXT */
+        )]),
+        _: 1
+        /* STABLE */
+
+      }, 8
+      /* PROPS */
+      , ["title"])])])], 2
       /* CLASS */
       );
     };

package/scenetohdimage/style/scenetohdimage.css

@@ -1 +1 @@
-.kq3d-scene-to-hd-image{z-index:999;border-radius:var(--kq-border-radius-base);padding:16px;padding-bottom:8px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-box{width:390px}.kq3d-scene-to-hd-image .kq-collapse{border:unset}.kq3d-scene-to-hd-image .kq-collapse .scene-content .kq-switch{margin-right:5px}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item{margin-bottom:8px}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__header{border:unset;height:38px;background-color:var(--kq-fill-color-light);font-weight:700;padding:0 16px;font-size:16px}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__arrow{margin:0 0 0 auto}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__wrap{border:unset}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__wrap .kq-collapse-item__content{padding-bottom:unset;border:unset;padding-top:10px}
+.kq3d-scene-to-hd-image{z-index:999;border-radius:var(--kq-border-radius-base);padding:16px;pointer-events:auto;cursor:default;background-color:var(--kq-bg-color)}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-box{width:360px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-collapse-item{margin-top:16px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-tip{color:var(--kq-text-color-regular);font-size:var(--kq-font-size-base)}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-tip p{margin-top:0;margin-bottom:16px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-span{margin:0 20px}.kq3d-scene-to-hd-image .kq-select{width:100%}.kq3d-scene-to-hd-image .kq-collapse{border:unset}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__header{border:unset;height:38px;background-color:var(--kq-fill-color-light);font-weight:700;padding:0 16px;font-size:16px}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__arrow{margin:0 0 0 auto}.kq3d-scene-to-hd-image .kq-collapse .kq-collapse-item__wrap .kq-collapse-item__content{padding-bottom:unset;border:unset;padding-top:10px}.kq3d-scene-to-hd-image .kq-form-item{margin-bottom:8px}.kq3d-scene-to-hd-image .kq-form-item__content{text-align:end;display:block}.kq3d-scene-to-hd-image .kq-row{display:block}.kq3d-scene-to-hd-image .kq-slider{width:95%;padding-left:7px}.kq3d-scene-to-hd-image .kq-slider .kq-slider__button{width:14px;height:14px}.kq3d-scene-to-hd-image .kq-input-number.is-controls-right{width:65px}.kq3d-scene-to-hd-image .kq-input-number.is-controls-right .kq-input-number__decrease,.kq3d-scene-to-hd-image .kq-input-number.is-controls-right .kq-input-number__increase{width:20px}.kq3d-scene-to-hd-image .kq-col-8 .kq-input-number .kq-input__wrapper,.kq3d-scene-to-hd-image .kq-input-number.is-controls-right .kq-input__wrapper{padding-left:0;padding-right:20px}.kq3d-scene-to-hd-image .kq-color-picker,.kq3d-scene-to-hd-image .kq-color-picker .kq-color-picker__mask,.kq3d-scene-to-hd-image .kq-color-picker .kq-color-picker__trigger{width:100%}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-line{width:80%;margin:14px 8px;height:2px;overflow:hidden;background:#c0c4cc;border-radius:4px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-legend{height:24px}.kq3d-scene-to-hd-image .kq3d-scene-to-hd-image-footer{text-align:right;padding:16px 0 0}