人像区域

du

2025-04-07 b0626980e04db8e035014b9c1821b31c96a0c3e7

人像区域

 easegen-front/src/views/chooseTemplate/index.vue

@@ -175,7 +175,7 @@
          <div class="list">
            <div
              class="main-image-box"
              :style="{ width: viewSize.width + 'px', height: viewSize.height + 'px' }"
              :style="{ width: viewSize.width + 'px', height: viewSize.height + 'px',position: 'relative' }"
            >
              <!-- 背景(必显示) -->
              <el-image
@@ -183,6 +183,7 @@
                class="background"
                :src="selectPPT.pictureUrl"
              />

              <!-- 画中画 -->
              <Vue3DraggableResizable
                v-if="selectPPT.innerPicture && selectPPT.innerPicture.src"
@@ -217,43 +218,48 @@
                  <Delete />
                </el-icon>
              </Vue3DraggableResizable>
              <Vue3DraggableResizable
                v-if="selectPPT.showDigitalHuman"
                :parent="false"
                :initW="PPTpositon.w"
                :initH="PPTpositon.h"
                @drag-move="onDragMove"
                v-model:x="PPTpositon.x"
                v-model:y="PPTpositon.y"
                v-model:w="PPTpositon.w"
                v-model:h="PPTpositon.h"
                v-model:active="PPTpositon.active"
                :draggable="true"
                :resizable="true"
                @activated="print('activated')"
                @deactivated="print('deactivated')"
                @drag-start="print('drag-start')"
                @resize-start="print('resize-start')"
                @dragging="print('dragging')"
                @resizing="print('resizing')"
                @drag-end="print('drag-end')"
                @resize-end="print('resize-end')"
                style="z-index: 2"
              >
                <el-image
                  class="minddle-host-image"
                  :src="selectHost ? selectHost.pictureUrl : ''"
                />
                <el-icon
                  v-if="PPTpositon.active"
                  size="20"
                  color="#409eff"
                  style="position: absolute; top: 5px; right: 5px; z-index: 4"
                  @click.stop="deleteDigitalHuman"
              <div style="width: 160%;height: 100%;position: absolute;top: 0;left: -30%">
                <Vue3DraggableResizable
                  v-if="selectPPT.showDigitalHuman"
                  :parent="true"
                  :initW="PPTpositon.w"
                  :initH="PPTpositon.h"
                  @drag-move="onDragMove"
                  v-model:x="PPTpositon.x"
                  v-model:y="PPTpositon.y"
                  v-model:w="PPTpositon.w"
                  v-model:h="PPTpositon.h"
                  v-model:active="PPTpositon.active"
                  :draggable="true"
                  :resizable="true"
                  @activated="print('activated')"
                  @deactivated="print('deactivated')"
                  @drag-start="print('drag-start')"
                  @resize-start="print('resize-start')"
                  @dragging="print('dragging')"
                  @resizing="print('resizing')"
                  @drag-end="print('drag-end')"
                  @resize-end="print('resize-end')"
                  style="z-index: 4"
                >
                  <Delete />
                </el-icon>
              </Vue3DraggableResizable>
                  <!--                {{PPTpositon.w}}{{PPTpositon.h}}-->
                  <el-image
                    class="minddle-host-image"
                    :src="selectHost ? selectHost.pictureUrl : ''"
                  />

                  <el-icon
                    v-if="PPTpositon.active"
                    size="20"
                    color="#409eff"
                    style="position: absolute; top: 5px; right: 5px; z-index: 4"
                    @click.stop="deleteDigitalHuman"
                  >
                    <Delete />
                  </el-icon>
                </Vue3DraggableResizable>
              </div>

            </div>
          </div>
          <el-card
@@ -1955,8 +1961,8 @@
  const template = selectTemplate.value
  const pptList = applyAllTemplate.value ? PPTArr.value : [selectPPT.value]

  //数字人是统一生效的，先处理

  // 数字人是统一生效的，先处理
  console.log(template)
  pptList.forEach((item) => {
    // 保存原始ppt图片
    const originalPPT = item.innerPicture?.src || item.pictureUrl
@@ -1978,7 +1984,8 @@
          entityType: 1,
          originHeight: courseInfo.value.height,
          originWidth: courseInfo.value.width,
          entityId: 1
          entityId: 1,
          templateId: template.id,
        }
      }
    } else {
@@ -1987,7 +1994,17 @@
    }

    item.showDigitalHuman = template.showDigitalHuman
    // 添加同步宽高的逻辑
    const targetTemplate = selectTemplate.value
    console.log(PPTArr)
    PPTArr.value.forEach((otherItem) => {
      if (otherItem.templateId === item.templateId) {
        otherItem.width = item.width
        otherItem.height = item.height
      }
    })
  })

  // 数字人位置也需要缩放
  PPTpositon.w = selectTemplate.value.humanW
  PPTpositon.h = selectTemplate.value.humanH
@@ -2058,7 +2075,7 @@
}

.minddle-host-image {
  z-index: 3;
  z-index: 5;
  width: 100%;
  height: 100%;
}