相关疑难解决方法(0)

背景

尝试设置一个简单的图像编辑器，允许用户通过手势缩放和移动图像。

GestureDetector通过,Transform.scale和可以很好地进行缩放和移动Transform.rotate。

问题

缩放后，用户仍然可以缩放已经缩放的图像。

但是：这GestureDetector不会改变执行命中测试的区域。

问题：用户只能使用原始的 hitbox 来操作图像。无法通过在扩展的外部形状上使用两指捏合手势来缩放图像。

图片

第一张图片演示了基本设置。

第二张图片演示了使用手势的结果。它显示了小的、未改变的内部碰撞箱。以及由此产生的缩放和旋转形状。

填充的框是碰撞框。外部矩形显示缩放后的图像。

期望的行为

在缩放后的外部形状上使用两指捏合手势应该允许进一步操作对象。

相反，内部打击盒可以单独使用。但用户期望使用缩放后的外部形状来进一步缩放和移动对象。

代码

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: GestureTest(),
    );
  }
}

class DrawContainer {
  Color color;
  Offset offset;
  double scale;
  double angle;
  late double baseScaleFactor;

  DrawContainer(this.color, this.offset, this.scale, this.angle) {
    baseScaleFactor = scale;
  }

  onScaleStart() => …

我要构建的是一个小部件，可以使其子小部件可缩放，类似于可缩放行为。

我要讲的手势是

1. 捏放大
2. 点按两次即可缩放
3. 点击以获取小部件的本地位置

这是我的小部件计划：

ZoomableWidget(
   child: // My custom Widget which should be zoomable.
)

这是我当前的进度：

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:vector_math/vector_math_64.dart';

class ZoomableWidget extends StatefulWidget {
  final Widget child;

  const ZoomableWidget({Key key, this.child}) : super(key: key);
  @override
  _ZoomableWidgetState createState() => _ZoomableWidgetState();
}

class _ZoomableWidgetState extends State<ZoomableWidget> {
  double _scale = 1.0;
  double _previousScale;
  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: GestureDetector(
        onScaleStart: (ScaleStartDetails details) {
          _previousScale = _scale;
        },
        onScaleUpdate: (ScaleUpdateDetails details) {
          setState(() {
            _scale …