使用手势动态调整位置大小和旋转 Flutter 小部件

Question

我正在 Flutter 中开发一个图像编辑器。为此，我需要添加一个将图像和文本动态添加到屏幕的功能。它们中的每一个都应该能够独立缩放、定位和旋转。应该有一个像 word 或 photoshop 中的锚点来指示活动图像并缩放和旋转它们（图像中的示例）。图像应通过拖放定位。

小部件应该能够在 x、y 和 xy 中缩放。

我尝试过的事情

1.matrix_gesture_detector 我认为这个包没有仅在 x 或仅在 y 中缩放的选项。它在 x 和 y 中统一缩放小部件。同样，制作具有图像中类似内容的活动图像也很困难。如果我们像图像一样将活动图像包装在自定义小部件中，小部件也会随图像缩放。例如，如果缩放时边框厚度为 1 像素，则厚度也会缩放使其连线。

2. 使用变换小部件。 当使用变换小部件时，上述小部件指示问题，图像周围的活动图像也随小部件缩放。同样在缩放时的变换中，我必须根据选择的缩放动态调整对齐方式或原点。例如，如果我只想在顶部方向缩放，我必须将锚点设置为底部中心。但是这里的锚点是相对于小部件的初始大小设置的。因此，当更改锚点以在不同方向上缩放时，小部件会跳转到相对于小部件原始大小的相应对齐位置。

3. 使用 Positioned.fromRect 我已经从 StackOverflow Resizing a rotation container in flutter尝试了这个解决方案 ，但这里的问题是该解决方案仅适用于一个小部件。所以我把它包裹在一个堆栈中。但是当旋转时，它会旋转整个堆栈。堆栈采用画布的高度和宽度。所以变换小部件的锚点的对齐是关于那个而不是关于图像的。

注意：我使用 Getx 进行状态管理。如果您可以在 getx 中提供解决方案，那是首选。

Answer 1

您可以扭曲 Stack->Positioned->Transform.rotate->Your Widget。另请参阅 Photobooth 的源代码。