flutter背景贴图的困难总结

需求：一张前景图，一张背景图。背景图可以放大缩小，可以平移。

复盘一下整个烦闷之旅。

困难一，保存成文件。

遇到了几个十分难受的问题。 现在回看是很简单，代码也没几行，可中间的思考过程是十分痛苦的， 痛苦源自于，看起来很简单，可就是无法思考出来的挣扎。

用canvas完成缩放，平移，这是最基本的常识。而一开始却偏偏没那么做。走上歧途的原因是，觉得canvas的大小是有前景图决定的，对前景图放大缩小，和对背景图没有关系。实际上用前景图的大小调canvas.saveLayer(）， 可以再次扩大canvas。

一开始就走上了自己处理缩放，平移的道路了。可是怎么也处理不好。

1. 平移位置总是偏移。

这个坑，等后面采用canvas缩放策略的时候，还会遇到。UI上取得平移位置距离，是UI上view的， 并不是真实图片上的平移动，这是两回事，需要做好转换。

1. 前景图的Rect和缩放后的背景图Rect，交叉重叠部分的计算，也总是不对。放大后移出前景区域后，就算不准了。中间做了很多无谓的尝试。关键是没有认清第一点。
2. 最后，想想以后还要做旋转的功能， 这个自己是无法处理的。只能依赖于canvas旋转。所以觉得正确的道路，还是应该在直接处理canvas上。

直接处理canvas。 做好三点就可以了。

1. 缩放和旋转，是不需要转换的。但是平移是需要的。要从UI view转到真实图。
2. 转完以后，要缩放回去，因为canvas会再缩放回来。不然就多了。
3. 背景图在UI view上的大小占比，要转成在真实图上的大小。

困难二，花屏

在拖动背景图时， 背景图的下边缘会留下一条条的线。这肯定又是flutter渲染器的bug，不清楚什么原因。用stack包裹三个customPianter时，渲染就会出现问题。最后发现不用customPianter，单纯的用Image.file()替换背景图的customPianter。就没有问题了。