React Native Skia结合Gesture Handler实现捏合缩放时解决“向原点偏移”问题的求助

大家好，我目前正在用React Native Gesture Handler和React Native Skia做一个支持平移+捏合缩放的画布功能，平移已经正常工作了，但缩放的时候总是会往画布原点偏移，试了一些方案都没解决这个问题，想请各位帮忙看看怎么调整代码，实现围绕捏合焦点的正常缩放，避免这种“向原点漂移”的情况？

以下是我的代码：

const canvasRef = useCanvasRef();
const WORLD_W = 3000;
const WORLD_H = 2000;

const scale = useSharedValue(1);
const savedScale = useSharedValue(1);
const startScale = useSharedValue(1);
const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
const startX = useSharedValue(0);
const startY = useSharedValue(0);
const focalX = useSharedValue(0);
const focalY = useSharedValue(0);

const pan = Gesture.Pan()
  .onBegin(() => {
    startX.value = translateX.value;
    startY.value = translateY.value;
  })
  .onUpdate((e) => {
    translateX.value = startX.value + e.translationX;
    translateY.value = startY.value + e.translationY;
  });

const pinch = Gesture.Pinch()
  .onBegin(() => {
    savedScale.value = scale.value;
  })
  .onUpdate((e) => {
    const next = Math.max(0.5, Math.min(3, startScale.value * e.scale));
    const dx = e.focalX - translateX.value;
    const dy = e.focalY - translateY.value;
    const factor = next / scale.value;
    translateX.value = e.focalX - dx * factor;
    translateY.value = e.focalY - dy * factor;
    scale.value = next;
  });

const transform = useDerivedValue<Transforms3d>(
  () => [
    { translateX: translateX.value },
    { translateY: translateY.value },
    { scale: scale.value },
  ],
  []
);

const gestures = Gesture.Simultaneous(pan, pinch);

return (
  <GestureDetector gesture={gestures}>
    <Canvas ref={canvasRef} style={[styles.canvas, { marginTop: statusBarHeight }]} >
      <Group transform={transform}>
        {values.map((s) => (
          <Circle
            key={s.id}
            cx={s.x * WORLD_W}
            cy={s.y * WORLD_H}
            r={s.size}
            color="white"
            opacity={0.3 + 0.7 * s.baseBrightness}
          />
        ))}
      </Group>
    </Canvas>
  </GestureDetector>
);
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000"
  },
  canvas: {
    flex: 1,
    backgroundColor: "#050815"
  },
});

麻烦各位帮忙排查下问题所在，给出可行的修改方案，非常感谢！

内容来源于stack exchange