SwiftUI开发(三)

  • Image使用
  • 图像效果添加
  • 图像特效
  • 图像色彩混色
  • 图像缩放和选择
  • 下载图像(待完善)


Image使用

首先在上方选择文件,并切换到Assets.xassets;然后查看该文件中有没有图片,没有可以直接拖入一个图片。

swift forEach 倒叙 swiftui transition_swift


swift forEach 倒叙 swiftui transition_swift_02


  添加完成后,选择文件回到ContentView.swift中,在视图中加入VStack,然后加入图片控件,调用刚刚添加的图片,直接使用其名字即可;然后加入一个苹果内置图标,对其进行更改的方式和Text相似。

swift forEach 倒叙 swiftui transition_swift forEach 倒叙_03


.resizable()   调整图片长宽比,以适配其父视图

.aspectRatio(contentMode: .fit)   限制图片指定的长宽比,在不影响本身的长宽比的情况下,适配父视图

图像效果添加

先添加一个透明背景的图片,然后就能对其进行效果添加了

border(Color.purple, width: 5)   给图片添加边框并设置颜色和宽度

.opacity(0.5)   将图片模糊化,范围值在0-1

.shadow(color: .purple, radius: 5 , x:20 , y:-20)

swift forEach 倒叙 swiftui transition_占位符_04


图像特效

.blur(radius: CGFloat(2) , opaque: true)  设置模糊度的半径为2;opaque属性为真,可以给透明像素应用模糊效果。

swift forEach 倒叙 swiftui transition_灰度_05



.brightness(0.5)  设置图像亮度为0.5.区间为0-1。

swift forEach 倒叙 swiftui transition_灰度_06



.colorInvert()  对图像的颜色进行翻转

swift forEach 倒叙 swiftui transition_网络图片_07



.colorMultipy(Color.yellow)&#8n195; 给图像视图添加颜色乘法效果。

swift forEach 倒叙 swiftui transition_swift_08



.contrast(1.5)  提高当前图像的对比度,并设置对比度参数的值为1.5,设置为-1.5可以反转图像的颜色

swift forEach 倒叙 swiftui transition_网络图片_09



.hueRotation(Angle.degrees(100))  给图像视图应用色调旋转效果,旋转360度则和原色一样

swift forEach 倒叙 swiftui transition_占位符_10



.saturation(20)  增加颜色的饱和度,参数为1时,与原色相同,参数为0时,会清除图像的彩色信息,仅包含灰度信息

swift forEach 倒叙 swiftui transition_灰度_11



.grayscale(0.9)  给图像应用灰度效果。灰度效果可以降低色彩的饱和度。当参数为0时,与原色相同;参数为1时,会清除图像里的彩色信息。

swift forEach 倒叙 swiftui transition_占位符_12



.luminaceToAlpha()   给图像的半透明度添加亮度,它会在视图之外创建一个半透明的蒙版。暗区变为透明,亮区变为不透明的黑色,中等亮度变为部分灰色

swift forEach 倒叙 swiftui transition_swift_13


图像色彩混色

.blendMode(.difference)  差值混合模式查看每个通道中的颜色信息,并从基色中减去混合色或从混合色中减去基色。

 将图像视图放在ZStack视图之类,这样视图就能在垂直的方向上进行排列。将两张图放在ZStack内,使用.blendMode选择multiply(相乘选项),就能将两幅图合在一起。

swift forEach 倒叙 swiftui transition_swift forEach 倒叙_14


图像缩放和选择

.scaleEffect(0.8)   将图像缩小为原来的0.8倍

swift forEach 倒叙 swiftui transition_swift forEach 倒叙_15



.scaleEffect(CGSize(width: 1.2, height: 0.5))  对视图的宽度和高度应用不同的缩放比例,在此将图像宽度放大为1.2倍,高度缩小为0.5倍。

swift forEach 倒叙 swiftui transition_swift forEach 倒叙_16



.scaleEffect(x: 1.2, y: 0.5, anchor: UnitPoint.bottomLeading)   将图像视图的缩放锚点由中心改为左下角

swift forEach 倒叙 swiftui transition_swift_17



.rotationEffect(Angle.init(degrees: 90))  给图像应用旋转效果,并设置旋转的角度为90度。

swift forEach 倒叙 swiftui transition_占位符_18



.rotationEffect(Angle.init(degrees: 30), anchor: UnitPoint.init(x: 0, y: 0))  将图像的旋转锚点由中心变为左上角,并旋转30度。

swift forEach 倒叙 swiftui transition_网络图片_19



.rotation3DEffect(Angle.init(degrees: 30), axis: (x: CGFloat(1), y: CGFloat(0), z: CGFloat(0)))  将图像在三个轴上进行旋转操作,这里是沿着水平方向旋转45度。x、y、z分别设置为1,就能绕着三个轴分别旋转。

swift forEach 倒叙 swiftui transition_占位符_20


下载图像(待完善)

  下载图像之前,我们需要用一张图片当占位符,也就是大家在加载图片显示不出来时,显示的图片。然后先将占位符的图片加载出来。

@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类型,则无需进行此项设置)

swift forEach 倒叙 swiftui transition_swift_21



swift forEach 倒叙 swiftui transition_灰度_22