如何使用onPanUpdate调用缩放GestureDetector?

问题描述

我正在开发绘图应用程序.我想同时启用画布上的绘图和缩放绘图.到目前为止，我尝试通过在InteractiveViewer中包装GestureDetector并使用AbsorbPointer打开和关闭缩放模式来实现此目的.请参阅下面的最小演示代码.

I'm working on a drawing app. I want to enable both drawing on the canvas and zooming the drawings. So far, I tried achieving it by wrapping GestureDetector in InteractiveViewer and using AbsorbPointer to turn the zoom mode on and off. See the minimum demo code below.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
  home: new IssueExamplePage(),
  debugShowCheckedModeBanner: false,
));

class IssueExamplePage extends StatefulWidget {
  @override
  _IssueExamplePageState createState() => _IssueExamplePageState();
}

class _IssueExamplePageState extends State<IssueExamplePage> {
  bool drawingBlocked = false;
  List<Offset> points = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.grey,
          padding: EdgeInsets.all(5),
          child: Container(
            color: Colors.white,
            child: InteractiveViewer(
              child: AbsorbPointer(
                absorbing: drawingBlocked,
                child: GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  onPanUpdate: (details) {
                    RenderBox renderBox = context.findRenderObject();
                    Offset cursorLocation = renderBox.globalToLocal(details.localPosition);

                    setState(() {
                      points = List.of(points)..add(cursorLocation);
                    });
                  },
                  onPanEnd: (details) {
                    setState(() {
                      points = List.of(points)..add(null);
                    });
                  },
                  child: CustomPaint(
                    painter: MyPainter(points),
                    size: Size.infinite
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            child: Icon(drawingBlocked? CupertinoIcons.hand_raised_fill : CupertinoIcons.hand_raised),
            onPressed: () {
              setState(() {
                drawingBlocked = !drawingBlocked;
              });
            }
          ),
          SizedBox(
            height: 10
          ),
          FloatingActionButton(
            child: Icon(Icons.clear),
            onPressed: () {
              setState(() {
                points = [];
              });
            }
          ),
          SizedBox(
            height: 20
          ),
        ],
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  MyPainter(this.points);
  List<Offset> points;
  Paint paintBrush = Paint()
    ..color = Colors.blue
    ..strokeWidth = 5
    ..strokeJoin = StrokeJoin.round
    ..strokeCap = StrokeCap.round;

  @override
  void paint(Canvas canvas, Size size) {
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null) {
        canvas.drawLine(points[i], points[i + 1], paintBrush);
      }
    }
  }

  @override
  bool shouldRepaint(MyPainter oldDelegate) {
    return points != oldDelegate.points;
  }
}

但是，有了这种实现，OnPanUpdate会延迟工作(请参见当窗口小部件包装在InteractiveViewer中时，Flutter onPanStart会延迟调用).还有其他方法可以达到预期的效果(缩放和绘图)，还是可以解决OnPanUpdate延迟?

However, with this realization OnPanUpdate is working with a delay (see Flutter onPanStart invokes late when the widget is wrapped inside InteractiveViewer). Is there any other way to achieve the expected result (both zooming and drawing) or is it possible to fix the OnPanUpdate delay?

推荐答案

更新:我找到了某种解决方案.您可以使用Listener而不是GestureDetector(它可以代替大多数参数:onPanStart-> onPointerDown，onPanUpdate-> onPointerMove等).但是看来GestureDetector没有修复程序.

UPDATE: I found some sort of solution. You can use Listener instead of GestureDetector (it has substitues for the most of the parameters: onPanStart -> onPointerDown, onPanUpdate -> onPointerMove, etc.). But it seems like there's no fix for GestureDetector.

这篇关于如何使用onPanUpdate调用缩放GestureDetector?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！