Compare commits

...

2 Commits

Author SHA1 Message Date
shefengchun 58e880b260 canvas 4点校正 2023-02-10 16:58:22 +08:00
shefengchun 803647a4e8 增加选择疏密点时发送点 2023-02-09 17:03:14 +08:00
4 changed files with 360 additions and 5 deletions

View File

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

View File

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

View File

@ -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>

View File

@ -200,7 +200,7 @@ import { EDeviceAttribute } from "src/entities/EDeviceAttribute";
import ProjectorItem from "src/components/FusionSettings/ProjectorItem.vue"; import ProjectorItem from "src/components/FusionSettings/ProjectorItem.vue";
import FusionLocale from "src/components/FusionSettings/FusionLocale.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 GridSettings from "src/components/FusionSettings/GridSettings.vue";
import SurfaceCorrection from "src/components/FusionSettings/SurfaceCorrection.vue"; import SurfaceCorrection from "src/components/FusionSettings/SurfaceCorrection.vue";
import DensityCorrection from "src/components/FusionSettings/DensityCorrection.vue"; import DensityCorrection from "src/components/FusionSettings/DensityCorrection.vue";