最近产品上有个图片编辑的需求，需要对编辑区域做放大和缩小， 以方便用户编辑图片。做起来远比博主当初预想的要难受。这期间遇到几个问题。一一做一下记录。
如果只是单纯的缩放，没有对缩放的内容进行改变和更新， 那么基本没啥问题。
这是基本的使用。
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.位置偏移问题。放大缩小后的手指点位置不对。
区域缩放后，手指点击的区域和原图编辑区域，这儿有个映射关系。
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. RepaintBoundary和 shouldRepaint（）解决无意义刷新。
在缩放时，CustomPaint会反复刷新，尽可能避免不必要的刷新。做到在缩放时不刷新，在编辑时刷新。
6. crash问题
你可能会碰到这样的crash：
* thread #9, name = 'io.flutter.1.ui', stop reason = EXC_BAD_ACCESS (code=1, address=0x105ea4000)frame #0: 0x0000000107feed54 Flutter`flutter::DisplayListBuilder::Restore() + 284Flutter`flutter::DisplayListBuilder::Restore:-> 0x107feed54 <+284>: ldrsb w8, [x24]0x107feed58 <+288>: sub w8, w8, #0x170x107feed5c <+292>: cmp w8, #0x10x107feed60 <+296>: b.hi 0x107fef1e4 ; <+1452>Target 0: (Runner) stopped.这是flutter SDK导致的问题。3.22.0开始引入的问题， 写这篇文章时最新是3.22.2。解决这个问题就是退回到上一个版本， 3.19.6.