lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加动态添加点

This commit is contained in:
shefengchun 2023-02-15 09:34:42 +08:00
parent da82416bd1
commit dbecb1ff15
8 changed files with 1459 additions and 1644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1149
src/components/FusionSettings/DensityCorrection.vue
View File

File diff suppressed because it is too large Load Diff

772
src/components/FusionSettings/FourPointCalibration.vue
View File

@ -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 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"
<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 />
<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
}
};
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;
value_point.value.push(tmp_point)
}
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);
const save_set_cache = () => {
let tmp = { value: value.value, value_point: value_point.value }
set_cache.value[selectedprojector.value] = JSON.stringify(tmp);
}
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(
() => 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);
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)
);
const chang_point_amount = (val: number) => {
start_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);
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()
}
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
);
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))
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()
}
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();
};
//窗口变动重新渲染
/**
* 将分辨率的坐标转换为 页面的坐标
* @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 }
}
/**
* 将页面的坐标转换为 分辨率的坐标
* @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)
}
}
/**
* 创建空值 让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>

1126
src/components/FusionSettings/SurfaceCorrection.vue
View File

File diff suppressed because it is too large Load Diff

2
src/components/FusionSettingsDialog.vue
View File

@ -321,7 +321,7 @@ export default defineComponent({
tmp = '9'
break;
case 'DensityCorrection':
tmp = 'density'
tmp = 'hor_density'
break;
default:
break;

7
src/entities/DensityCorrection.ts Normal file
View File

@ -0,0 +1,7 @@
export default class DensityCorrection {
control_point = 0;
x = 0;
y = 0;
def_x = 0;
def_y = 0;
}

7
src/entities/DensityCorrectionPoint.ts Normal file
View File

@ -0,0 +1,7 @@
export default class DensityCorrectionPoint {
control_point = 0;
x = 0;
y = 0;
def_x = 0;
def_y = 0;
}

10
src/i18n/en-US/index.ts
View File

@ -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"
};

10
src/i18n/zh-CN/index.ts
View File

@ -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":"是否添加控制点"
};