柚子快報邀請碼778899分享：Swift?UI的基礎(chǔ)控件Ⅲ

http://yzkb.51969.com/

下面是為圖像視圖添加邊框，透明度和陰影等視覺效果

var?body:some?View

{

VStack{

Image("couple")//通過指定的名稱，加載項目中的一張圖片，圖片是提前添加的

.border(Color.orange)//給圖像視圖添加一個橙色的邊框，邊框的寬度為默認(rèn)值1

Image("couple")

.border(Color.orange,width:10)//添加另一個圖像視圖，并設(shè)置邊框的寬度為10

Image("couple")

.opacity(0.5)//設(shè)置圖像視圖的透明度為0.5，也就是半透明的狀態(tài)

.shadow(radius:10)//為圖像添加一個半徑為10的陰影

.shadow(color:.purple,radius:20,x:20,y:20)//添加一個紫色陰影半徑為10，并在水平和垂直方向上各偏移20的距離

}

}

使用圖像視圖的色彩調(diào)整功能，swiftUI提供了大量的圖像特效，可以使用戶不需要借助專業(yè)的圖像處理軟件，也可以給圖像添加豐富多彩的夢幻效果，

var?body:some?View

{

VStack{

Image("couple")

Image("couple")

.blur(radius:CGFloat(2))//添加了模糊效果模糊半徑為2

.blur(radius:CGFloat(2),opaque:true)//圖片素材是包含透明度的所以可以設(shè)置opaque屬性為真從而為透明像素應(yīng)用模糊效果

.brightness(0.2)//設(shè)置亮度為0.5參數(shù)值的范圍是0~1逐漸變亮

.colorInvert()//對圖像的顏色進(jìn)行反轉(zhuǎn)，也就是黑白色，黃紫，橙藍(lán)這些互補(bǔ)色進(jìn)行轉(zhuǎn)換

.colorMultiply(Color.yellow)//為圖像視圖添加顏色乘法效果，結(jié)果色總是較暗的顏色，變化的幅度較為均勻，任何顏色與黑色相乘產(chǎn)生黑色，與白色相乘保持不變

.contrast(1.5)//提高當(dāng)前圖像對比度，并設(shè)置對比度參數(shù)的值為1.5，如果參數(shù)值為負(fù)，則除了應(yīng)用對比度之外還會反轉(zhuǎn)圖像的顏色

.hueRotation(Angle.degrees(180))//給繪制圖像視圖應(yīng)用色調(diào)旋轉(zhuǎn)效果，色相旋轉(zhuǎn)效果會根據(jù)您指定的角度移動視圖中所有的顏色

.saturation(20)//增加顏色的飽和度。參數(shù)大于一時增加顏色的飽和度，參數(shù)值為1時飽和度與原色相同，參數(shù)為0時會清除圖像里的彩色信息，僅包含灰度信息

.grayscale(0.9)//給圖像應(yīng)用灰度效果，可以降低色彩的飽和度，參數(shù)為0時不變，為1時會清除圖像的彩色信息

.luminanceToAlpha//給圖像的半透明效果添加亮度在視圖外創(chuàng)建一個半透明的蒙版視圖中的暗區(qū)變透明亮區(qū)變不透明的黑色中等亮度變?yōu)榛疑?/p>

}

}

兩個圖像視圖之間的色彩混合效果

var?body:some?View

{

VStack

{

Image("picture")

.bendMode(.difference)//差值混合模式查看每個通道中的顏色信息，并從基色中減去混合色，或從混合色中減去基色，與白色混合將反轉(zhuǎn)基色的值，與黑色混合則不會發(fā)生變化

ZStack{

Image("Texture")//由于圖片和背景顏色也就是和白色按照差值模式進(jìn)行混合，所以圖片顏色發(fā)生反轉(zhuǎn)共有21種顏色混合模式，您可以逐一嘗試不同混合模式的效果

Image("picture")

.blendMode(.difference.multiply)

}

.

}

}

給圖像視圖添加遮罩以突出主題

var?body:some?View

