如何让ASImageNode尺寸匹配原图或移除透明空白边距

问题现象 #

• 原始图片尺寸大于父视图时，ASImageNode展示区域左右两侧出现空白
• ASImageNode默认尺寸与父视图保持一致，不符合预期展示效果
• 已配置aspectRatioFit属性，空白问题仍存在
  

问题原因 #

aspectRatioFit的渲染逻辑是等比缩放图片，直到图片完整适配容器的最短边。如果图片自身宽高比和ASImageNode容器的宽高比不匹配，容器长边方向就会出现留白。当前场景下ASImageNode默认撑满父视图宽度，图片缩放后高度撑满容器、实际渲染宽度小于容器宽度，就形成了左右两侧的空白。

可落地调整方案 #

方案1：按图片宽高比动态计算节点尺寸（最符合需求，推荐） #

不要给ASImageNode加和父视图等宽的强制约束，拿到图片原始尺寸后，结合业务要求的展示高度，反推匹配图片比例的目标宽度，直接设置节点的偏好尺寸即可：

// 拿到图片原始尺寸后计算宽高比
CGFloat imageAspectRatio = image.size.width / image.size.height;
// 替换为业务要求的图片最大展示高度
CGFloat displayMaxHeight = 150.0;
CGFloat targetWidth = displayMaxHeight * imageAspectRatio;

// 配置节点尺寸
imageNode.style.preferredSize = CGSizeMake(targetWidth, displayMaxHeight);
imageNode.contentMode = UIViewContentModeScaleAspectFit;

如果是异步加载网络图片，在图片加载完成的回调里重新计算尺寸，调用setNeedsLayout刷新布局即可。

方案2：裁剪填充（适用于允许图片裁切的场景） #

如果业务不需要完整展示全图，可以把内容模式改为aspectRatioFill，图片会等比缩放撑满整个容器，超出容器的部分自动裁剪，不会产生留白：

imageNode.contentMode = UIViewContentModeScaleAspectFill;
// 必须开启裁剪，否则图片会溢出容器边界
imageNode.clipsToBounds = YES;

方案3：自适应宽度配置（无需手动计算尺寸） #

如果不想手动计算尺寸，可以配置ASImageNode宽度自适应内容，同时限制最大宽度不超过父视图宽度：

// 宽度自适应图片内容
imageNode.style.width = ASDimensionMake(ASDimensionUnitAuto, 0);
// 最大宽度不超过父视图宽度
imageNode.style.maxWidth = ASDimensionMakeWithFraction(1.0);
// 替换为业务需要的展示高度
imageNode.style.height = ASDimensionMake(150.0);
imageNode.contentMode = UIViewContentModeScaleAspectFit;

注意：使用该方案时不要给节点添加和父视图等宽的强制约束，否则自适应宽度规则会失效。

内容的提问来源于stack exchange，提问作者dev2019