图片上的贴纸（可拖动、可缩放和可旋转）答案

【问题标题】：Stickers on Image (draggable, scalable and rotatable)图片上的贴纸（可拖动、可缩放和可旋转）
【发布时间】：2019-01-23 21:59:03
【问题描述】：

我需要在图片上做一些类似贴纸的事情。我希望它可拖动、可缩放和可旋转。颤振有可能吗？

我发现类可拖动 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);
            },
          ),
        ),
      ],
    );
  }

请给点提示。

【问题讨论】：

标签： image dart flutter draggable scalable

【解决方案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>
       )
    ])
  )
}

}

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

【讨论】：