{

VStack{

Image("picture")

.clipShape(Circle())//通過調(diào)用裁剪圖形方法，給圖像應(yīng)用遮罩效果，遮罩圖形為圓形，此時從右側(cè)的預(yù)覽窗口可以看出，圖片已經(jīng)被裁剪成圓形效果

Image("picture")

.mask(Circle())//通過調(diào)用遮罩方法給圖像應(yīng)用遮罩效果，遮罩圖形為圓形

Image("picture")

.resizable()

.frame(width:300,height:300)//設(shè)置他的寬高為300

.mask(

Text("SWIFT?UI!").font(Font.system(size:64).bold())

//添加最后給它添加一個指定內(nèi)容的文字遮罩，文字尺寸為64，并具有加粗的效果，相當(dāng)于在圖片上裁剪出文字

)

}

}

下面是圖像視圖的縮放和旋轉(zhuǎn)，當(dāng)前項目已經(jīng)擁有一個圖像視圖

VStack{

Image("couple")

.scaleEffect(0.8)//添加一個一個圖像視圖，并將它縮小為原來的0.8倍

.scaleEffect(CGSize(width:1.2,height:0.5))//對圖像視圖的寬度和高度應(yīng)用不同的縮放比例，在此將圖像視圖的寬度放大為原來的1.2倍同時將圖像視圖的高度縮小為原來的0.5倍

.scaleEffect(CGSize(width:1.2,height:0.5)，anchor：UnitPoint.bottomLeading)//在默認(rèn)情況下，圖像視圖的縮放瞄點位于圖像的中心位置，此時是將縮放瞄點修改為左下角

.rotationEffect(Angle.init(degrees:90)//給圖像視圖應(yīng)用旋轉(zhuǎn)效果，并設(shè)置旋轉(zhuǎn)的角度為90度

anchor:Unitpoint.init(x;0,y:0)//圖像視圖的瞄點默認(rèn)位于圖像的中心位置，該操作將瞄點修改為左上角

)

.rotation3DEffect(Angle,init(degrees:45,

axis:(x:CGFloat(1),y:CGFloat(0),z:CGFloat(0)))//可以在三個軸上進(jìn)行旋轉(zhuǎn)操作，其中x軸是水平方向，這里設(shè)置圖像沿水平方向旋轉(zhuǎn)45度

}

最后是下載并使用圖像視圖顯示網(wǎng)絡(luò)圖片，首先添加一個圖像視圖，加載占位符圖片

@State?private?var?remoteImage:UIImage?=nil//添加一個UIImage類型屬性，該屬性擁有@State屬性包裝器，當(dāng)該屬性的值發(fā)生變化時和該屬性綁定的圖像視圖，將立即顯示新的圖像內(nèi)容

let?placeholderOne=UIImage(named:"PlaceholderPicture")//添加一個常量屬性作為占位符圖片

var?body:some?View

{

//Image("PlaceholderPicture")

Image(uiImage:self.remoteImage????placeholderOne!)//然后修改此處的圖像視圖所顯示的內(nèi)容，如果網(wǎng)絡(luò)圖片屬性的值不為空，則顯示下載后的網(wǎng)絡(luò)圖片，否則顯示占位符圖片

.onAppear(perform:fetchRemoteImage)//執(zhí)行該方法，這樣當(dāng)圖片顯示后，將立即執(zhí)行下載網(wǎng)絡(luò)圖片的方法，因為圖片網(wǎng)址不是https安全路徑所以還要修改屬性配置文件

}

func?fetchRemoteImage()//添加一個方法，用來下載互聯(lián)網(wǎng)上的圖片

{

guard?let?url=URL(string://初始化一個字符串常量，作為網(wǎng)絡(luò)圖片的地址

"http://hdjc8.com/images/logo.png")else{return}

URLSession.shared.dataTask(with:url)//接著執(zhí)行URLSession單例對象的數(shù)據(jù)任務(wù)方法，以下載指定的圖片

{

（data,response,error)in

if?let?image=UIImage(data:data!)//下載成功后，將下載的數(shù)據(jù)轉(zhuǎn)換為圖像，并存儲在remoteImage屬性中

{

self.remoteImage=image

}

else

{

print(error?？？?”“）//如果下載失敗，則在控制臺輸出錯誤信息

}

}

.resume()//接著通過執(zhí)行resume方法，開始下載指定路徑的網(wǎng)絡(luò)圖片

}

柚子快報邀請碼778899分享：Swift?UI的基礎(chǔ)控件Ⅲ

http://yzkb.51969.com/

精彩鏈接