flutter背景贴图的困难总结
需求:一张前景图,一张背景图。背景图可以放大缩小,可以平移。
复盘一下整个烦闷之旅。
困难一,保存成文件。
遇到了几个十分难受的问题。 现在回看是很简单,代码也没几行,可中间的思考过程是十分痛苦的, 痛苦源自于,看起来很简单,可就是无法思考出来的挣扎。
用canvas完成缩放,平移,这是最基本的常识。而一开始却偏偏没那么做。走上歧途的原因是,觉得canvas的大小是有前景图决定的,对前景图放大缩小,和对背景图没有关系。实际上用前景图的大小调canvas.saveLayer(), 可以再次扩大canvas。
一开始就走上了自己处理缩放,平移的道路了。可是怎么也处理不好。
- 平移位置总是偏移。
这个坑,等后面采用canvas缩放策略的时候,还会遇到。UI上取得平移位置距离,是UI上view的, 并不是真实图片上的平移动,这是两回事,需要做好转换。
- 前景图的Rect和缩放后的背景图Rect,交叉重叠部分的计算,也总是不对。放大后移出前景区域后,就算不准了。中间做了很多无谓的尝试。关键是没有认清第一点。
- 最后,想想以后还要做旋转的功能, 这个自己是无法处理的。只能依赖于canvas旋转。所以觉得正确的道路,还是应该在直接处理canvas上。
直接处理canvas。 做好三点就可以了。
- 缩放和旋转,是不需要转换的。但是平移是需要的。要从UI view转到真实图。
- 转完以后,要缩放回去,因为canvas会再缩放回来。不然就多了。
- 背景图在UI view上的大小占比,要转成在真实图上的大小。
困难二,花屏
在拖动背景图时, 背景图的下边缘会留下一条条的线。这肯定又是flutter渲染器的bug,不清楚什么原因。用stack包裹三个customPianter时,渲染就会出现问题。最后发现不用customPianter,单纯的用Image.file()替换背景图的customPianter。就没有问题了。