|
- <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 class="stretchBox box1"></div>
- <div class="stretchBox box2"></div>
- <div class="stretchBox box3"></div>
- <div class="stretchBox box4"></div>
- </div>
- </div>
- </div>
- </template>
- <script setup>
- //#region 父组件传参
- const props = defineProps({
- // isLoading: {
- // required: true, //是否必传
- // },
- materialList: {
- required: true,
- },
- videoType: {
- required: true,
- },
- proportion: {
- 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",
- };
- });
- // 拖动盒子
- 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);
- };
- //#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;
- }
- .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;
- }
-
- .box2 {
- top: -10px;
- left: 100%;
- transform: translateX(-10px);
- cursor: nesw-resize;
- }
- .box3 {
- top: 100%;
- left: -10px;
- transform: translateY(-10px);
- cursor: nesw-resize;
- }
- .box4 {
- top: 100%;
- left: 100%;
- transform: translate(-10px, -10px);
- cursor: nwse-resize;
- }
- }
- </style>
|