我们在做图片拉伸的时候会出现这个报错,查了很多资料都解释不多,这次用代码跟踪并整理一下什么情况下会报错
上一个用到的一个192x78的png,记住这个尺寸!!!
1.正常情况
Image image = new Image.asset(
'asset/images/icon_bubble1.png',
width: 183,
height: 79,
centerSlice: Rect.fromLTWH(10, 1, 10, 5),
//centerSlice: Rect.fromLTWH(0, 0, 0, 0),
);
return new Scaffold(
appBar: new AppBar(title: new Text("Image Test"),
centerTitle: true,),
body:
image
);
注意这里183和79俩尺寸
跑起来打断点,走进decoration_image.dart中
可以看到几个关键字:outputSize、inputSize、sliceBorder、fittedSizes.source、sourceSize,记住这几个关键字
这里解释一下,outputSize的初始值是代码中的(183,79),inputSize的初始值是png的像素大小,sliceBorder是在390、391行根据inputSize和咱们输入的centerSlice来计算得出的,然后outputSize和inputSize又在393、394行根据sliceBorder改变了,最终得到图中显示的size。再往下走,会进入FittedSizes,点击进入applyBoxFit这个方法,跳到box_fit.dart里。如下图:
可以看到130行打的断点没有走,走到176行断点,说明运行正常,再往下走,断点回到decoration_image.dart里,
断言判断条件为true。
这里说明一下scale默认为1.0,所以这里的399行得出的sourceSize其实就是inputSize,而402行outputSize又把sliceBorder加回去了,又变成初始的outputSize值(183,79)了。destinationSize在这里暂时没有影响,所以不管了。
最终效果图
2.错误情况
把上边代码的width:183改成182
Image image = new Image.asset(
'asset/images/icon_bubble1.png',
width: 182,
height: 79,
centerSlice: Rect.fromLTWH(10, 1, 10, 5),
//centerSlice: Rect.fromLTWH(0, 0, 0, 0),
);
return new Scaffold(
appBar: new AppBar(title: new Text("Image Test"),
centerTitle: true,),
body:
image
);
走断点
注意看385行,outputSize的width是0.0,接着往下走断点,跳到box_fit.dart里
可以看到129、130行,返回的FittedSizes是(source:(0,0),destination:(0,0))这就导致了decoration_image.dart里的399行的sourceSize也是(0,0),也就导致assert为false
可以看到是因为sliceBorder的宽度与outputSize初始的宽度相等,在393行计算新的outputSize的宽度相减<=0导致的,这里182与183正好是个临界值
如上图所示,左斜线部分是centerSlice圈出来的范围,右斜线部分是sliceBorder的size,整个虚线是png,也就是初始inputSize的范围,实线是设置的png大小,也就是outputSize。当outputSize小于等于sliceBorder的时候就会报错!!
编辑------------------------------------------------------------------------------------------------------------------------------------------------------------------
简单粗暴的计算判断:保证图片真实大小(inputsize) 减去 centersize 的大小之后,小于 设定的图片大小(outputsize)