自学内容网 自学内容网

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。就没有问题了。


原文地址:https://blog.csdn.net/zjuter/article/details/140210062

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!