捏合缩放在手指移动时清除

Question

我正在开发一个 flutter 应用程序。我想要缩放图像并想要捏合。它工作正常但是当我拿手指时它正在删除缩放。我的需要是想在手指不想清除时使用捏合来拖动和缩放。我正在使用 'cached_network_image' 加载图像。对于缩放，我正在使用 'pinch_zoom_image' 插件中的自定义库。

源代码为https://github.com/YoussefKababe/pinch_zoom_image/blob/master/lib/src/pinch_zoom_image.dart

在这段代码中，我尝试实现“_handleScaleEnd()”函数。但是我没有解决我的问题。

我的代码如下所示。

pubspec.yaml

cached_network_image: ^0.8.0 pinch_zoom_image: ^0.2.5

main.dart

import 'package:flutter/material.dart';
import 'pinch_zoom_image_custom.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return new MaterialApp(
    title: 'Pinch Zoom Image',
    theme: new ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: Scaffold(
        appBar: AppBar(
        title: Text('Pinch Zoom Image'),
        ),
        body: ListView(
        children: <Widget>[

            Container(
            padding: EdgeInsets.all(16.0),
            child: PinchZoomImage(
                image: CachedNetworkImage(
                imageUrl: 'https://i.imgur.com/tKg0XEb.jpg',
                ),
                zoomedBackgroundColor: Color.fromRGBO(240, 240, 240, 1.0),
                onZoomStart: () {
                print('Zoom started');
                },
                onZoomEnd: () {
                print('Zoom finished');
                },
            ),
            ),
        ],
        ),
    ),
    );
}
}

pinch_zoom_image_custom.dart

import 'package:flutter/material.dart';
import 'pinch_zoom_image_custom.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return new MaterialApp(
    title: 'Pinch Zoom Image',
    theme: new ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: Scaffold(
        appBar: AppBar(
        title: Text('Pinch Zoom Image'),
        ),
        body: ListView(
        children: <Widget>[

            Container(
            padding: EdgeInsets.all(16.0),
            child: PinchZoomImage(
                image: CachedNetworkImage(
                imageUrl: 'https://i.imgur.com/tKg0XEb.jpg',
                ),
                zoomedBackgroundColor: Color.fromRGBO(240, 240, 240, 1.0),
                onZoomStart: () {
                print('Zoom started');
                },
                onZoomEnd: () {
                print('Zoom finished');
                },
            ),
            ),
        ],
        ),
    ),
    );
}
}

Answer 1

我用 'matrix_gesture_detector package' 代替 'pinch_zoom_image' 解决了问题。

我从下面得到了答案link。这是我的期望。 https://github.com/pskink/matrix_gesture_detector/blob/master/example/lib/transform_demo3.dart

在这段代码中，我尝试使用矩阵手势库进行捏合和缩放。它将检测手势检测。

我的代码如下所示。

    import 'package:flutter/material.dart';
    import 'package:cached_network_image/cached_network_image.dart';
    import 'package:matrix_gesture_detector/matrix_gesture_detector.dart';


    void main() => runApp(new MyApp());

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
        title: 'Pinch Zoom Image',
        theme: new ThemeData(
            primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
            title: Text('Pinch Zoom Image'),
            ),
            body:TransformDemo3()

        ),
        );
    }
    }

    class TransformDemo3 extends StatefulWidget {
    @override
    _TransformDemo3State createState() => _TransformDemo3State();
    }

    class _TransformDemo3State extends State<TransformDemo3> {



    Matrix4 matrix = Matrix4.identity();
    ValueNotifier<int> notifier = ValueNotifier(0);


    @override
    Widget build(BuildContext context) {
        return Scaffold(
        body: LayoutBuilder(
            builder: (ctx, constraints) {
            Size s = constraints.biggest;
            double side = s.shortestSide * 0.666;
            matrix.leftTranslate((s.width - side) / 2, (s.height - side) / 2);
            return MatrixGestureDetector(
                onMatrixUpdate: (m, tm, sm, rm) {
                matrix = MatrixGestureDetector.compose(matrix, tm, sm, null);

                notifier.value++;
                },
                child: Container(
                width: double.infinity,
                height: double.infinity,
                alignment: Alignment.topLeft,
                color: Color(0xff444444),
                child: AnimatedBuilder(
                    animation: notifier,
                    builder: (ctx, child) {
                    return Transform(
                        transform: matrix,
                        child: Container(
                        width: side,
                        height: side,
                        child: CachedNetworkImage(
                            imageUrl: 'https://i.imgur.com/tKg0XEb.jpg',
                        ),
                        ),
                    );
                    },
                ),
                ),
            );
            },
        ),
        );
    }
    }

捏合缩放在手指移动时清除

pinch zoom is clears when finger takes

android

ios

dart

flutter

flutter-animation