canvas 4点校正

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,8 +220,10 @@ 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;
@@ -231,6 +233,7 @@ export default defineComponent({
         }, 100);
         }
       }
+    }
     onMounted(() => {
       ste_status.value = 1;
       keyDown()

src/components/FusionSettings/FourPointCalibration1.vue

@@ -0,0 +1,352 @@
+<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/FourPointCalibration.vue";
+import FourPointCalibration from "src/components/FusionSettings/FourPointCalibration1.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";