Swift高效设置圆角图片的方法

Posted 2023-05-04

参考技术A App中圆角常用的场景有：UIImageView(头像及cell中图片)、Button按钮(按钮)、Label文字(文字)等等。这些控件的圆角设置原理都是一样的，这里就以UIImageView圆角设置为例。
1.系统提供的圆角设置属性：

cornerRadius属性本身并没有什么问题，而masksToBounds属性会造成离屏渲染从而影响性能。

ps:Offscreen rendering(离屏渲染)：离屏渲染指的是在图像在绘制到当前屏幕前,需要先进行一次渲染,之后才绘制到当前屏幕。在第一次渲染时，GPU(Core Animation)或CPU(Core Graphics)需要额外的一块内存来进行渲染，完成后再绘制到屏幕。offscreen到onscreen需要进行上下文切换，这个切换的性能消耗是昂贵的。

事实上，当界面中单个或少量控件用此方法设置圆角，并不会影响性能,我们并不需要担心，但如果界面中大量使用此方法设置圆角，比如TableView中显示圆角图片等，滚动时就会出现界面卡顿，这当然不是我们想要看到的。

2.为了不让图像离屏渲染：
可以自己绘制圆角：

//也可以直接用贝塞尔设置圆形路径进行绘制

对上面两个绘制圆角的方法性能进行了简单的测试，分别进行多轮的100次测试，时间消耗上差别基本无几，大家可以选择任何一种方法使用。

ps： UIGraphicsBeginImageContextWithOptions方法参数说明：
size —- 图形上下文的大小
opaque —- 透明开关，如果图形完全不用透明，设置为YES以优化位图的存储。
scale —– 缩放因子,可以用[UIScreen mainScreen].scale来获取，但实际上设为0后，系统就会自动设置正确的比例了。在Retina屏幕上最好不要自己手动设置他的缩放比例，直接设置0，系统就会自动进行最佳的缩放

关键在于：绘制圆角最好在子线程进行，这样不会阻塞主线程，用户体验上会更好，特别是对于UITableView列表这样的场景，异步绘制是必须的，不然UITableView滑动可能会出现卡顿的情况。

可以将设置圆角方法放在UIImageView+Extension.swift（Swift在3.0以后没有Category,Extension文件之分了）文件中,创建setCornerImage方法：

在需要设置圆角的地方直接调用即可，例如：

wpf 设置图片圆角

设置页面布局的时候。遇到了设置图片圆角问题，然后试了几种方法，都可以

第一种：

<Border CornerRadius="50" BorderBrush="Blue" BorderThickness="2" Width="200" Height="200">
<Border.Background>
<ImageBrush ImageSource="pj123.jpg" />
</Border.Background>
</Border>

这种图片是跟着border设置的圆角而改变的，自适应图片的大小

图：

 

 

 第二种：

<Image Width="123" Height="80" Margin="0,0,0,0" Source="jpj123.jpg" Stretch="Fill" VerticalAlignment="Center" HorizontalAlignment="Center">
<Image.Clip>
<RectangleGeometry RadiusX="30" RadiusY="10" Rect="0,0,123,90"/>
</Image.Clip>
</Image>

 

这种是根据x和y来设置圆角，自我感觉这种比较适合只设置上边的圆角比较适合

图：

 

 

 第三种：

<!--border1样式-->
<Style x:Key="border1style" TargetType="{x:Type Border}">
<Setter Property="Width" Value="38"></Setter>
<Setter Property="Height" Value="23"></Setter>
<Setter Property="Margin" Value="3,3,0,0"></Setter>
<Setter Property="CornerRadius" Value="0,0,4,4"></Setter>
<Setter Property="BorderBrush" Value="Black"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
</Style>
<!--border2样式-->
<Style x:Key="border2style" TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="0,0,4,4"></Setter>
<Setter Property="Width" Value="38"></Setter>
<Setter Property="Height" Value="23"></Setter>
<Setter Property="Background" Value="#E3E3E3"></Setter>

</Style>

<Border Style="{StaticResource border1style}">
<Grid>
<Border Name="myBorder2" Style="{StaticResource border2style}" />
<Image Source="{Binding img2}" Width="37" Height="23" Stretch="Fill">
<Image.OpacityMask>
<VisualBrush Visual="{Binding ElementName=myBorder2}"/>
</Image.OpacityMask>
</Image>
</Grid>
</Border>

 

图：

 

 

自我感觉还是第一中比较简单，中间我有遇到图片不自适应大小的问题，然后我加上这个属性就好了，Stretch="Fill"，这个属性的意思是

填充整个空间，但不保持纵横比。 图像不会被裁剪，但可能会发生拉伸。

小计：

Stretch 状态类似于许多电视机上的图片大小设置。

• None 显示原始大小的内容的原始分辨率。
• Uniform 在保持纵横比和图像内容的同时填充尽可能多的空间。这可能会导致在视频的边缘出现水平和垂直黑色条。这类似于宽屏模式。
• UniformToFill 在保持纵横比的同时填充整个空间。这可能会导致某些图像被裁剪。这类似于全屏模式。
• Fill 填充整个空间，但不保持纵横比。 图像不会被裁剪，但可能会发生拉伸。这类似于拉伸模式。