chore: 视频数字人横坐标调整

src/views/creation/components/preview-content.vue

@@ -15,6 +15,7 @@ const audioPlaying = ref(false)
 const previewContentWidth = ref(0)
 const previewContentHeight = ref(0)
 const previewContent = ref<HTMLElement>()
+const digitalHumanImage = ref<HTMLImageElement>()
 const digitalAudio = ref<HTMLAudioElement>()
 const audioSetting = ref<AudioSetting>({
   codec: 'mp3',
@@ -31,7 +32,7 @@ const ttsSpeedMarks: { [speed: string]: number } = {
   '4': -0.8,
   '5': -0.5,
   '6': 0,
-  '7': 1,
+  '7': 0.8,
 }
 
 const resizeObserver = new ResizeObserver((entries) => {
@@ -42,6 +43,7 @@ const resizeObserver = new ResizeObserver((entries) => {
 
 const isLandscape = computed(() => digitalCreationStore.width > digitalCreationStore.height)
 
+const digitalHumanWidth = ref(0)
 // const digitalHumanWidth = computed(
 //   () => (digitalCreationStore.w * previewContentWidth.value) / (isLandscape.value ? 1920 : 1080),
 // )
@@ -49,7 +51,10 @@ const digitalHumanHeight = computed(
   () => (digitalCreationStore.h * previewContentHeight.value) / (isLandscape.value ? 1080 : 1920),
 )
 const digitalHumanLeft = computed(
-  () => (digitalCreationStore.x * previewContentWidth.value) / (isLandscape.value ? 1920 : 1080),
+  () =>
+    (digitalCreationStore.x * previewContentWidth.value) / (isLandscape.value ? 1920 : 1080) +
+    previewContentWidth.value / 2 -
+    digitalHumanWidth.value / 2,
 )
 const digitalHumanTop = computed(
   () => (digitalCreationStore.y * previewContentHeight.value) / (isLandscape.value ? 1080 : 1920),
@@ -72,6 +77,10 @@ onUnmounted(() => {
   previewContent.value && resizeObserver.unobserve(previewContent.value)
 })
 
+function getDigitalHumanWidth() {
+  digitalHumanWidth.value = digitalHumanImage.value?.width || 0
+}
+
 function connectWebSocket() {
   websocket = new WebSocket(url)
   websocket.onopen = () => {
@@ -156,6 +165,7 @@ function controlAudio() {
         />
         <img
           v-if="digitalCreationStore.inputImageUrl"
+          ref="digitalHumanImage"
           :src="digitalCreationStore.inputImageUrl"
           class="absolute max-w-none object-cover"
           :style="{
@@ -164,6 +174,7 @@ function controlAudio() {
             left: `${digitalHumanLeft}px`,
             top: `${digitalHumanTop}px`,
           }"
+          @load="getDigitalHumanWidth"
         />
       </div>
     </div>

src/views/creation/layout/index.vue

@@ -49,8 +49,12 @@ async function getDigitalTemplate(id: string) {
       pitch: digitalTemplate.ttsParams?.pitch || digitalCreationStore.pitch,
       inputAudioUrl: digitalTemplate.inputAudioUrl,
       figureId: digitalTemplate.figureId,
-      width: digitalTemplate.videoParams?.width || digitalCreationStore.width,
-      height: digitalTemplate.videoParams?.height || digitalCreationStore.height,
+      width:
+        digitalTemplate.videoParams?.width ||
+        (digitalTemplate.videoParams?.pageLayout === ScreenType.LANDSCAPE ? 1280 : 720),
+      height:
+        digitalTemplate.videoParams?.height ||
+        (digitalTemplate.videoParams?.pageLayout === ScreenType.LANDSCAPE ? 720 : 1280),
       cameraId: digitalTemplate.dhParams?.cameraId || null,
       x: digitalTemplate.dhParams?.position.x || digitalCreationStore.x,
       w: