如何平移和缩放图像？ [英] How do I pan and zoom an image?

问题描述

我正在尝试获取一些基本的图像平移和缩放功能。无状态版本可以显示图像（通过Transform旋转180度），并且Scale事件显示在日志中，仅此而已。

I'm trying to get some basic pan and zoom functionality for images. The stateless version can display images (rotated 180 degrees by Transform) and the Scale events show up in the logs, but that's it.

是 GestureDetector 用于获取平移/捏合/展开事件的正确小部件？我应该看变换，动画还是只修改图像小部件中的字段？

Is GestureDetector the correct widget for getting the pan/pinch/spread events? Should I be looking at Transform, Animation, or should I just be modifying the fields inside the Image widget?

// Wraps an Image widget to provide pan and zoom functionality.
class InteractiveImage extends StatelessWidget {
  InteractiveImage(this._image, {Key key}) : super(key: key);

  final Image _image;

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new GestureDetector(
        onScaleStart: (ScaleStartDetails details) => print(details),
        onScaleUpdate: (ScaleUpdateDetails details) => print(details),
        onScaleEnd: (ScaleEndDetails details) => print(details),
        child: new Transform(
          transform: new Matrix4.rotationZ(math.PI),
          alignment: FractionalOffset.center,
          child: _image,
        ),
      ),
    );
  }
}

有状态版本（无效）

Stateful version (doesn't work)

// Wraps an Image widget to provide pan and zoom functionality.
class InteractiveImage extends StatefulWidget {
  InteractiveImage(this._image, {Key key}) : super(key: key);

  final Image _image;

  @override
  _InteractiveImageState createState() => new _InteractiveImageState(_image);
}

class _InteractiveImageState extends State<InteractiveImage> {
  _InteractiveImageState(this._image);

  final Image _image;

  @override
  Widget build(BuildContext context) {
    setState(() => print("STATE SET\n"));
    return new GestureDetector(
      onScaleStart: (ScaleStartDetails details) => print(details),
      onScaleUpdate: (ScaleUpdateDetails details) => print(details),
      onScaleEnd: (ScaleEndDetails details) => print(details),
      child: new Transform(
        transform: new Matrix4.rotationZ(math.PI),
        alignment: FractionalOffset.center,
        child: _image,
      ),
    );
  }
}

更新（库解决方案）

使用 https://pub.dartlang.org/packages / zoomable_image

Update (library solution)

Use https://pub.dartlang.org/packages/zoomable_image

（也许可以帮助我添加物理场和弹性边？）

(And maybe help me add physics and elastic edges?)

推荐答案

我不确定您的意思是不起作用，但您的方向正确。

I'm not sure what you mean by "doesn't work" but you're on the right track.

查看 https://github.com/flutter/flutter/blob/master/examples/layers/widgets/gestures.dart 中提供了一个可以平移，捏合和缩放的小部件的工作示例。

Check out https://github.com/flutter/flutter/blob/master/examples/layers/widgets/gestures.dart for a working example of a widget you can pan, pinch, and scale.

这篇关于如何平移和缩放图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！