flutter - GestureDetector onScaleUpdate 重置为 0

Question

我有一个基本上使用捏手势检测器旋转/调整大小的以下代码。但由于某种原因，当比例结束scale时angle重置为 0。

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:math' as math;

void main() {
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: PinchRotateZoom(),
    );
  }
}

class PinchRotateZoom extends StatefulWidget {
  @override
  _PinchRotateZoomState createState() => _PinchRotateZoomState();
}

class _PinchRotateZoomState extends State<PinchRotateZoom> {
  double _width = 300;
  double _height = 200;

  Matrix4 _matrix = Matrix4(
    1, 0, 0, 0, //
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Transform(
          transform: _matrix,
          alignment: Alignment.center,
          child: GestureDetector(
            onScaleUpdate: (details) {
              var angle = details.rotation;
              var scale = details.scale;

              print(angle);
              print(scale);

              var angleMatrix = Matrix4.identity();
              angleMatrix[0] = angleMatrix[5] = math.cos(angle);
              angleMatrix[1] = math.sin(angle);
              angleMatrix[4] = -math.sin(angle);

              var scaleMatrix = Matrix4.identity();
              scaleMatrix[0] = scaleMatrix[5] = scale;

              _matrix = angleMatrix * scaleMatrix;
              setState(() {});
            },
            child: Container(
              height: _height,
              width: _width,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}

标签： flutterdart

Answer 1

我是这样解决的：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:math' as math;

void main() {
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // home: EditorScreen(),
      home: PinchRotateZoom(),
    );
  }
}

class PinchRotateZoom extends StatefulWidget {
  @override
  _PinchRotateZoomState createState() => _PinchRotateZoomState();
}

class _PinchRotateZoomState extends State<PinchRotateZoom> {
  double _width = 300;
  double _height = 200;

  Matrix4 _matrix = Matrix4(
    1, 0, 0, 0, //
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1,
  );

  double _baseScaleFactor = 1.0;
  double _scaleFactor = 1.0;

  double _baseAngleFactor = 0;
  double _angleFactor = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Transform(
          transform: _matrix,
          alignment: Alignment.center,
          child: GestureDetector(
            onScaleStart: (details) {
              _baseScaleFactor = _scaleFactor;
              _baseAngleFactor = _angleFactor;
            },
            onScaleUpdate: (details) {
              _scaleFactor = _baseScaleFactor * details.scale;
              _angleFactor = _baseAngleFactor + details.rotation;

              var angleMatrix = Matrix4.identity();
              angleMatrix[0] = angleMatrix[5] = math.cos(_angleFactor);
              angleMatrix[1] = math.sin(_angleFactor);
              angleMatrix[4] = -math.sin(_angleFactor);

              var scaleMatrix = Matrix4.identity();
              scaleMatrix[0] = scaleMatrix[5] = _scaleFactor;

              _matrix = angleMatrix * scaleMatrix;
              setState(() {});
            },
            child: Container(
              height: _height,
              width: _width,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}