fix: 1

src/components/subtitle/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div
-    v-if="pixel"
     :style="{
-      transform: `translate(${pixel.x}px, ${pixel.y}px)`,
       visibility: show ? 'visible' : 'hidden',
     }"
     class="subtitle"
@@ -24,6 +22,11 @@ const props = defineProps<{
   sizeChang: (csize: Size) => void;
 }>();
 
+// watchEffect(() => {
+
+//   if (!dom.value) return;
+//   dom.value.style.transform = `translate(${props.pixel.x}px, ${props.pixel.y}px)`;
+// });
 const dom = ref<HTMLDivElement>();
 watch(
   () => props.data.content,

src/sdk/association/animation.ts

@@ -312,16 +312,27 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
     ([map, exists]) => {
       if (!map?.am) return;
       if (exists && !map.subtitles[data.id]) {
-        map.subtitles[data.id] = mount(
-          document.querySelector("#app")!,
-          Subtitle,
-          reactive({
-            pixel: pixel,
-            show,
-            data,
-            sizeChang: (csize: Size) => (size.value = csize),
-          })
-        );
+        const mountEl = document.querySelector("#app")!
+        const layer = document.createElement('div')
+        layer.className = 'subtitle'
+        const cleanups = [
+          watchEffect(() => {
+            layer.innerHTML = data.content
+            size.value = { width: layer.offsetWidth, height: layer.offsetHeight }
+          }),
+          watchEffect(() => layer.style.background = data.background),
+          watchEffect(() => {
+            layer.style.visibility = pixel.value && show.value ? 'visible' : 'hidden'
+          }),
+          watchEffect(() => {
+            if (pixel.value) {
+              layer.style.transform = `translate(${pixel.value.x}px, ${pixel.value.y}px)`;
+            }
+          }),
+          () => mountEl.removeChild(layer)
+        ]
+        mountEl.appendChild(layer)
+        map.subtitles[data.id] = mergeFuns(cleanups)
       } else if (!exists && map.subtitles[data.id]) {
         map.subtitles[data.id]();
         delete map.subtitles[data.id];
@@ -332,14 +343,14 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
   );
   let isRun = false
   const update = () => {
-    if (isRun) return;
-    isRun = true
-    setTimeout(() => {
+    // if (isRun) return;
+    // isRun = true
+    // setTimeout(() => {
       pixel.value = amMap[am.id]?.am?.getCurrentSubtitlePixel(
         size.value
       );
-      isRun = false
-    }, 160);
+    //   isRun = false
+    // }, 16);
   };
 
   const stopAttrib = mergeFuns(

src/style.scss

@@ -159,4 +159,23 @@ input::-ms-clear,input::-ms-reveal {
 
 .hide-control {
   display: none !important;
+}
+
+
+.subtitle {
+  position: absolute;
+  z-index: 1;
+  // transition: transform 0.3s linear;
+  will-change: transform;
+  left: 0;
+  top: 0;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+  max-width: 280px;
+  border-radius: 4px;
+  font-size: 14px;
+  padding: 10px 20px;
+  color: #ffffff;
+  line-height: 16px;
+  word-break: break-all;
 }