使用手势动态调整 Flutter Widget 的位置大小和旋转 [英] Position Resize and Rotate Flutter Widget dynamically with gesture

问题描述

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

I am developing an image editor in flutter. For that, I need to add a feature of adding images and text dynamically to the screen. Each of them should be able to independently scale, position, and rotate. There should be an anchor point like in word or in photoshop to indicate the active image and to scale and rotate them(sample in the image). The image should be positioned with drag and drop.

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

The widget should be able to scale in x, in y, and in both xy.

我尝试过的事情

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

1.matrix_gesture_detector I think this package doesn't have the option to scale only in x or only in y. It uniformly scales the widget in x and y. Also making the active image with something like in the image is difficult. If we wrap the active image in a custom widget like in the image, the widget also scales with the image. For eg if the border thickness is 1 px when scaled the thickness also scales making it wired.

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

2. Using Transform Widget. When the transform widget is used the above-mentioned problem of the widget indication the active image around the image also scales with the widget. Also in transform when scaling I have to adjust the alignment or the origin dynamically with respect to the scaling chosen. For eg, if I want to scale in the top direction only, I have to set the anchor point to the bottomCenter.But here the anchor points are set with respect to the initial size of the widget. So when changing the anchor point to scale in a different direction, the widget jumps to a corresponding alignment position with respect to the original size of the widget.

3.使用 Positioned.fromRect我已经从 StackOverflow 尝试过这个解决方案在颤振中调整旋转容器的大小，但是这里的问题是解决方案仅适用于一个小部件.所以我把它包裹在一个堆栈中.但是当旋转时，它会旋转整个堆栈.堆栈采用画布的高度和宽度.所以变换小部件的锚点的对齐方式是相对于那个而不是相对于图像.

3. Using Positioned.fromRect I have tried this solution from StackOverflow Resizing a rotated container in flutter, but here the problem is the solution is only for one widget. So I wrapped that in a stack. But when rotated, it rotates the full stack. The stack takes the height and width of the canvas. So the alignment of the anchor point of the transform widget is with respect to that and not with respect to the image.

注意:我正在使用 Getx 进行状态管理.如果你能在getx中提供解决方案，那是首选.

NB: I am using Getx for state managemanet. If you can provide the solution in getx, that is preferred.

推荐答案

你可以扭曲一个 Stack->Positioned->Transform.rotate->Your Widget.也可以参考photobooth的源码.

You can warp a Stack->Positioned->Transform.rotate->Your Widget. Also refer the source code of photobooth.

这篇关于使用手势动态调整 Flutter Widget 的位置大小和旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！