SwiftUI开发(三)
- Image使用
- 图像效果添加
- 图像特效
- 图像色彩混色
- 图像缩放和选择
- 下载图像(待完善)
Image使用
首先在上方选择文件,并切换到Assets.xassets;然后查看该文件中有没有图片,没有可以直接拖入一个图片。
添加完成后,选择文件回到ContentView.swift中,在视图中加入VStack,然后加入图片控件,调用刚刚添加的图片,直接使用其名字即可;然后加入一个苹果内置图标,对其进行更改的方式和Text相似。
.resizable()
调整图片长宽比,以适配其父视图
.aspectRatio(contentMode: .fit)
限制图片指定的长宽比,在不影响本身的长宽比的情况下,适配父视图
图像效果添加
先添加一个透明背景的图片,然后就能对其进行效果添加了
border(Color.purple, width: 5)
给图片添加边框并设置颜色和宽度
.opacity(0.5)
将图片模糊化,范围值在0-1
.shadow(color: .purple, radius: 5 , x:20 , y:-20)
图像特效
.blur(radius: CGFloat(2) , opaque: true)
设置模糊度的半径为2;opaque属性为真,可以给透明像素应用模糊效果。
.brightness(0.5)
设置图像亮度为0.5.区间为0-1。
.colorInvert()
对图像的颜色进行翻转
.colorMultipy(Color.yellow)
n195; 给图像视图添加颜色乘法效果。
.contrast(1.5)
提高当前图像的对比度,并设置对比度参数的值为1.5,设置为-1.5可以反转图像的颜色
.hueRotation(Angle.degrees(100))
给图像视图应用色调旋转效果,旋转360度则和原色一样
.saturation(20)
增加颜色的饱和度,参数为1时,与原色相同,参数为0时,会清除图像的彩色信息,仅包含灰度信息
.grayscale(0.9)
给图像应用灰度效果。灰度效果可以降低色彩的饱和度。当参数为0时,与原色相同;参数为1时,会清除图像里的彩色信息。
.luminaceToAlpha()
给图像的半透明度添加亮度,它会在视图之外创建一个半透明的蒙版。暗区变为透明,亮区变为不透明的黑色,中等亮度变为部分灰色
图像色彩混色
.blendMode(.difference)
差值混合模式查看每个通道中的颜色信息,并从基色中减去混合色或从混合色中减去基色。
将图像视图放在ZStack视图之类,这样视图就能在垂直的方向上进行排列。将两张图放在ZStack内,使用.blendMode选择multiply(相乘选项),就能将两幅图合在一起。
图像缩放和选择
.scaleEffect(0.8)
将图像缩小为原来的0.8倍
.scaleEffect(CGSize(width: 1.2, height: 0.5))
对视图的宽度和高度应用不同的缩放比例,在此将图像宽度放大为1.2倍,高度缩小为0.5倍。
.scaleEffect(x: 1.2, y: 0.5, anchor: UnitPoint.bottomLeading)
将图像视图的缩放锚点由中心改为左下角
.rotationEffect(Angle.init(degrees: 90))
给图像应用旋转效果,并设置旋转的角度为90度。
.rotationEffect(Angle.init(degrees: 30), anchor: UnitPoint.init(x: 0, y: 0))
将图像的旋转锚点由中心变为左上角,并旋转30度。
.rotation3DEffect(Angle.init(degrees: 30), axis: (x: CGFloat(1), y: CGFloat(0), z: CGFloat(0)))
将图像在三个轴上进行旋转操作,这里是沿着水平方向旋转45度。x、y、z分别设置为1,就能绕着三个轴分别旋转。
下载图像(待完善)
下载图像之前,我们需要用一张图片当占位符,也就是大家在加载图片显示不出来时,显示的图片。然后先将占位符的图片加载出来。
@State private car remoteImage: UIImage? = nil
接着添加一个UIImage类型的属性,该属性拥有@State标记,所以当该属性的值发生变化时,和该属性绑定的图像视图,将立即显示新的图像内容。
let placeholderOne = UIImage(name: "PlaceholderPicture")
添加一个常量属性,并与占位符图片关联
func fetchRemoteImage
添加一个函数方法,用来下载网上的图片(函数具体内容见图)
guard let url = URL(string:"你要下载的图片的地址链接")
初始化一个字符串,用于放置下载图片的URL地址
URLSession.shared.dataTask(with:url)
按照URLSession的单例对象的数据任务方法执行,以下载指定的图片
self.remoteImage = image
将下载好的图片转换为图像,并存储在remoteImage属性中
print(error ?? "")
再写个图片下载失败,输出错误信息的程序
.resume()
然后通过执行resume的方法, 开始下载指定路径的网络图片
Image(uiImage: self.remoteImage ?? placeholderOne!)
修改一开始的图像显示程序;如果网络图片属性的值不为空,则显示下载后的网络图片,否则显示占位符。
还要对配置进行修改,切到info.plist,在空白部分点击右键,选择Add Row,添加一行新的键值对。在新打开的键值对列表中,选择此处的应用程序传输安全设置选项。
在新创建的键值后,有个加号,点击创建子键。选择列表中的Allow Arbitary Loads选项,允许进行非https的网络加载,从而可以正常加载网络图片。(如果图片网址为https类型,则无需进行此项设置)