|
- <template>
- <div class="myPage">
- <!-- 主要显示 -->
- <div
- :class="props.videoType == 1 ? 'content1' : 'content2'"
- id="content"
- :style="bgStyle"
- ref="fatherBox"
- >
- <!-- 数字人的图片 -->
- <div
- class="virtual"
- :class="showBorderActive == materialList.virtual.id ? 'border' : ''"
- @mousedown="handleDrag(materialList.virtual.id, $event)"
- :style="virtualStyle"
- >
- <img id="virtualImg" :src="materialList.virtual.material" alt="" />
- <div ref="box1" class="stretchBox box1"></div>
- <div class="stretchBox box2"></div>
- <div class="stretchBox box3"></div>
- <div
- v-show="showBorderActive == materialList.virtual.id"
- ref="box4"
- @mousedown.stop="changeScale"
- class="stretchBox box4"
- >
- <img
- style="width: 100px; height: 100px"
- src="../assets/img/Scale.png"
- alt=""
- />
- </div>
- </div>
- <!-- 素材图的图片 -->
- <div
- v-for="(item, index) in materialList.scList"
- :key="item.id"
- class="scListItem"
- :class="showBorderActive == item.id ? 'border' : ''"
- @mousedown="handleDragSc(item.id, index, $event)"
- :style="{
- top: item.y + 'px',
- left: item.x + 'px',
- transform: 'scale(' + item.w / props.proportion + ') ',
- transformOrigin: 'top left',
- zIndex: item.z,
- }"
- >
- <img id="scListItemImg" :src="item.material" alt="" />
- <div ref="box1" class="stretchBox box1"></div>
- <div
- v-show="showBorderActive == item.id"
- class="stretchBox box2"
- @click="delScListItem(index)"
- >
- <img
- style="width: 100px; height: 100px"
- src="../assets/img/delete2.png"
- alt=""
- />
- </div>
- <div class="stretchBox box3"></div>
- <div
- v-show="showBorderActive == item.id"
- ref="box4"
- @mousedown.stop="changeScaleSc(index, $event)"
- class="stretchBox box4"
- >
- <img
- style="width: 100px; height: 100px"
- src="../assets/img/Scale.png"
- alt=""
- />
- </div>
- </div>
- </div>
- </div>
- </template>
- <script setup>
- //#region 导入
- import { useI18n } from "vue-i18n";
- //#endregion --------------------------
- const { locale } = useI18n();
- const lanChange = ref(locale);
-
- //#region 父组件传参
- const props = defineProps({
- // isLoading: {
- // required: true, //是否必传
- // },
- materialList: {
- required: true,
- },
- videoType: {
- required: true,
- },
- proportion: {
- required: true,
- },
- showImgInfo: {
- required: true,
- },
- });
- //#endregion --------------------------
-
- //#region 大盒子样式
- const bgStyle = computed(() => {
- return {
- // width: '1080px',
- // height: '1920px',
- // transform: 'scale(0.2)',
- backgroundImage: `url(${props.materialList.BGI.material})`,
- backgroundSize: "cover",
- backgroundPosition: "center",
- };
- });
- //#endregion --------------------------
-
- //#region 数字人逻辑
- // 计算属性来计算盒子位置和大小
- const virtualStyle = computed(() => {
- return {
- top: props.materialList.virtual.y + "px",
- left: props.materialList.virtual.x + "px",
- transform:
- "scale(" + props.materialList.virtual.w / props.proportion + ") ",
- transformOrigin: "top left",
- zIndex: props.materialList.virtual.z,
- };
- });
- // 拖动盒子
- const showBorderActive = ref(null); //判断显示边框
- const fatherBox = ref(null);
- const handleDrag = (id, event) => {
- showBorderActive.value = id;
- event.preventDefault();
- const imageElement = fatherBox.value;
- const startX = event.clientX; //保存初始值,避免闪烁
- const startY = event.clientY;
- const startLeft = props.materialList.virtual.x;
- const startTop = props.materialList.virtual.y;
-
- // 鼠标移动
- const onMouseMove = (event) => {
- const deltaX = event.clientX - startX;
- const deltaY = event.clientY - startY;
- props.materialList.virtual.x = startLeft + deltaX;
- props.materialList.virtual.y = startTop + deltaY;
- };
-
- // 鼠标抬起
- const onMouseUp = () => {
- document.removeEventListener("mousemove", onMouseMove);
- document.removeEventListener("mouseup", onMouseUp);
- };
-
- document.addEventListener("mousemove", onMouseMove);
- document.addEventListener("mouseup", onMouseUp);
- };
- // 缩放盒子
- const touchStart = ref({
- pageX: null,
- pageY: null,
- });
- const touchOver = ref({
- pageX: null,
- pageY: null,
- });
- const scaleNum = ref(0.004);
- // 初始版
- // function changeScale(event) {
- // event.preventDefault();
- // const x = event.clientX;
- // const y = event.clientY;
- // // touchStart = {
- // // pageX: x,
- // // pageY: y,
- // // };
- // touchStart.pageX = x;
- // touchStart.pageY = y;
- // // 鼠标移动
- // const onMouseMove = (event) => {
- // const MoveX = event.clientX;
- // const MoveY = event.clientY;
- // const flag = Math.sign(x - touchStart.pageX) == -1 ? true : false;
- // if (flag) {
- // // 限制最大缩放系数
- // if (props.materialList.virtual.w > 1.3) return;
- // props.materialList.virtual.w += scaleNum.value;
- // // 更新坐标位置
- // // touchStart = {
- // // pageX: MoveX,
- // // pageY: MoveY,
- // // };
- // touchStart.pageX = MoveX;
- // touchStart.pageY = MoveY;
- // } else {
- // // 限制最小缩放系数
- // if (props.materialList.virtual.w < 0.4) return;
- // props.materialList.virtual.w -= scaleNum.value;
- // // 更新坐标位置
- // // touchStart = {
- // // pageX: MoveX,
- // // pageY: MoveY,
- // // };
- // touchStart.pageX = MoveX;
- // touchStart.pageY = MoveY;
- // }
- // };
-
- // // 鼠标抬起
- // const onMouseUp = () => {
- // document.removeEventListener("mousemove", onMouseMove);
- // document.removeEventListener("mouseup", onMouseUp);
- // };
-
- // document.addEventListener("mousemove", onMouseMove);
- // document.addEventListener("mouseup", onMouseUp);
- // }
- // 改动版
-
- function changeScale(event) {
- event.preventDefault();
- const x = event.clientX;
- const y = event.clientY;
- touchStart.pageX = x;
- touchStart.pageY = y;
- // 鼠标移动
- const onMouseMove = (event) => {
- const MoveX = event.clientX;
- const MoveY = event.clientY;
- let flag = Math.sign(x - touchStart.pageX) == -1 ? true : false;
- if (flag) {
- // 限制最大缩放系数
- if (props.materialList.virtual.w > 1.3) return;
- props.materialList.virtual.w += scaleNum.value;
- // 更新坐标位置
- touchStart.pageX = MoveX;
- touchStart.pageY = MoveY;
- } else {
- // 限制最小缩放系数
- if (props.materialList.virtual.w < 0.4) return;
- props.materialList.virtual.w -= scaleNum.value;
- // 更新坐标位置
- touchStart.pageX = MoveX;
- touchStart.pageY = MoveY;
- }
- };
-
- // 鼠标抬起
- const onMouseUp = () => {
- document.removeEventListener("mousemove", onMouseMove);
- document.removeEventListener("mouseup", onMouseUp);
- };
-
- document.addEventListener("mousemove", onMouseMove);
- document.addEventListener("mouseup", onMouseUp);
- }
- const box1 = ref(null);
- const box2 = ref(null);
- const box3 = ref(null);
- const box4 = ref(null);
- // 距离版
- // function changeScale(event) {
- // const box1Element = box1.value;
- // const box4Element = box4.value;
- // if (!box1Element || !box4Element) {
- // return;
- // }
- // touchStart.pageX = event.clientX;
- // touchStart.pageY = event.clientY;
- // const box1Rect = box1Element.getBoundingClientRect();
- // const box4Rect = box4Element.getBoundingClientRect();
- // const boxDistance = Math.sqrt(
- // (box1Rect.left - box4Rect.left) ** 2 + (box1Rect.top - box4Rect.top) ** 2
- // ).toFixed(0);
- // const onMouseMove = (event) => {
- // const x = event.clientX;
- // const y = event.clientY;
- // const deltaX = touchStart.pageX - x;
- // const deltaY = touchStart.pageY - y;
- // const boxDistance2 = Math.sqrt(deltaX ** 2 + deltaY ** 2).toFixed(0);
-
- // if (deltaX < 0) {
- // props.materialList.virtual.w = Math.min(
- // Math.max((boxDistance + boxDistance2) / boxDistance, 0.4),
- // 1.3
- // );
- // } else {
- // props.materialList.virtual.w = Math.min(
- // Math.max((boxDistance - boxDistance2) / boxDistance, 0.4),
- // 1.3
- // );
- // }
-
- // // touchOver.pageX = event.clientX;
- // // touchOver.pageY = event.clientY;
- // };
- // // 鼠标抬起
- // const onMouseUp = () => {
- // // touchStart.pageX = touchOver.pageX;
- // // touchStart.pageY = touchOver.pageY;
- // document.removeEventListener("mousemove", onMouseMove);
- // document.removeEventListener("mouseup", onMouseUp);
- // };
-
- // document.addEventListener("mousemove", onMouseMove);
- // document.addEventListener("mouseup", onMouseUp);
- // }
-
- //#endregion --------------------------
-
- //#region 素材图逻辑
- const handleDragSc = (id, index, event) => {
- showBorderActive.value = id;
- event.preventDefault();
- const imageElement = fatherBox.value;
- const startX = event.clientX; //保存初始值,避免闪烁
- const startY = event.clientY;
- const startLeft = props.materialList.scList[index].x;
- const startTop = props.materialList.scList[index].y;
-
- // 鼠标移动
- const onMouseMove = (event) => {
- const deltaX = event.clientX - startX;
- const deltaY = event.clientY - startY;
- props.materialList.scList[index].x = startLeft + deltaX;
- props.materialList.scList[index].y = startTop + deltaY;
- };
-
- // 鼠标抬起
- const onMouseUp = () => {
- document.removeEventListener("mousemove", onMouseMove);
- document.removeEventListener("mouseup", onMouseUp);
- };
-
- document.addEventListener("mousemove", onMouseMove);
- document.addEventListener("mouseup", onMouseUp);
- };
- function changeScaleSc(index, event) {
- event.preventDefault();
- const x = event.clientX;
- const y = event.clientY;
- touchStart.pageX = x;
- touchStart.pageY = y;
- // 鼠标移动
- const onMouseMove = (event) => {
- let MoveX = event.clientX;
- let MoveY = event.clientY;
- let flag = Math.sign(x - touchStart.pageX) == -1 ? true : false;
- if (flag) {
- // 限制最大缩放系数
- if (props.materialList.scList[index].w > 1.3) return;
- props.materialList.scList[index].w += scaleNum.value;
- // 更新坐标位置
- touchStart.pageX = MoveX;
- touchStart.pageY = MoveY;
- } else {
- // 限制最小缩放系数
- if (props.materialList.scList[index].w < 0.4) return;
- props.materialList.scList[index].w -= scaleNum.value;
- // 更新坐标位置
- touchStart.pageX = MoveX;
- touchStart.pageY = MoveY;
- }
- };
-
- // 鼠标抬起
- const onMouseUp = () => {
- document.removeEventListener("mousemove", onMouseMove);
- document.removeEventListener("mouseup", onMouseUp);
- };
-
- document.addEventListener("mousemove", onMouseMove);
- document.addEventListener("mouseup", onMouseUp);
- }
- function delScListItem(index) {
- const msg =
- lanChange.value == "zh-cn"
- ? "确定删除素材吗吗?"
- : "Are you sure you want to delete the footage?";
- const notice = lanChange.value == "zh-cn" ? "提示" : "Notice";
- const confirm = lanChange.value == "zh-cn" ? "确定" : "Confirm";
- const cancel = lanChange.value == "zh-cn" ? "取消" : "Cancel";
- ElMessageBox.confirm(msg, notice, {
- confirmButtonText: confirm,
- cancelButtonText: cancel,
- }).then(() => {
- props.materialList.scList.splice(index, 1);
- });
- }
- //#endregion --------------------------
-
- //#region 控制台回显
- watch(
- () => showBorderActive.value,
- (newValue, oldValue) => {
- props.showImgInfo.id = showBorderActive.value;
- },
- { deep: true }
- );
- //#endregion --------------------------
-
- //#region
-
- //#endregion --------------------------
- </script>
- <style lang="scss" scoped>
- .myPage {
- // height: 768px;
- // width: 432px;
- }
- .content1 {
- position: relative;
- height: 768px;
- width: 432px;
- overflow: hidden;
- }
- .content2 {
- position: relative;
- height: 432px;
- width: 768px;
- overflow: hidden;
- }
- .virtual {
- position: absolute;
- user-select: none;
- border: rgba(0, 0, 0, 0) 5px solid;
- }
- .scListItem {
- position: absolute;
- user-select: none;
- border: rgba(0, 0, 0, 0) 5px solid;
- }
- .border {
- border: 5px solid #00ff00;
- .stretchBox {
- opacity: 1;
- position: absolute;
- width: 20px;
- height: 20px;
- background-color: #7264f5;
- }
- .box1 {
- top: -10px;
- left: -10px;
- cursor: nwse-resize;
- display: none;
- }
-
- .box2 {
- top: -50px;
- left: 100%;
- transform: translateX(-50px);
- // cursor: nesw-resize;
- cursor: pointer;
- background-color: rgba(0, 0, 0, 0);
- width: 100px;
- height: 100px;
- img {
- width: 100px;
- height: 100px;
- }
- }
- .box3 {
- top: 100%;
- left: -10px;
- transform: translateY(-10px);
- cursor: nesw-resize;
- display: none;
- }
- .box4 {
- top: 100%;
- left: 100%;
- transform: translate(-50px, -50px);
- cursor: nwse-resize;
- // background-color: rgba(0, 0, 0, 0);
- background-color: #fff;
- width: 100px;
- height: 100px;
- border-radius: 50px;
- img {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%) rotate(90deg);
- max-width: 65px;
- max-height: 65px;
- }
- }
- }
- </style>
|