增加动态添加点
This commit is contained in:
parent
da82416bd1
commit
dbecb1ff15
File diff suppressed because it is too large
Load Diff
|
|
@ -1,120 +1,97 @@
|
|||
<template>
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<q-input filled type="number" class="q-pt-xs" style="text-align: center" :dense="true"
|
||||
@focus="isactivearray[0] = false" v-model="four[0].x" label="x" lazy-rules />
|
||||
<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 class="col-1"></div>
|
||||
<div class="col-10 q-pt-md">
|
||||
<div ref="div" style="width: 100%; background-color: #646464; height: 40vh">
|
||||
<div style="position: absolute">
|
||||
<vue3ResizeDrag style="border: 0;" :class="[now_index == 0 ? 'action' : 'point']" v-if="isshowarray[0]"
|
||||
:isActive="isactivearray[0]" @mousedown="activeMouseDown(0)" @mouseUpHandler="mouseUpHandler(0)" :w="20"
|
||||
:h="20" :x="points[0].x" :y="points[0].y" :isResizable="false" @moveHandler="moveHandler_1">
|
||||
<div>1</div>
|
||||
</vue3ResizeDrag>
|
||||
<vue3ResizeDrag style="border: 0;" :class="[now_index == 1 ? 'action' : 'point']" v-if="isshowarray[1]"
|
||||
:isActive="isactivearray[1]" @mousedown="activeMouseDown(1)" @mouseUpHandler="mouseUpHandler(1)" :w="20"
|
||||
:h="20" :x="points[1].x" :y="points[1].y" :isResizable="false" @moveHandler="moveHandler_2">
|
||||
<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>
|
||||
<Vue3DraggableResizable :class="[options_model == index ? 'action' : 'point']"
|
||||
v-for="(item, index) in value_point.length" :initW="point.w" :adsorbParent="false" :initH="point.h" :resizable="false"
|
||||
v-model:x="value_point[index].x" v-model:y="value_point[index].y" @activated="options_model = index"
|
||||
@click="options_model = index" @dragging="dragStartHandle($event, index)">
|
||||
<span>{{
|
||||
index+ 1
|
||||
}}</span>
|
||||
</Vue3DraggableResizable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-1"></div>
|
||||
<div class="col-2 q-px-md"> <q-select class="q-pt-md" :label="$t('point')" :dense="true" filled
|
||||
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 />
|
||||
|
||||
<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 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="isactivearray[3] = false" v-model="four[3].x" label="x"
|
||||
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 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>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.point {
|
||||
.action {
|
||||
background-color: rgb(27, 180, 111);
|
||||
border-radius: 50%;
|
||||
background: #0000ff;
|
||||
color: aliceblue;
|
||||
}
|
||||
|
||||
.action {
|
||||
.point {
|
||||
background-color: rgb(186, 245, 245);
|
||||
border-radius: 50%;
|
||||
background-color: aqua;
|
||||
}
|
||||
</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 {
|
||||
defineComponent,
|
||||
ref,
|
||||
watch,
|
||||
computed,
|
||||
defineProps,
|
||||
withDefaults,
|
||||
onMounted,
|
||||
reactive,
|
||||
onBeforeUnmount,
|
||||
ref,
|
||||
computed,
|
||||
watch,
|
||||
nextTick,
|
||||
onBeforeUnmount
|
||||
} from "vue";
|
||||
import { useStore } from "src/store";
|
||||
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 { Console } from "console";
|
||||
import { number } from "@intlify/core-base";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ComponentFourPointCalibration",
|
||||
name: "ComponentDensityCorrection",
|
||||
components: {
|
||||
vue3ResizeDrag,
|
||||
Vue3DraggableResizable
|
||||
},
|
||||
setup() {
|
||||
let set = GlobalData.getInstance().getCurrentClient();
|
||||
let $store = useStore();
|
||||
let $t = useI18n();
|
||||
const ste_status = ref(0);
|
||||
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(() => {
|
||||
|
|
@ -123,58 +100,10 @@ export default defineComponent({
|
|||
$store.getters.GetTheCurrentlySelectedCamera[1]
|
||||
);
|
||||
});
|
||||
const set_cache: any = ref([]);
|
||||
let four = reactive([
|
||||
{ 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 value_point_amount = ref(5)
|
||||
|
||||
|
||||
const deepcopy = (o1: any, o2: any) => {
|
||||
for (let k in o2) {
|
||||
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 = () => {
|
||||
for (let index = 0; index < fourpostion.value.length; index++) {
|
||||
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;
|
||||
value.value = []
|
||||
value_point.value = []
|
||||
for (let index = 0; index < config.point4.length; index++) {
|
||||
let tmp: DensityCorrectionPoint = config.point4[index];
|
||||
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;
|
||||
points[2].y = y;
|
||||
isshowarray.value[2] = false;
|
||||
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 }
|
||||
);
|
||||
const save_set_cache = () => {
|
||||
let tmp = { value: value.value, value_point: value_point.value }
|
||||
set_cache.value[selectedprojector.value] = JSON.stringify(tmp);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => configselsect,
|
||||
|
|
@ -441,176 +169,206 @@ export default defineComponent({
|
|||
setTimeout(() => {
|
||||
ste_status.value = 0;
|
||||
}, 100);
|
||||
set_point_x();
|
||||
},
|
||||
{ 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 })
|
||||
//为了加载 缓存的配置时 同步点的位置
|
||||
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,
|
||||
})
|
||||
}
|
||||
};
|
||||
//手动同步
|
||||
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);
|
||||
return tmp
|
||||
})
|
||||
|
||||
x = Math.ceil(four[1].x / Proportion.value.x);
|
||||
y = Math.ceil((config.height - four[1].y) / Proportion.value.y);
|
||||
set_point(1, x, y);
|
||||
const chang_point_amount = (val: number) => {
|
||||
start_point()
|
||||
}
|
||||
|
||||
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);
|
||||
const dragStartHandle = ($event: any, index: number) => {
|
||||
let obj_x = $event.x
|
||||
let obj_y = $event.y
|
||||
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)
|
||||
send_value(index, Math.round(tmp.x), Math.round(tmp.y))
|
||||
save_set_cache()
|
||||
}
|
||||
|
||||
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 chang = (index: number, $event: any, type: string) => {
|
||||
index = Number(index)
|
||||
let tmp = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y)
|
||||
console.log(tmp)
|
||||
value_point.value[index].y = Math.round(tmp.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))
|
||||
|
||||
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;
|
||||
save_set_cache()
|
||||
}
|
||||
|
||||
four[index].x = config.point4[index].def_x;
|
||||
four[index].y = config.point4[index].def_y;
|
||||
/**
|
||||
* 将分辨率的坐标转换为 页面的坐标
|
||||
* @param x x坐标
|
||||
* @param y y坐标
|
||||
*/
|
||||
const coordinate_transformation_value_to_xy = (x: number, y: number): { x: number, y: number } => {
|
||||
x = x / Proportion.value.x
|
||||
y = (config.height - y) / Proportion.value.y
|
||||
return { x, 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)
|
||||
);
|
||||
|
||||
/**
|
||||
* 将页面的坐标转换为 分辨率的坐标
|
||||
* @param x x坐标
|
||||
* @param y y坐标
|
||||
*/
|
||||
const coordinate_transformation_xy_to_value = (x: number, y: number): { x: number, y: number } => {
|
||||
x = (x + point.value.w / 14) * Proportion.value.x
|
||||
// x = (x-point.value.w) * Proportion.value.x
|
||||
y = (max.value.y - (y + point.value.h)) * Proportion.value.y
|
||||
return { x, y }
|
||||
}
|
||||
|
||||
const start_point = () => {
|
||||
value.value = []
|
||||
value_point.value = []
|
||||
for (let index = 0; index < config.point4.length; index++) {
|
||||
let tmp: DensityCorrectionPoint = config.point4[index];
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
isshowarray.value[index] = false;
|
||||
setTimeout(() => {
|
||||
isshowarray.value[index] = true;
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const resetall = () => {
|
||||
for (let index = 0; index < fourpostion.value.length; index++) {
|
||||
reset(index, false);
|
||||
}
|
||||
set?.setBlendingCorrection(
|
||||
$store.getters.GetTheCurrentlySelectedCamera[0],
|
||||
$store.getters.GetTheCurrentlySelectedCamera[1],
|
||||
4, 4, 0, 0, 0
|
||||
);
|
||||
};
|
||||
|
||||
const moveHandler_1 = (data: any) => {
|
||||
let x = Math.round(
|
||||
(data.left - fourpostion.value[0].x) * Proportion.value.x + 0
|
||||
);
|
||||
let y = Math.round(
|
||||
config.height - data.top * Proportion.value.y - fourpostion.value[0].y
|
||||
);
|
||||
|
||||
four[0].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
|
||||
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) => {
|
||||
let x = Math.round(
|
||||
(data.left - fourpostion.value[1].x) * Proportion.value.x + config.width
|
||||
);
|
||||
let y = Math.round(
|
||||
config.height - data.top * Proportion.value.y - fourpostion.value[1].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();
|
||||
};
|
||||
const moveHandler_3 = (data: any) => {
|
||||
let x = Math.round(
|
||||
(data.left - fourpostion.value[2].x) * Proportion.value.x
|
||||
);
|
||||
let y = Math.abs(
|
||||
Math.round((data.top - fourpostion.value[2].y) * Proportion.value.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
|
||||
points[now_index.value].y = data.top
|
||||
save_set_cache();
|
||||
};
|
||||
const moveHandler_4 = (data: any) => {
|
||||
let x = Math.round(
|
||||
(data.left - fourpostion.value[3].x) * Proportion.value.x + config.width
|
||||
);
|
||||
let y = Math.abs(
|
||||
Math.round((data.top - fourpostion.value[3].y) * Proportion.value.y)
|
||||
);
|
||||
four[3].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
|
||||
four[3].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();
|
||||
};
|
||||
//窗口变动重新渲染
|
||||
/**
|
||||
* 创建空值 让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(() => {
|
||||
//监听窗口变化
|
||||
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 = () => {
|
||||
return (() => {
|
||||
ste_status.value = 1;
|
||||
if (div != null) setpoa();
|
||||
|
||||
setTimeout(() => {
|
||||
ste_status.value = 0;
|
||||
}, 100);
|
||||
if (div != null) {
|
||||
recalculate_coordinates()
|
||||
}
|
||||
})();
|
||||
};
|
||||
})
|
||||
|
||||
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 {
|
||||
now_index,
|
||||
div,
|
||||
fourpostion,
|
||||
reset,
|
||||
resetall,
|
||||
moveHandler_1,
|
||||
moveHandler_2,
|
||||
moveHandler_3,
|
||||
moveHandler_4,
|
||||
four,
|
||||
save,
|
||||
isshowarray,
|
||||
isactivearray,
|
||||
activeMouseDown,
|
||||
mouseUpHandler,
|
||||
points,
|
||||
};
|
||||
},
|
||||
});
|
||||
div,
|
||||
max,
|
||||
point,
|
||||
options_model,
|
||||
value,
|
||||
value_point,
|
||||
dragStartHandle,
|
||||
chang,
|
||||
reset,
|
||||
value_point_amount,
|
||||
chang_point_amount,
|
||||
options
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -321,7 +321,7 @@ export default defineComponent({
|
|||
tmp = '9'
|
||||
break;
|
||||
case 'DensityCorrection':
|
||||
tmp = 'density'
|
||||
tmp = 'hor_density'
|
||||
break;
|
||||
default:
|
||||
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",
|
||||
"level":"level",
|
||||
"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":"线宽",
|
||||
"level":"水平",
|
||||
"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