image - 图像上的贴纸(可拖动、可缩放和可旋转)

Question

我需要做一些事情，比如在图片上贴标签。我希望它可拖动、可缩放和可旋转。 flutter 有可能吗？

我发现类可拖动 https://stackoverflow.com/a/53957707/1984747

Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: position.dx,
          //top: position.dy - height + 20,
          child: Draggable(
            child: Container(
              width: width,
              height: height,
              color: Colors.blue,
              child: Center(child: Text("Drag", style: Theme.of(context).textTheme.headline,),),
            ),
            feedback: Container(
              child: Center(
                child: Text("Drag", style: Theme.of(context).textTheme.headline,),),
              color: Colors.red[800],
              width: width,
              height: height,
            ),
            onDraggableCanceled: (Velocity velocity, Offset offset){
              setState(() => position = offset);
            },
          ),
        ),
      ],
    );
  }

请提示。

Answer 1

GestureDetector()可用于检测缩放和旋转手势。

然后您需要计算缩放和旋转，并使用 Transform

但是，如果你的贴纸很小，我无法想象它是如何工作的(没有空间在一个小东西上放置 2 个触摸点)。所以你可能会想要使用和图像一样大的手势检测器。

class _YourWidgetState extends State<YourWidget> {

double finalScale = 1.0;
double finalRotation = 0.0;
ScaleUpdateDetails scaleStart;

Widget build() {
  return GestureDetector(
    onScaleStart: (ScaleUpdateDetails details) => {
        // you will need this in order to calculate difference
        // in rotation and scale:
        scaleStart = details;
    },
    onScaleUpdate: (ScaleUpdateDetails details) => {
       setState(() => {
         finalScale =  <calculate final scale here>
         finalRotation =  <calculate final rotation here>
       })
    },
    child: Stack(children: [
       <image widget>,
       Transform(
          transform: Matrix4.diagonal3(Vector3(finalScale, finalScale, finalScale))..rotateZ(finalRotation),
          child: <sticker widget>
       )
    ])
  )
}

}

或者，您可以使用滑动条来控制值，然后将缩放/旋转值传递给 Transform，而不是 GestureDetector() 来检测缩放/旋转。