src/components/FusionSettings/DensityCorrection.vue

@@ -68,7 +68,7 @@
   <div>
       <div class="row">
         <div class="col-1"></div>
-        <div class="col-2"> <q-select class="q-pt-md" :label="$t('level')" :dense="true" filled v-model="options_model_v"  @update:model-value="(val)=>{now_index=val}"  :options="options_v" emit-value
+        <div class="col-2"> <q-select class="q-pt-md" :label="$t('level')" :dense="true" filled v-model="options_model_v" :options="options_v" emit-value
             map-options /></div>
         <div class="col-2"> <q-input filled type="number" class="q-pt-md" :dense="true"
             v-model="value[options_model_v].y" @update:model-value="chang(options_model_v, $event,'v')" lazy-rules />
@@ -79,7 +79,7 @@
       </div>
       <div class="row">
         <div class="col-1"></div>
-        <div class="col-2"> <q-select class="q-pt-md"  :label="$t('vertical')" :dense="true" filled v-model="options_model_h" @update:model-value="(val)=>{now_index=val}" :options="options_h" emit-value
+        <div class="col-2"> <q-select class="q-pt-md"  :label="$t('vertical')" :dense="true" filled v-model="options_model_h" :options="options_h" emit-value
             map-options /></div>
         <div class="col-2"> <q-input filled type="number" class="q-pt-md" :dense="true"
             v-model="value[options_model_h].x" @update:model-value="chang(options_model_h, $event,'h')" lazy-rules />

src/components/FusionSettings/FourPointCalibration.vue

