fix: 1

src/api/animation.ts

@@ -143,6 +143,7 @@ export const postInsertAnimationModel = async (am: AnimationModel) => {
     caseId: params.caseId,
     id: undefined,
   };
+  console.log('add', addData)
   const serviceData = await axios.post<ServiceAnimationModel>(
     INSERT_AM_MODEL,
     addData
@@ -151,6 +152,7 @@ export const postInsertAnimationModel = async (am: AnimationModel) => {
 };
 
 export const postUpdateAnimationModel = async (guide: AnimationModel) => {
+  console.log('set', guide)
   return axios.post<undefined>(UPDATE_AM_MODEL, { ...localToService(guide) });
 };
 

src/components/drawing-time/current.vue

@@ -1,6 +1,6 @@
 <template>
   <v-arrow
-    ref="arrow"
+    :ref="(r: any) => arrow[0] = r"
     :config="{
       points: [currentX, 0, currentX, 10],
       fill: currentColor,
@@ -14,11 +14,12 @@
   />
   <v-line
     v-if="!hideLine"
+    :ref="(r: any) => arrow[1] = r"
     :config="{
         points: [currentX, size!.height, currentX, 10],
         stroke: currentColor,
         strokeWidth: 2,
-        listening: false,
+        hitStrokeWidth: 4,
         ...currentMat
       }"
   />
@@ -37,6 +38,7 @@ import {
 import { Transform } from "konva/lib/Util";
 import { Arrow } from "konva/lib/shapes/Arrow";
 import { DC } from "../drawing/dec";
+import { Line } from "konva/lib/shapes/Line";
 
 const props = withDefaults(
   defineProps<{
@@ -55,7 +57,7 @@ const currentColor = props.currentColor;
 const { misPixel } = useGlobalVar();
 const emit = defineEmits<{ (e: "update:currentTime", num: number): void }>();
 
-const arrow = ref<DC<Arrow>>();
+const arrow = ref<DC<Arrow>[]>([]);
 const { drag } = useDrag(arrow);
 watch(drag, (drag) => {
   if (!drag) return;

src/components/drawing/renderer.vue

@@ -23,15 +23,19 @@ import {
   rendererMap,
   useCursor,
   useGlobalResize,
+  useGlobalVar,
   useStage,
   useViewer,
+  useViewerInvertTransform,
   useViewerInvertTransformConfig,
+  useViewerTransform,
   useViewerTransformConfig,
 } from "./hook";
 import { install } from "./install-lib";
+import { Pos } from "./dec";
 
-const props = defineProps<{ scale: number }>();
-const emit = defineEmits<{ (e: "update:scale", v: number): void }>();
+const props = defineProps<{ scale: { value: number; center: Pos } }>();
+const emit = defineEmits<{ (e: "update:scaleValue", v: number): void }>();
 
 const instance = getCurrentInstance();
 install(instance!.appContext.app);
@@ -60,23 +64,27 @@ watch(
   () => props.scale,
   (scale) => {
     if (size.value) {
-      viewer.viewer.scalePixel(
-        { x: size.value?.width / 2, y: size.value?.height / 2 },
-        { x: scale / viewerConfig.value.scaleX, y: 1 }
-      );
+      viewer.viewer.scalePixel(scale.center, {
+        x: scale.value / viewerConfig.value.scaleX,
+        y: 1,
+      });
     }
-  }
+  },
+  { deep: true }
 );
 watchEffect(
   () => {
-    if (Math.abs(props.scale - viewerConfig.value.scaleX) > 0.001) {
-      emit("update:scale", viewerConfig.value.scaleX);
+    if (Math.abs(props.scale.value - viewerConfig.value.scaleX) > 0.001) {
+      console.log("update?", props.scale.value, viewerConfig.value.scaleX);
+      emit("update:scaleValue", viewerConfig.value.scaleX);
     }
   },
   { flush: "post" }
 );
 
 const invConfig = useViewerInvertTransformConfig();
+const viewMat = useViewerTransform();
+const viewInvertMat = useViewerInvertTransform();
 const config = computed(
   () =>
     size.value && {
@@ -85,8 +93,12 @@ const config = computed(
     }
 );
 const { updateSize } = useGlobalResize();
+const { misPixel } = useGlobalVar();
 defineExpose({
   updateSize,
+  getTimeScreen(time: number) {
+    return viewMat.value.point({x: time * misPixel, y: 0}).x
+  },
 });
 </script>
 

src/sdk/association/animation.ts

@@ -357,7 +357,7 @@ export const endTime = computed(() => {
     );
     return Math.max(...endPoints);
   })
-  return Math.max(...amsEndTime) + 1
+  return Math.max(...amsEndTime) + animationGroup.delayEndTime()
 })
 
 export const currentTime = ref(0);

src/sdk/sdk.ts

@@ -369,6 +369,7 @@ export type AnimationGroup = {
   pause: () => void;
   // 添加动画模型
   addAnimationModel: (data: AnimationModel) => AnimationModel3D;
+  delayEndTime: () => number
 
   // 设置当前时间， 单位为秒
   setCurrentTime: (s: number) => void;

src/views/animation/bottom.vue

@@ -17,11 +17,11 @@
         type="reduce"
         class="icon"
         ctrl
-        @click="scale = Math.max(0.5, scale - 0.5)"
+        @click="scaleValue = Math.max(0.5, scaleValue - 0.5)"
       />
       <Slider
         class="slider"
-        v-model:value="scale"
+        v-model:value="scaleValue"
         :min="0.5"
         :max="8"
         :step="0.01"
@@ -31,12 +31,16 @@
         type="magnify"
         class="icon"
         ctrl
-        @click="scale = Math.min(8, scale + 0.5)"
+        @click="scaleValue = Math.min(8, scaleValue + 0.5)"
       />
     </div>
   </div>
   <div class="oper-bar" :class="{ disabled: play }">
-    <Renderer v-model:scale="scale" ref="renderer">
+    <Renderer
+      :scale="scale"
+      @update:scale-value="(val) => (scaleValue = val)"
+      ref="renderer"
+    >
       <v-group>
         <template v-if="am">
           <template v-for="prop in tlProps">
@@ -112,7 +116,14 @@ const emit = defineEmits<{
   (e: "update:currentTime", v: number): void;
 }>();
 
-const scale = ref(1);
+const scaleValue = ref(1);
+const scale = ref({ value: scaleValue.value, center: { x: 0, y: 0 } });
+watch(scaleValue, () => {
+  scale.value.center = renderer.value
+    ? { x: renderer.value.getTimeScreen(currentTime.value), y: 0 }
+    : { x: 0, y: 0 };
+  scale.value.value = scaleValue.value;
+});
 
 const tlProps = [
   {
@@ -159,6 +170,7 @@ watch(play, (_a, _b, onCleanup) => {
   play.value ? animationGroup.play() : animationGroup.pause();
   onCleanup(
     watchEffect(() => {
+      console.log(currentTime.value, endTime.value);
       if (currentTime.value >= endTime.value) {
         play.value = false;
       }