增加动态添加点
This commit is contained in:
parent
da82416bd1
commit
dbecb1ff15
File diff suppressed because it is too large
Load Diff
|
|
@ -1,120 +1,97 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-2">
|
<div class="col-1"></div>
|
||||||
<q-input filled type="number" class="q-pt-xs" style="text-align: center" :dense="true"
|
<div class="col-10 q-pt-md">
|
||||||
@focus="isactivearray[0] = false" v-model="four[0].x" label="x" lazy-rules />
|
<div ref="div" style="width: 100%; background-color: #646464; height: 40vh">
|
||||||
<q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[0] = false" v-model="four[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="isactivearray[1] = false" v-model="four[1].x"
|
|
||||||
label="x" lazy-rules />
|
|
||||||
<q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[1] = false" v-model="four[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">
|
|
||||||
<div ref="div" style="background-color: #646464; height: 40vh">
|
|
||||||
<div style="position: absolute">
|
<div style="position: absolute">
|
||||||
<vue3ResizeDrag style="border: 0;" :class="[now_index == 0 ? 'action' : 'point']" v-if="isshowarray[0]"
|
<Vue3DraggableResizable :class="[options_model == index ? 'action' : 'point']"
|
||||||
:isActive="isactivearray[0]" @mousedown="activeMouseDown(0)" @mouseUpHandler="mouseUpHandler(0)" :w="20"
|
v-for="(item, index) in value_point.length" :initW="point.w" :adsorbParent="false" :initH="point.h" :resizable="false"
|
||||||
:h="20" :x="points[0].x" :y="points[0].y" :isResizable="false" @moveHandler="moveHandler_1">
|
v-model:x="value_point[index].x" v-model:y="value_point[index].y" @activated="options_model = index"
|
||||||
<div>1</div>
|
@click="options_model = index" @dragging="dragStartHandle($event, index)">
|
||||||
</vue3ResizeDrag>
|
<span>{{
|
||||||
<vue3ResizeDrag style="border: 0;" :class="[now_index == 1 ? 'action' : 'point']" v-if="isshowarray[1]"
|
index+ 1
|
||||||
:isActive="isactivearray[1]" @mousedown="activeMouseDown(1)" @mouseUpHandler="mouseUpHandler(1)" :w="20"
|
}}</span>
|
||||||
:h="20" :x="points[1].x" :y="points[1].y" :isResizable="false" @moveHandler="moveHandler_2">
|
</Vue3DraggableResizable>
|
||||||
<div>2</div>
|
|
||||||
</vue3ResizeDrag>
|
|
||||||
<vue3ResizeDrag style="border: 0;" :class="[now_index == 2 ? 'action' : 'point']" v-if="isshowarray[2]"
|
|
||||||
:isActive="isactivearray[2]" @mousedown="activeMouseDown(2)" @mouseUpHandler="mouseUpHandler(2)" :w="20"
|
|
||||||
:h="20" :x="points[2].x" :y="points[2].y" :isResizable="false" @moveHandler="moveHandler_3">
|
|
||||||
<div>3</div>
|
|
||||||
</vue3ResizeDrag>
|
|
||||||
<vue3ResizeDrag style="border: 0;" :class="[now_index == 3 ? 'action' : 'point']" v-if="isshowarray[3]"
|
|
||||||
:isActive="isactivearray[3]" @mousedown="activeMouseDown(3)" @mouseUpHandler="mouseUpHandler(3)" :w="20"
|
|
||||||
:h="20" :x="points[3].x" :y="points[3].y" :isResizable="false" @moveHandler="moveHandler_4">
|
|
||||||
<div>4</div>
|
|
||||||
</vue3ResizeDrag>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2"></div>
|
|
||||||
|
|
||||||
<div class="col-2">
|
|
||||||
<q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[2] = false" v-model="four[2].x"
|
|
||||||
label="x" lazy-rules />
|
|
||||||
<q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[2] = false" v-model="four[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>
|
||||||
<div class="col-8">
|
<div>
|
||||||
<q-btn size="sm" dense color="white" @click="resetall" text-color="black" :label="$t('resetall')" />
|
<div class="row">
|
||||||
</div>
|
<div class="col-1"></div>
|
||||||
<div class="col-2">
|
<div class="col-2 q-px-md"> <q-select class="q-pt-md" :label="$t('point')" :dense="true" filled
|
||||||
<q-input filled type="number" :dense="true" @focus="isactivearray[3] = false" v-model="four[3].x" label="x"
|
v-model="options_model" @update:model-value="(val) => { options_model = val }" :options="options" emit-value
|
||||||
|
map-options /></div>
|
||||||
|
<div class="col-2 q-px-md"> <q-input filled type="number" class="q-pt-md" :dense="true"
|
||||||
|
v-model="value[options_model].x" @update:model-value="chang(options_model, $event, 'h')" label="x"
|
||||||
lazy-rules />
|
lazy-rules />
|
||||||
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false" v-model="four[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>
|
||||||
|
<div class="col-2 q-px-md"> <q-input filled type="number" class="q-pt-md" :dense="true"
|
||||||
|
v-model="value[options_model].y" @update:model-value="chang(options_model, $event, 'h')" label="y"
|
||||||
|
lazy-rules /></div>
|
||||||
|
<div class="q-pt-md col-2">
|
||||||
|
<q-btn color="white" @click="reset(options_model, true, 'h')" text-color="black" :label="$t('reset')" />
|
||||||
|
</div>
|
||||||
|
<div class="col-2 q-pt-md">
|
||||||
|
<div><q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.point {
|
.action {
|
||||||
|
background-color: rgb(27, 180, 111);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #0000ff;
|
|
||||||
color: aliceblue;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action {
|
.point {
|
||||||
|
background-color: rgb(186, 245, 245);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: aqua;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script lang="ts">
|
|
||||||
import vue3ResizeDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
|
|
||||||
import { dom } from "quasar";
|
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
import {
|
import {
|
||||||
defineComponent,
|
defineComponent,
|
||||||
ref,
|
|
||||||
watch,
|
|
||||||
computed,
|
|
||||||
defineProps,
|
|
||||||
withDefaults,
|
|
||||||
onMounted,
|
onMounted,
|
||||||
reactive,
|
ref,
|
||||||
onBeforeUnmount,
|
computed,
|
||||||
|
watch,
|
||||||
|
nextTick,
|
||||||
|
onBeforeUnmount
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { useStore } from "src/store";
|
import { useStore } from "src/store";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import ClientConnection from "src/common/ClientConnection";
|
import Vue3DraggableResizable from 'vue3-draggable-resizable'
|
||||||
|
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
|
||||||
|
|
||||||
|
|
||||||
|
import DensityCorrection from "src/entities/DensityCorrection";
|
||||||
|
import DensityCorrectionPoint from "src/entities/DensityCorrectionPoint";
|
||||||
|
import { config } from "process";
|
||||||
|
import { QSelect, QInput, QBtn } from "quasar";
|
||||||
|
import { div } from "zrender/lib/core/vector";
|
||||||
import GlobalData from "src/common/GlobalData";
|
import GlobalData from "src/common/GlobalData";
|
||||||
import { Console } from "console";
|
import { number } from "@intlify/core-base";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "ComponentFourPointCalibration",
|
name: "ComponentDensityCorrection",
|
||||||
components: {
|
components: {
|
||||||
vue3ResizeDrag,
|
Vue3DraggableResizable
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
|
let set = GlobalData.getInstance().getCurrentClient();
|
||||||
let $store = useStore();
|
let $store = useStore();
|
||||||
let $t = useI18n();
|
let $t = useI18n();
|
||||||
|
const ste_status = ref(0);
|
||||||
let config = JSON.parse($store.state.fusion_configuration).projectors[0];
|
let config = JSON.parse($store.state.fusion_configuration).projectors[0];
|
||||||
let set = GlobalData.getInstance().getCurrentClient();
|
|
||||||
const configselsect = computed(() => {
|
const configselsect = computed(() => {
|
||||||
return $store.state.selected_projector;
|
return $store.state.selected_projector;
|
||||||
});
|
});
|
||||||
|
|
||||||
//用于计算当前投影仪的索引
|
//用于计算当前投影仪的索引
|
||||||
let serverconfig = JSON.parse($store.state.fusion_configuration);
|
let serverconfig = JSON.parse($store.state.fusion_configuration);
|
||||||
const selectedprojector = computed(() => {
|
const selectedprojector = computed(() => {
|
||||||
|
|
@ -123,58 +100,10 @@ export default defineComponent({
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[1]
|
$store.getters.GetTheCurrentlySelectedCamera[1]
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
const set_cache: any = ref([]);
|
|
||||||
let four = reactive([
|
const value_point_amount = ref(5)
|
||||||
{ x: config.point4[0].x, y: config.point4[0].y },
|
|
||||||
{ x: config.point4[1].x, y: config.point4[1].y },
|
|
||||||
{ x: config.point4[2].x, y: config.point4[2].x },
|
|
||||||
{ x: config.point4[3].x, y: config.point4[3].y },
|
|
||||||
]);
|
|
||||||
let defaultfour = ref([
|
|
||||||
{ x: 0, y: 1080 },
|
|
||||||
{ x: 1920, y: 1080 },
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
{ x: 1920, y: 0 },
|
|
||||||
]);
|
|
||||||
let defaultfourpostion: any = ref([
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
]);
|
|
||||||
let fourpostion: any = ref([
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
]);
|
|
||||||
let div: any = ref(null);
|
|
||||||
let Proportion = ref({ x: 0, y: 0 }); //缩放比例
|
|
||||||
let points = reactive([
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
{ x: 0, y: 0 },
|
|
||||||
]); //点的位置
|
|
||||||
const now_index = ref(0)
|
|
||||||
const isshowarray = ref([true, true, true, true]);
|
|
||||||
const isactivearray = ref([true, true, true, true]);
|
|
||||||
const ste_status = ref(0);
|
|
||||||
const save = () => {
|
|
||||||
set?.SaveBlendingConfig("");
|
|
||||||
setTimeout(() => {
|
|
||||||
set?.GetBlendingConfig("").then((res) => {
|
|
||||||
$store.commit("setfusion_configuration", res?.config);
|
|
||||||
});
|
|
||||||
}, 1000);
|
|
||||||
};
|
|
||||||
const use_set_cache = () => {
|
|
||||||
if (set_cache.value[selectedprojector.value] != null) {
|
|
||||||
let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
|
|
||||||
deepcopy(four, tmp);
|
|
||||||
}
|
|
||||||
syncpoint();
|
|
||||||
};
|
|
||||||
const deepcopy = (o1: any, o2: any) => {
|
const deepcopy = (o1: any, o2: any) => {
|
||||||
for (let k in o2) {
|
for (let k in o2) {
|
||||||
if (typeof o2[k] === "object") {
|
if (typeof o2[k] === "object") {
|
||||||
|
|
@ -185,240 +114,39 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const save_set_cache = () => {
|
|
||||||
set_cache.value[selectedprojector.value] = JSON.stringify(four);
|
|
||||||
};
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
sessionStorage.FourPointCalibration = JSON.stringify(set_cache.value);
|
|
||||||
});
|
|
||||||
const activeMouseDown = (index: number) => {
|
|
||||||
isactivearray.value[index] = true;
|
|
||||||
now_index.value = index
|
|
||||||
};
|
|
||||||
const mouseUpHandler = (index: number) => {
|
|
||||||
isactivearray.value[index] = false;
|
|
||||||
};
|
|
||||||
const keyDown = () => {
|
|
||||||
document.onkeydown = (e) => {
|
|
||||||
let lock = 0
|
|
||||||
let e1 = e || window.event || arguments.callee.caller.arguments[0]
|
|
||||||
switch (e.code) {
|
|
||||||
case "KeyW":
|
|
||||||
points[now_index.value].x
|
|
||||||
points[now_index.value].y--
|
|
||||||
break;
|
|
||||||
case "KeyA":
|
|
||||||
points[now_index.value].x--;
|
|
||||||
points[now_index.value].y
|
|
||||||
break;
|
|
||||||
case "KeyS":
|
|
||||||
points[now_index.value].x;
|
|
||||||
points[now_index.value].y++
|
|
||||||
break;
|
|
||||||
case "KeyD":
|
|
||||||
points[now_index.value].x++;
|
|
||||||
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;
|
|
||||||
isshowarray.value[now_index.value] = false;
|
|
||||||
setTimeout(() => {
|
|
||||||
isshowarray.value[now_index.value] = true;
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
ste_status.value = 1;
|
|
||||||
keyDown()
|
|
||||||
setpoa();
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
ste_status.value = 0;
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
|
|
||||||
const use_server_config = () => {
|
const use_server_config = () => {
|
||||||
for (let index = 0; index < fourpostion.value.length; index++) {
|
value.value = []
|
||||||
defaultfour.value[index].x = config.point4[index].def_x;
|
value_point.value = []
|
||||||
defaultfour.value[index].y = config.point4[index].def_y;
|
for (let index = 0; index < config.point4.length; index++) {
|
||||||
four[index].x = config.point4[index].x;
|
let tmp: DensityCorrectionPoint = config.point4[index];
|
||||||
four[index].y = config.point4[index].y;
|
value.value.push(tmp)
|
||||||
|
let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
|
||||||
|
let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
|
||||||
|
let tmp_point: DensityCorrectionPoint = {
|
||||||
|
control_point: tmp.control_point,
|
||||||
|
x: x_y.x,
|
||||||
|
y: x_y.y,
|
||||||
|
def_x: def_x_f.x,
|
||||||
|
def_y: def_x_f.y
|
||||||
}
|
}
|
||||||
};
|
value_point.value.push(tmp_point)
|
||||||
|
|
||||||
const setpoa = () => {
|
|
||||||
try {
|
|
||||||
points[0].x = 0;
|
|
||||||
points[0].y = 0;
|
|
||||||
|
|
||||||
points[1].x = div.value.offsetWidth - 25;
|
|
||||||
points[1].y = 0;
|
|
||||||
|
|
||||||
points[2].x = 0;
|
|
||||||
points[2].y = div.value.offsetHeight - 25;
|
|
||||||
|
|
||||||
points[3].x = div.value.offsetWidth - 25;
|
|
||||||
points[3].y = div.value.offsetHeight - 25;
|
|
||||||
|
|
||||||
fourpostion.value[0].x = 0;
|
|
||||||
fourpostion.value[0].y = 0;
|
|
||||||
|
|
||||||
fourpostion.value[1].x = div.value.offsetWidth - 25;
|
|
||||||
fourpostion.value[1].y = 0;
|
|
||||||
|
|
||||||
fourpostion.value[2].x = 0;
|
|
||||||
fourpostion.value[2].y = div.value.offsetHeight - 25;
|
|
||||||
|
|
||||||
fourpostion.value[3].x = div.value.offsetWidth - 25;
|
|
||||||
fourpostion.value[3].y = div.value.offsetHeight - 25;
|
|
||||||
|
|
||||||
Proportion.value.x = config.width / (div.value.offsetWidth - 25);
|
|
||||||
Proportion.value.y = config.height / (div.value.offsetHeight - 25);
|
|
||||||
for (let index = 0; index < fourpostion.value.length; index++) {
|
|
||||||
defaultfourpostion.value[index].x = fourpostion.value[index].x;
|
|
||||||
defaultfourpostion.value[index].y = fourpostion.value[index].y;
|
|
||||||
defaultfour.value[index].x = config.point4[index].def_x;
|
|
||||||
defaultfour.value[index].y = config.point4[index].def_y;
|
|
||||||
four[index].x = config.point4[index].x;
|
|
||||||
four[index].y = config.point4[index].y;
|
|
||||||
}
|
}
|
||||||
if (
|
|
||||||
sessionStorage.FourPointCalibration &&
|
|
||||||
sessionStorage.FourPointCalibration.length > 0
|
|
||||||
) {
|
|
||||||
set_cache.value = JSON.parse(sessionStorage.FourPointCalibration);
|
|
||||||
use_set_cache();
|
|
||||||
} else {
|
|
||||||
}
|
}
|
||||||
set_point_x();
|
|
||||||
} catch (error) {
|
|
||||||
|
|
||||||
|
const use_set_cache = () => {
|
||||||
|
if (set_cache.value[selectedprojector.value] != null) {
|
||||||
|
let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
|
||||||
|
deepcopy(value.value, tmp.value)
|
||||||
|
deepcopy(value_point.value, tmp.value_point)
|
||||||
|
recalculate_coordinates()
|
||||||
}
|
}
|
||||||
};
|
|
||||||
watch(
|
|
||||||
() => four[0],
|
|
||||||
(newVal, oldVal) => {
|
|
||||||
if ($store.state.enablefusion && ste_status.value == 0)
|
|
||||||
set?.setBlendingCorrection(
|
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[0],
|
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[1],
|
|
||||||
4, 4,
|
|
||||||
1,
|
|
||||||
Number(newVal.x),
|
|
||||||
Number(newVal.y)
|
|
||||||
);
|
|
||||||
if (!isactivearray.value[0]) {
|
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
|
||||||
let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
|
|
||||||
points[0].x = x;
|
|
||||||
points[0].y = y;
|
|
||||||
isshowarray.value[0] = false;
|
|
||||||
isactivearray.value[0] = false;
|
|
||||||
setTimeout(() => {
|
|
||||||
isshowarray.value[0] = true;
|
|
||||||
}, 100);
|
|
||||||
}
|
}
|
||||||
now_index.value = 0
|
|
||||||
save_set_cache();
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
);
|
|
||||||
watch(
|
|
||||||
() => four[1],
|
|
||||||
(newVal, oldVal) => {
|
|
||||||
if ($store.state.enablefusion && ste_status.value == 0)
|
|
||||||
set?.setBlendingCorrection(
|
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[0],
|
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[1],
|
|
||||||
4, 4,
|
|
||||||
2,
|
|
||||||
Number(newVal.x),
|
|
||||||
Number(newVal.y)
|
|
||||||
);
|
|
||||||
if (!isactivearray.value[1]) {
|
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
|
||||||
let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
|
|
||||||
points[1].x = x;
|
|
||||||
points[1].y = y;
|
|
||||||
isshowarray.value[1] = false;
|
|
||||||
isactivearray.value[1] = false;
|
|
||||||
setTimeout(() => {
|
|
||||||
isshowarray.value[1] = true;
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
now_index.value = 1
|
|
||||||
save_set_cache();
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
);
|
|
||||||
watch(
|
|
||||||
() => four[2],
|
|
||||||
(newVal, oldVal) => {
|
|
||||||
if ($store.state.enablefusion && ste_status.value == 0)
|
|
||||||
set?.setBlendingCorrection(
|
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[0],
|
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[1],
|
|
||||||
4, 4,
|
|
||||||
3,
|
|
||||||
Number(newVal.x),
|
|
||||||
Number(newVal.y)
|
|
||||||
);
|
|
||||||
if (!isactivearray.value[2]) {
|
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
|
||||||
let y = Math.ceil(
|
|
||||||
config.height / Proportion.value.y - newVal.y / Proportion.value.y
|
|
||||||
);
|
|
||||||
|
|
||||||
points[2].x = x;
|
const save_set_cache = () => {
|
||||||
points[2].y = y;
|
let tmp = { value: value.value, value_point: value_point.value }
|
||||||
isshowarray.value[2] = false;
|
set_cache.value[selectedprojector.value] = JSON.stringify(tmp);
|
||||||
setTimeout(() => {
|
|
||||||
isshowarray.value[2] = true;
|
|
||||||
}, 100);
|
|
||||||
}
|
}
|
||||||
now_index.value = 2
|
|
||||||
save_set_cache();
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
);
|
|
||||||
watch(
|
|
||||||
() => four[3],
|
|
||||||
(newVal, oldVal) => {
|
|
||||||
if ($store.state.enablefusion && ste_status.value == 0)
|
|
||||||
set?.setBlendingCorrection(
|
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[0],
|
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[1],
|
|
||||||
4, 4,
|
|
||||||
4,
|
|
||||||
Number(newVal.x),
|
|
||||||
Number(newVal.y)
|
|
||||||
);
|
|
||||||
if (!isactivearray.value[3]) {
|
|
||||||
let x = Math.ceil(newVal.x / Proportion.value.x);
|
|
||||||
let y = Math.ceil(
|
|
||||||
config.height / Proportion.value.y - newVal.y / Proportion.value.y
|
|
||||||
);
|
|
||||||
|
|
||||||
points[3].x = x;
|
|
||||||
points[3].y = y;
|
|
||||||
isshowarray.value[3] = false;
|
|
||||||
setTimeout(() => {
|
|
||||||
isshowarray.value[3] = true;
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
now_index.value = 3
|
|
||||||
save_set_cache();
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
);
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => configselsect,
|
() => configselsect,
|
||||||
|
|
@ -441,176 +169,206 @@ export default defineComponent({
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
ste_status.value = 0;
|
ste_status.value = 0;
|
||||||
}, 100);
|
}, 100);
|
||||||
set_point_x();
|
|
||||||
},
|
},
|
||||||
{ deep: true }
|
{ deep: true }
|
||||||
);
|
);
|
||||||
watch(() => now_index, (newval, oldval) => {
|
|
||||||
if (ste_status.value == 1) return
|
|
||||||
set?.SetBlendingOption("blending_grids_select_point", `4:${now_index.value + 1}`)
|
|
||||||
|
const set_cache: any = ref([]);
|
||||||
|
//值
|
||||||
|
let value = ref(<DensityCorrection[]>[]);
|
||||||
|
//位置
|
||||||
|
let value_point = ref(<DensityCorrectionPoint[]>[]);
|
||||||
|
/**
|
||||||
|
* 当前选中的点的索引
|
||||||
|
*/
|
||||||
|
const options_model = ref(0)
|
||||||
|
|
||||||
|
const div = ref();
|
||||||
|
const max = ref({ x: 0, y: 0 })
|
||||||
|
const point = ref({ w: 20, h: 20 })
|
||||||
|
|
||||||
|
watch(() => options_model, (newval, oldval) => {
|
||||||
|
set?.SetBlendingOption("blending_grids_select_point", `4:${options_model.value + 1}`)
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
//为了加载 缓存的配置时 同步点的位置
|
|
||||||
const syncpoint = () => {
|
/**
|
||||||
for (let index = 0; index < fourpostion.value.length; index++) {
|
* 分辨率和页面的比例
|
||||||
isactivearray.value[index] = false;
|
*/
|
||||||
|
let Proportion = ref({ x: 100, y: 1000 });
|
||||||
|
nextTick(() => {
|
||||||
|
max.value.x = div.value.offsetWidth
|
||||||
|
max.value.y = div.value.offsetHeight
|
||||||
|
})
|
||||||
|
|
||||||
|
const options = computed(() => {
|
||||||
|
let tmp = []
|
||||||
|
for (let index = 0; index < value_point.value.length; index++) {
|
||||||
|
tmp.push({
|
||||||
|
label: `${index + 1}`,
|
||||||
|
value: index,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
};
|
return tmp
|
||||||
//手动同步
|
})
|
||||||
const set_point_x = () => {
|
|
||||||
let x = Math.ceil(four[0].x / Proportion.value.x);
|
|
||||||
let y = Math.ceil((config.height - four[0].y) / Proportion.value.y);
|
|
||||||
set_point(0, x, y);
|
|
||||||
|
|
||||||
x = Math.ceil(four[1].x / Proportion.value.x);
|
const chang_point_amount = (val: number) => {
|
||||||
y = Math.ceil((config.height - four[1].y) / Proportion.value.y);
|
start_point()
|
||||||
set_point(1, x, y);
|
|
||||||
|
|
||||||
x = Math.ceil(four[2].x / Proportion.value.x);
|
|
||||||
y = Math.ceil(
|
|
||||||
config.height / Proportion.value.y - four[2].y / Proportion.value.y
|
|
||||||
);
|
|
||||||
set_point(2, x, y);
|
|
||||||
|
|
||||||
x = Math.ceil(four[3].x / Proportion.value.x);
|
|
||||||
y = Math.ceil(
|
|
||||||
config.height / Proportion.value.y - four[3].y / Proportion.value.y
|
|
||||||
);
|
|
||||||
set_point(3, x, y);
|
|
||||||
};
|
|
||||||
|
|
||||||
const set_point = (index: number, x: number, y: number) => {
|
|
||||||
points[index].x = x;
|
|
||||||
points[index].y = y;
|
|
||||||
isshowarray.value[index] = false;
|
|
||||||
isactivearray.value[index] = false;
|
|
||||||
setTimeout(() => {
|
|
||||||
isshowarray.value[index] = true;
|
|
||||||
}, 100);
|
|
||||||
};
|
|
||||||
const reset = (index: number, send: boolean) => {
|
|
||||||
send = send ?? true;
|
|
||||||
isactivearray.value[index] = false;
|
|
||||||
fourpostion.value[index].x = defaultfourpostion.value[index].x;
|
|
||||||
fourpostion.value[index].y = defaultfourpostion.value[index].y;
|
|
||||||
|
|
||||||
four[index].x = config.point4[index].def_x;
|
|
||||||
four[index].y = config.point4[index].def_y;
|
|
||||||
|
|
||||||
if (send) {
|
|
||||||
set?.setBlendingCorrection(
|
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[0],
|
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[1],
|
|
||||||
4, 4,
|
|
||||||
index + 1,
|
|
||||||
Number(config.point4[index].def_x),
|
|
||||||
Number(config.point4[index].def_y)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
isshowarray.value[index] = false;
|
const dragStartHandle = ($event: any, index: number) => {
|
||||||
setTimeout(() => {
|
let obj_x = $event.x
|
||||||
isshowarray.value[index] = true;
|
let obj_y = $event.y
|
||||||
}, 100);
|
let tmp = coordinate_transformation_xy_to_value(obj_x, obj_y)
|
||||||
};
|
value.value[index].x = Math.round(tmp.x)
|
||||||
|
value.value[index].y = Math.round(tmp.y)
|
||||||
const resetall = () => {
|
send_value(index, Math.round(tmp.x), Math.round(tmp.y))
|
||||||
for (let index = 0; index < fourpostion.value.length; index++) {
|
save_set_cache()
|
||||||
reset(index, false);
|
|
||||||
}
|
}
|
||||||
set?.setBlendingCorrection(
|
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[0],
|
|
||||||
$store.getters.GetTheCurrentlySelectedCamera[1],
|
|
||||||
4, 4, 0, 0, 0
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const moveHandler_1 = (data: any) => {
|
const chang = (index: number, $event: any, type: string) => {
|
||||||
let x = Math.round(
|
index = Number(index)
|
||||||
(data.left - fourpostion.value[0].x) * Proportion.value.x + 0
|
let tmp = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y)
|
||||||
);
|
console.log(tmp)
|
||||||
let y = Math.round(
|
value_point.value[index].y = Math.round(tmp.y)
|
||||||
config.height - data.top * Proportion.value.y - fourpostion.value[0].y
|
value_point.value[index].x = Math.round(tmp.x)
|
||||||
);
|
console.log(value_point.value[index])
|
||||||
|
send_value(index, Math.round(value.value[index].x), Math.round(value.value[index].y))
|
||||||
|
|
||||||
four[0].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
|
save_set_cache()
|
||||||
four[0].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
|
}
|
||||||
isactivearray.value[0] = true;
|
|
||||||
points[now_index.value].x = data.left
|
|
||||||
points[now_index.value].y = data.top
|
|
||||||
|
|
||||||
save_set_cache();
|
/**
|
||||||
};
|
* 将分辨率的坐标转换为 页面的坐标
|
||||||
const moveHandler_2 = (data: any) => {
|
* @param x x坐标
|
||||||
let x = Math.round(
|
* @param y y坐标
|
||||||
(data.left - fourpostion.value[1].x) * Proportion.value.x + config.width
|
*/
|
||||||
);
|
const coordinate_transformation_value_to_xy = (x: number, y: number): { x: number, y: number } => {
|
||||||
let y = Math.round(
|
x = x / Proportion.value.x
|
||||||
config.height - data.top * Proportion.value.y - fourpostion.value[1].y
|
y = (config.height - y) / Proportion.value.y
|
||||||
);
|
return { x, y }
|
||||||
four[1].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
|
}
|
||||||
four[1].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
|
|
||||||
points[now_index.value].x = data.left
|
|
||||||
points[now_index.value].y = data.top
|
/**
|
||||||
save_set_cache();
|
* 将页面的坐标转换为 分辨率的坐标
|
||||||
};
|
* @param x x坐标
|
||||||
const moveHandler_3 = (data: any) => {
|
* @param y y坐标
|
||||||
let x = Math.round(
|
*/
|
||||||
(data.left - fourpostion.value[2].x) * Proportion.value.x
|
const coordinate_transformation_xy_to_value = (x: number, y: number): { x: number, y: number } => {
|
||||||
);
|
x = (x + point.value.w / 14) * Proportion.value.x
|
||||||
let y = Math.abs(
|
// x = (x-point.value.w) * Proportion.value.x
|
||||||
Math.round((data.top - fourpostion.value[2].y) * Proportion.value.y)
|
y = (max.value.y - (y + point.value.h)) * Proportion.value.y
|
||||||
);
|
return { x, y }
|
||||||
four[2].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
|
}
|
||||||
four[2].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
|
|
||||||
points[now_index.value].x = data.left
|
const start_point = () => {
|
||||||
points[now_index.value].y = data.top
|
value.value = []
|
||||||
save_set_cache();
|
value_point.value = []
|
||||||
};
|
for (let index = 0; index < config.point4.length; index++) {
|
||||||
const moveHandler_4 = (data: any) => {
|
let tmp: DensityCorrectionPoint = config.point4[index];
|
||||||
let x = Math.round(
|
value.value.push(tmp)
|
||||||
(data.left - fourpostion.value[3].x) * Proportion.value.x + config.width
|
let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
|
||||||
);
|
let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
|
||||||
let y = Math.abs(
|
let tmp_point: DensityCorrectionPoint = {
|
||||||
Math.round((data.top - fourpostion.value[3].y) * Proportion.value.y)
|
control_point: tmp.control_point,
|
||||||
);
|
x: x_y.x,
|
||||||
four[3].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
|
y: x_y.y,
|
||||||
four[3].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
|
def_x: def_x_f.x,
|
||||||
points[now_index.value].x = data.left
|
def_y: def_x_f.y
|
||||||
points[now_index.value].y = data.top
|
}
|
||||||
save_set_cache();
|
value_point.value.push(tmp_point)
|
||||||
};
|
}
|
||||||
//窗口变动重新渲染
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建空值 让dom先渲染
|
||||||
|
*/
|
||||||
|
const start = () => {
|
||||||
|
let tmp: DensityCorrectionPoint = { control_point: 0, x: 0, y: 0, def_x: 0, def_y: 0 };
|
||||||
|
value.value.push(tmp)
|
||||||
|
value_point.value.push(tmp)
|
||||||
|
}
|
||||||
|
start()
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
//监听窗口变化
|
Proportion.value.x = config.width / (div.value.offsetWidth - point.value.w)
|
||||||
|
Proportion.value.y = config.height / (div.value.offsetHeight - point.value.h)
|
||||||
|
start_point()
|
||||||
|
start()
|
||||||
|
use_server_config()
|
||||||
|
if (
|
||||||
|
sessionStorage.FourPointCalibration &&
|
||||||
|
sessionStorage.FourPointCalibration.length > 0
|
||||||
|
) {
|
||||||
|
set_cache.value = JSON.parse(sessionStorage.FourPointCalibration);
|
||||||
|
use_set_cache();
|
||||||
|
}
|
||||||
window.onresize = () => {
|
window.onresize = () => {
|
||||||
return (() => {
|
return (() => {
|
||||||
ste_status.value = 1;
|
if (div != null) {
|
||||||
if (div != null) setpoa();
|
recalculate_coordinates()
|
||||||
|
}
|
||||||
setTimeout(() => {
|
|
||||||
ste_status.value = 0;
|
|
||||||
}, 100);
|
|
||||||
})();
|
})();
|
||||||
};
|
};
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
sessionStorage.FourPointCalibration = JSON.stringify(set_cache.value);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const reset = (index: number, send: boolean, type: string) => {
|
||||||
|
value.value[index].x = value.value[index].def_x
|
||||||
|
value.value[index].y = value.value[index].def_y
|
||||||
|
// value_point.value[index].x = value_point.value[index].def_x
|
||||||
|
// value_point.value[index].y = value_point.value[index].def_y
|
||||||
|
chang(index, value.value[index].def_y, type)
|
||||||
|
save_set_cache()
|
||||||
|
}
|
||||||
|
const send_value = (index: number, x: number, y: number) => {
|
||||||
|
let row = $store.getters.GetTheCurrentlySelectedCamera[0]
|
||||||
|
let col = $store.getters.GetTheCurrentlySelectedCamera[1]
|
||||||
|
set?.setBlendingCorrection(row, col, 4, value_point.value.length, index + 1, Number(x), Number(y));
|
||||||
|
}
|
||||||
|
const resetall = () => {
|
||||||
|
for (let index = 0; index < value_point.value.length; index++) {
|
||||||
|
reset(index, true, 'v')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const recalculate_coordinates = () => {
|
||||||
|
try {
|
||||||
|
Proportion.value.x = config.width / (div.value.offsetWidth - point.value.w)
|
||||||
|
Proportion.value.y = config.height / (div.value.offsetHeight - point.value.h)
|
||||||
|
max.value.x = div.value.offsetWidth
|
||||||
|
max.value.y = div.value.offsetHeight
|
||||||
|
for (let index = 0; index < value.value.length; index++) {
|
||||||
|
let x_y = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y)
|
||||||
|
let def_x_y = coordinate_transformation_value_to_xy(value.value[index].def_x, value.value[index].def_x)
|
||||||
|
value_point.value[index].x = x_y.x
|
||||||
|
value_point.value[index].y = x_y.y
|
||||||
|
value_point.value[index].def_x = def_x_y.x
|
||||||
|
value_point.value[index].def_y = def_x_y.y
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
now_index,
|
|
||||||
div,
|
|
||||||
fourpostion,
|
|
||||||
reset,
|
|
||||||
resetall,
|
resetall,
|
||||||
moveHandler_1,
|
div,
|
||||||
moveHandler_2,
|
max,
|
||||||
moveHandler_3,
|
point,
|
||||||
moveHandler_4,
|
options_model,
|
||||||
four,
|
value,
|
||||||
save,
|
value_point,
|
||||||
isshowarray,
|
dragStartHandle,
|
||||||
isactivearray,
|
chang,
|
||||||
activeMouseDown,
|
reset,
|
||||||
mouseUpHandler,
|
value_point_amount,
|
||||||
points,
|
chang_point_amount,
|
||||||
};
|
options
|
||||||
},
|
}
|
||||||
});
|
}
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -321,7 +321,7 @@ export default defineComponent({
|
||||||
tmp = '9'
|
tmp = '9'
|
||||||
break;
|
break;
|
||||||
case 'DensityCorrection':
|
case 'DensityCorrection':
|
||||||
tmp = 'density'
|
tmp = 'hor_density'
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
export default class DensityCorrection {
|
||||||
|
control_point = 0;
|
||||||
|
x = 0;
|
||||||
|
y = 0;
|
||||||
|
def_x = 0;
|
||||||
|
def_y = 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
export default class DensityCorrectionPoint {
|
||||||
|
control_point = 0;
|
||||||
|
x = 0;
|
||||||
|
y = 0;
|
||||||
|
def_x = 0;
|
||||||
|
def_y = 0;
|
||||||
|
}
|
||||||
|
|
@ -453,5 +453,13 @@ export default {
|
||||||
"line width":"line width",
|
"line width":"line width",
|
||||||
"level":"level",
|
"level":"level",
|
||||||
"vertical":"vertical",
|
"vertical":"vertical",
|
||||||
"auxiliary lines":"auxiliary lines"
|
"auxiliary lines":"auxiliary lines",
|
||||||
|
"level point":"level point amount",
|
||||||
|
"vertical point ":"vertical point amount",
|
||||||
|
"point amount":"point amount",
|
||||||
|
"add control points":"add control points",
|
||||||
|
"reduce control points":"reduce control points",
|
||||||
|
"OK to delete you will lose the data you adjusted now":"OK to delete you will lose the data you adjusted now",
|
||||||
|
"Please enter the points you need to add":"Please enter the points you need to add",
|
||||||
|
"Whether to add control points":"Whether to add control points"
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -722,5 +722,13 @@ export default {
|
||||||
"line width":"线宽",
|
"line width":"线宽",
|
||||||
"level":"水平",
|
"level":"水平",
|
||||||
"vertical":"垂直",
|
"vertical":"垂直",
|
||||||
"auxiliary lines":"辅助线"
|
"auxiliary lines":"辅助线",
|
||||||
|
"level point":"水平点数量",
|
||||||
|
"vertical point":"垂直点数量",
|
||||||
|
"point amount":"点数量",
|
||||||
|
"add control points":"增加",
|
||||||
|
"reduce control points":"减少",
|
||||||
|
"OK to delete you will lose the data you adjusted now":"确定删除你将失去现在调整的数据",
|
||||||
|
"Please enter the points you need to add":"请输入你所需要添加的点数",
|
||||||
|
"Whether to add control points":"是否添加控制点"
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue