Flutter InteractiveViewer CustomPaint的使用总结

最近产品上有个图片编辑的需求,需要对编辑区域做放大和缩小, 以方便用户编辑图片。做起来远比博主当初预想的要难受。这期间遇到几个问题。一一做一下记录。

如果只是单纯的缩放,没有对缩放的内容进行改变和更新, 那么基本没啥问题。

这是基本的使用。

Dart 复制代码
InteractiveViewer(
              transformationController: controller,
              boundaryMargin: const EdgeInsets.all(double.infinity),
              minScale: 0.5,
              maxScale: 3.0,
              constrained: false,
              scaleEnabled: true,
              panEnabled: false,
              onInteractionStart: (ScaleStartDetails details) {
                if (details.pointerCount > 1) {
                  widget.controller.value.moving = false;
                  // logger
                  //     .i("onInteractionStart,two, ${details.localFocalPoint}");
                } else {
                  // 单指
                  if (allowDraw) {
                    widget.controller
                        .onDragStartCallback(details, controller, measuredRect,statusBarHeight);
                    // logger.i(
                    //     "onInteractionStart, single, ${details.localFocalPoint}");
                  }
                }
              },
              onInteractionUpdate: (ScaleUpdateDetails details) {
                // logger.i(
                //     "onInteractionUpdate,pointerCount, ${details.pointerCount}");

                if (details.pointerCount > 1) {
                  widget.controller.value.moving = false;
                  // logger
                  //     .i("onInteractionUpdate,two, ${details.localFocalPoint}");
                  allowDraw = false;
                } else {
                  // 单指
                  if (allowDraw &&
                      details.focalPointDelta != const Offset(0, 0)) {
                    widget.controller.onDragUpdateCallback(
                        details, controller, measuredRect, statusBarHeight);
                    // logger.i(
                    //     "onInteractionUpdate, single, ${details.localFocalPoint}");
                  }
                }
              },
              onInteractionEnd: (ScaleEndDetails details) {
                // logger.i(
                //     "onInteractionEnd,pointerCount, ${details.pointerCount}");
                if (details.pointerCount > 1) {
                  widget.controller.value.moving = false;
                  //  logger.i("onInteractionEnd, two");
                } else if (details.pointerCount == 1) {
                } else if (details.pointerCount == 0) {
                  widget.controller.onDragEndCallback(details);
                  allowDraw = true;
                  // logger.i("onInteractionEnd single");
                }
              }

下面都是针对CustomPaint缩放导致的问题。

1.drawpath问题, 用drawline/drawpoint替换。

flutter 渲染器,哪怕是最新的impeller都有问题(官网上bug),原因是flutter目前还不能直接控制硬件层。drawPath方法在缩放的情况下,有性能问题,卡帧,掉帧,甚至crash。 说是会有一些计算什么。简单的图形就用drawline/drawpoint实现。如果要用到贝塞尔曲线,那就没有办法了。

2.图层层数尽可能的少。

save()/savelayer(), 尽可能的少调。多了同样会有性能问题,卡帧,掉帧,甚至crash。所以要优化图层。

3.无法缩小。

这个简单,就加上这句代码:

boundaryMargin: const EdgeInsets.all(double.infinity),

4.位置偏移问题。放大缩小后的手指点位置不对。

区域缩放后,手指点击的区域和原图编辑区域,这儿有个映射关系。

Dart 复制代码
    scale = transformationController.value.getMaxScaleOnAxis();//实时
    double width = details.localFocalPoint.dx -((1.sw - measuredRect.width)*scale/2)-
        transformationController.value.getTranslation().x;
    double height = details.localFocalPoint.dy -((1.sh - measuredRect.height)*scale/2)-
        transformationController.value.getTranslation().y;

    currentPosition = Offset(width / scale, height / scale);

代码中,实时获取缩放值transformationController.value.getMaxScaleOnAxis(); 而不是回调函数中的参数。那个是基于上次的。

5. shouldRepaint()问题。

在缩放时,CustomPaint会反复刷新,尽可能避免不必要的刷新。做到在缩放时不刷新,在编辑时刷新。

相关推荐
m0_7482478016 小时前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
迷雾漫步者17 小时前
Flutter组件————PageView
flutter·跨平台·dart
迷雾漫步者1 天前
Flutter组件————FloatingActionButton
前端·flutter·dart
coder_pig1 天前
📝小记:Ubuntu 部署 Jenkins 打包 Flutter APK
flutter·ubuntu·jenkins
捡芝麻丢西瓜1 天前
flutter自学笔记5- dart 编码规范
flutter·dart
恋猫de小郭1 天前
什么?Flutter 可能会被 SwiftUI/ArkUI 化?全新的 Flutter Roadmap
flutter·ios·swiftui
sunly_2 天前
Flutter:导航,tab切换,顶部固定,列表分页滚动
开发语言·javascript·flutter
敲代码的小强2 天前
Flutter项目兼容鸿蒙Next系统
flutter·华为·harmonyos
Zh-jie3 天前
flutter 快速实现侧边栏
前端·javascript·flutter
truemi.734 天前
flutter --no-color pub get 超时解决方法
android·flutter