成帧器运动和变换矩阵

Question

我正在使用成帧器运动制作应用程序，我需要将 svg 拖动到另一个 svg 内，但我的问题是视图框大小不等于窗口大小，因此当我拖动元素时，鼠标在屏幕上的 1px 移动就像 100+ px。我知道在 JavaScript 中我们可以使用 screenX、sceenY 和 CTM（当前变换矩阵）计算 x 和 y。是否可以以某种方式使成帧器运动拖动功能来计算它？

<svg viewBox="0 0 40 20">
  <motion.circle drag cx="5" cy="5" r="0.5"strokeWidth="0.1"/>
</svg>

PS 我无法更改视图框大小及其 100% 的屏幕宽度和高度，可能我们需要使用成帧器运动useTransform或useMotionValue挂钩来转换当前矩阵，但我不知道该怎么做。

这是应用程序的当前状态，当您尝试拖动播放器对象时，您可以看到问题。https://waterpolo.klaktech.com

Answer 1

我在正确理解这个问题时遇到了问题，但我认为这就是您想要的。

有几个问题：

• 我正在捕获每个框的宽度和高度，以了解它们在第一次 useEffect 时是否重叠。

• 问题是，当项目改变位置时，REF 不会更新。这意味着我们需要onDrag钩子来更新盒子的 X 和 Y 位置。

• 第二个问题是，那里的 X 和 Y 是从鼠标暴露出来的，这意味着它不是该对象的原点之一，因此在鼠标实际进入另一个对象之前，可能不会发生重叠

我设置了这个，以便您可以查看代码

https://codesandbox.io/s/paths-forked-0iqtdj?file=/src/Example.tsx