@@ -200,7 +200,7 @@ export default defineComponent({
     };
     const keyDown = () => {
       document.onkeydown = (e) => {
-        let lock=0;
+
         let e1 = e || window.event || arguments.callee.caller.arguments[0]
         switch (e.code) {
           case "KeyW":
@@ -220,10 +220,8 @@ export default defineComponent({
             points[now_index.value].y
             break;
           default:
-            lock=1
             break;
         }
-        if(lock==0){
         let tmp = { left: points[now_index.value].x, top: points[now_index.value].y }
         eval(`moveHandler_${now_index.value+1}(tmp)`);
         isactivearray.value[now_index.value] = false;
@@ -233,7 +231,6 @@ export default defineComponent({
         }, 100);
       }
     }
-    }
     onMounted(() => {
       ste_status.value = 1;
       keyDown()

src/components/FusionSettings/FourPointCalibration1.vue

@@ -1,352 +0,0 @@
-<template>
-  <div class="row">
-    <div class="col-2">
-      <q-input filled type="number" class="q-pt-xs" style="text-align: center" :dense="true" @update:model-value="(val)=>{send_config}" @focus="now_index = 0"
-        v-model="four_val[0].x" label="x" lazy-rules />
-      <q-input filled type="number" class="q-pt-xs" :dense="true" @focus="now_index = 0" @update:model-value="(val)=>{send_config}" v-model="four_val[0].y"
-        label="y" lazy-rules />
-      <q-btn size="sm" dense color="white" @click="reset(0, false)" text-color="black"
-        :label="$t('reset') + $t('point') + '1'" />
-    </div>
-    <div class="col-8"></div>
-    <div class="col-2">
-      <q-input filled type="number" class="q-pt-xs" :dense="true" @focus="now_index = 1" @update:model-value="(val)=>{send_config}" v-model="four_val[1].x"
-        label="x" lazy-rules />
-      <q-input filled type="number" class="q-pt-xs" :dense="true" @focus="now_index = 1" @update:model-value="(val)=>{send_config}" v-model="four_val[1].y"
-        label="y" lazy-rules />
-      <q-btn size="sm" dense color="white" @click="reset(1, false)" text-color="black"
-        :label="$t('reset') + $t('point') + '2'" />
-    </div>
-
-    <div class="col-2"></div>
-    <div class="col-8">
-      <canvas id="canvas" ref="canvas" style="width: 100%;height: 40vh;background-color: aliceblue;"></canvas>
-    </div>
-    <div class="col-2"></div>
-
-    <div class="col-2">
-      <q-input filled type="number" class="q-pt-xs" :dense="true" @focus="now_index = 2" @update:model-value="(val)=>{send_config}" v-model="four_val[2].x"
-        label="x" lazy-rules />
-      <q-input filled type="number" class="q-pt-xs" :dense="true" @focus="now_index = 2" @update:model-value="(val)=>{send_config}" v-model="four_val[2].y"
-        label="y" lazy-rules />
-      <q-btn size="sm" dense color="white" @click="reset(2, false)" text-color="black"
-        :label="$t('reset') + $t('point') + '3'" />
-    </div>
-    <div class="col-8">
-      <q-btn size="sm" dense color="white" @click="resetall" text-color="black" :label="$t('resetall')" />
-    </div>
-    <div class="col-2">
-      <q-input filled type="number" :dense="true" @focus="now_index = 3" @update:model-value="(val)=>{send_config}" v-model="four_val[3].x" label="x" lazy-rules />
-      <q-input filled type="number" class="q-pt-md" :dense="true" @focus="now_index = 3" @update:model-value="(val)=>{send_config}" v-model="four_val[3].y"
-        label="y" lazy-rules />
-      <q-btn size="sm" dense color="white" @click="reset(3,false)" text-color="black"
-        :label="$t('reset') + $t('point') + '4'" />
-    </div>
-  </div>
-</template>
-
-
-<script lang="ts">
-import {
-  defineComponent,
-  ref,
-  watch,
-  computed,
-  defineProps,
-  withDefaults,
-  onMounted,
-  reactive,
-  onBeforeUnmount,
-  nextTick,
-} from "vue";
-import { useStore } from "src/store";
-import { useI18n } from "vue-i18n";
-import ClientConnection from "src/common/ClientConnection";
-import GlobalData from "src/common/GlobalData";
-import { Console } from "console";
-import VueKonva from 'vue-konva'
-
-
-
-export default defineComponent({
-  name: "ComponentFourPointCalibration",
-  setup() {
-    let $store = useStore();
-    let $t = useI18n();
-    let config = JSON.parse($store.state.fusion_configuration).projectors[0];
-    let set = GlobalData.getInstance().getCurrentClient();
-    const configselsect = computed(() => {
-      return $store.state.selected_projector;
-    });
-    //全部配置
-    let serverconfig = JSON.parse($store.state.fusion_configuration);
-    //用于计算当前投影仪的索引
-    const selectedprojector = computed(() => {
-      return (
-        $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col +
-        $store.getters.GetTheCurrentlySelectedCamera[1]
-      );
-    });
-    const now_index = ref(0);
-    const four_val = reactive([{ x: 0, y: 1080, control_point: 0 }, { x: 1920, y: 1080, control_point: 1 }, { x: 0, y: 0, control_point: 2 }, { x: 1920, y: 0, control_point: 3 },])
-    const set_cache: any = ref([]);
-    const ste_status = ref(0);
-
-    const use_set_cache = () => {
-      if (set_cache.value[selectedprojector.value] != null) {
-        let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
-        deepcopy(four_val, tmp);
-      }
-    };
-    const deepcopy = (o1: any, o2: any) => {
-      for (let k in o2) {
-        if (typeof o2[k] === "object") {
-          o1[k] = {};
-          deepcopy(o1[k], o2[k]);
-        } else {
-          o1[k] = o2[k];
-        }
-      }
-    };
-    const save_set_cache = () => {
-      set_cache.value[selectedprojector.value] = JSON.stringify(four_val);
-    };
-
-    onBeforeUnmount(() => {
-      sessionStorage.FourPointCalibration = JSON.stringify(set_cache.value);
-    });
-    const use_server_config = () => {
-      for (let index = 0; index < four_val.length; index++) {
-        four_val[index].x = config.point4[index].x;
-        four_val[index].y = config.point4[index].y;
-        four_val[index].control_point = config.point4[index].control_point;
-      }
-    };
-    const reset = (index: number, send: boolean) => {
-      four_val[index].x = config.point4[index].def_x;
-      four_val[index].y = config.point4[index].def_y;
-    }
-    const resetall = () => {
-      for (let index = 0; index < four_val.length; index++) {
-        reset(index, true)
-      }
-    }
-
-
-
-
-    watch(
-      () => configselsect,
-      (newVal, oldVal) => {
-        let tmp = JSON.parse($store.state.fusion_configuration);
-        let fortmp = null;
-        let i;
-        for (i of tmp.projectors) {
-          if (
-            i.col === $store.getters.GetTheCurrentlySelectedCamera[1] &&
-            i.row === $store.getters.GetTheCurrentlySelectedCamera[0]
-          ) {
-            fortmp = JSON.parse(JSON.stringify(i));
-          }
-        }
-        ste_status.value = 1;
-        config = JSON.parse(JSON.stringify(fortmp));
-        use_server_config();
-        use_set_cache();
-        setTimeout(() => {
-          ste_status.value = 0;
-        }, 100);
-      },
-      { deep: true }
-    );
-    watch(() => now_index, (newval, oldval) => {
-      if (ste_status.value == 1) return
-      set?.SetBlendingOption("blending_grids_select_point", `4:${now_index.value + 1}`)
-    }, { deep: true })
-
-
-    const send_config=(index?:number)=>{
-      index=index ?? now_index.value
-      // if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            4,
-            index+1,
-            Number(four_val[index].x),
-            Number(four_val[index].y)
-          );
-    }
-
-    // 创建canvas动画
-    const oninitCanvas = () => {
-      nextTick(() => {
-        const canvas: any = document.getElementById('canvas'),
-          ctx = canvas.getContext('2d'),
-          height: number = canvas.offsetHeight,
-          width: number = canvas.offsetWidth,
-          lines: string[] = ["rgba(248, 248, 247, .4)", "rgba(248, 248, 248, .5)", "rgba(248, 248, 246, .6)"],
-          boHeight: number = config.height / height,
-          boWwidth: number = config.width / width,
-          canvasAny: any = { width: width, height: height },
-          requestAnimFrame = (function () {        // 自执行函数
-            return function (callback: any) {
-              setTimeout(callback, 100 / 12)
-            }
-          })()
-        canvas.width = width
-        canvas.height = height
-
-        let radius = 5 //圆大小
-        let line_amount = 50 //线条数量
-
-
-
-        let drawing = false;
-        let ratio = canvas.width / canvas.clientWidth;
-        let currentRatio = 1 / ratio;
-
-        canvas.addEventListener('mousedown', (event: any) => {
-
-          const rect = canvas.getBoundingClientRect();
-          const x = event.clientX - rect.left;
-          const y = event.clientY - rect.top;
-          const val_x = Math.round(x * boWwidth)
-          const val_y = Math.round(Math.abs(config.height - y * boHeight))
-          for (let index = 0; index < four_val.length; index++) {
-            if ((four_val[index].x + radius * 6 > val_x && four_val[index].x - radius * 6 < val_x) && ((four_val[index].y + radius * 6 > val_y && four_val[index].y - radius * 6 < val_y))) {
-              drawing = true;
-              now_index.value = index
-            }
-
-          }
-        });
-
-        canvas.addEventListener('mousemove', (event: any) => {
-          if (drawing) {
-            const rect = canvas.getBoundingClientRect();
-            const x = event.clientX - rect.left;
-            const y = event.clientY - rect.top;
-            four_val[now_index.value].x = Math.round(x * boWwidth)
-            four_val[now_index.value].y = Math.round(Math.abs(config.height - y * boHeight))
-            send_config(now_index.value)
-          }
-
-        });
-
-        canvas.addEventListener('mouseup', (event: any) => {
-          if (drawing) {
-            const rect = canvas.getBoundingClientRect();
-            const x = event.clientX - rect.left;
-            const y = event.clientY - rect.top;
-            drawing = false;
-          }
-        });
-
-        /**
-         * 画线函数 x,y 为起点 x1,y1 为终点
-         * @param x
-         * @param y
-         * @param x1
-         * @param y1
-         */
-
-        const getPointOnCanvas = function (x: number, y: number, x1: number, y1: number) {
-          let star = coordinate_transformation(x,y)
-          let end = coordinate_transformation(x1,y1)
-          ctx.beginPath();
-          ctx.moveTo(star.x, star.y);
-          ctx.lineTo(end.x, end.y);
-          ctx.closePath();
-          ctx.strokeStyle = "black";
-          ctx.stroke();
-        }
-        /**
-         * 坐标转换 传入位于显示器的坐标 返回位于casve的坐标
-         * @param x
-         * @param y
-         */
-        const coordinate_transformation=(x:number,y:number):{ x:number,y:number }=>{
-           x=x/boWwidth
-           y=(config.height - y) / boHeight
-          return {x,y}
-        }
-
-        const round = (index: number) => {
-          ctx.beginPath();
-          switch (index) {
-            case 0:
-              ctx.arc(four_val[index].x / boWwidth + radius, (config.height - four_val[index].y) / boHeight + radius, radius, 0, Math.PI * 2);
-              break;
-            case 1:
-              ctx.arc(four_val[index].x / boWwidth - radius, (config.height - four_val[index].y) / boHeight + radius, radius, 0, Math.PI * 2);
-              break;
-            case 2:
-              ctx.arc(four_val[index].x / boWwidth + radius, (config.height - four_val[index].y) / boHeight - radius, radius, 0, Math.PI * 2);
-              break;
-            case 3:
-              ctx.arc(four_val[index].x / boWwidth - radius, (config.height - four_val[index].y) / boHeight - radius, radius, 0, Math.PI * 2);
-              break;
-            default:
-              break;
-          }
-          ctx.fillStyle = index == now_index.value ? "black" : "#174ea6";
-          ctx.closePath();
-          ctx.fill();
-          save_set_cache()
-        }
-
-        // 动起来
-        const loop = function () {
-          ctx.clearRect(0, 0, canvasAny.width, canvasAny.height)
-
-
-          for (let index = 0; index < 4; index++) {
-            round(index)
-          }
-          //x起点步进
-          let x_start = (four_val[0].x - four_val[1].x) / line_amount
-          //y起点步进
-          let y_start = (four_val[0].y - four_val[1].y) / line_amount
-          //x起点步进
-          let x_end = (four_val[2].x - four_val[3].x) / line_amount
-          //y起点步进
-          let y_end = (four_val[2].y - four_val[3].y) / line_amount
-
-          let x_start1 = (four_val[0].x - four_val[2].x) / line_amount
-          //y起点步进
-          let y_start1 = (four_val[0].y - four_val[2].y) / line_amount
-          //x起点步进
-          let x_end1 = (four_val[1].x - four_val[3].x) / line_amount
-          //y起点步进
-          let y_end1 = (four_val[1].y - four_val[3].y) / line_amount
-
-          for (let index = 0; index < line_amount; index++) {
-            getPointOnCanvas(four_val[0].x-index*x_start,four_val[0].y-index*y_start,four_val[2].x-index*x_end,four_val[2].y-index*y_end)
-            getPointOnCanvas(four_val[0].x-index*x_start1,four_val[0].y-index*y_start1,four_val[1].x-index*x_end1,four_val[1].y-index*y_end1)
-          }
-          getPointOnCanvas(four_val[1].x,four_val[1].y,four_val[3].x,four_val[3].y)
-          getPointOnCanvas(four_val[2].x,four_val[2].y,four_val[3].x,four_val[3].y)
-          requestAnimFrame(loop)    // 启动函数
-        }
-        loop()
-      })
-    }
-
-
-
-    onMounted(() => {
-      use_server_config()
-      use_set_cache()
-      oninitCanvas()
-    })
-    return {
-      send_config,
-      now_index,
-      four_val,
-      reset,
-      resetall
-    }
-  }
-})
-</script>

src/components/FusionSettingsDialog.vue

@@ -200,7 +200,7 @@ import { EDeviceAttribute } from "src/entities/EDeviceAttribute";
 import ProjectorItem from "src/components/FusionSettings/ProjectorItem.vue";
 
 import FusionLocale from "src/components/FusionSettings/FusionLocale.vue";
-import FourPointCalibration from "src/components/FusionSettings/FourPointCalibration1.vue";
+import FourPointCalibration from "src/components/FusionSettings/FourPointCalibration.vue";
 import GridSettings from "src/components/FusionSettings/GridSettings.vue";
 import SurfaceCorrection from "src/components/FusionSettings/SurfaceCorrection.vue";
 import DensityCorrection from "src/components/FusionSettings/DensityCorrection.vue";