Question

我需要在图像上做类似贴纸的操作。我希望它可拖动，可缩放和可旋转。飘动有可能吗？

我发现课程可拖动 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>
       )
    ])
  )
}

}

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

图像上的标签（可拖动，可缩放和可旋转）

1 个答案: