canvas 4点校正
This commit is contained in:
parent
803647a4e8
commit
58e880b260
|
|
@ -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,15 +220,18 @@ export default defineComponent({
|
|||
points[now_index.value].y
|
||||
break;
|
||||
default:
|
||||
lock=1
|
||||
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)`);
|
||||
isactivearray.value[now_index.value] = false;
|
||||
isshowarray.value[now_index.value] = false;
|
||||
setTimeout(() => {
|
||||
isshowarray.value[now_index.value] = true;
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Reference in New Issue