最近UI出了一個(gè)效果圖腿时， 多人圖像展示效果和qq討論組一樣您炉， 循環(huán)且部分重疊的效果。在網(wǎng)上搜了一下友扰，其效果都不理想彤叉， 就自己寫了一個(gè)。
效果圖：
屏幕快照 2018-04-11 11.05.28.png
思路如下：
圖片的邊緣裁剪一個(gè)弧形村怪， 然后旋轉(zhuǎn)相應(yīng)角度秽浇，算出每個(gè)圖標(biāo)的位置， 最后將得到的多個(gè)圖像繪制在一起甚负，得到一張圖像柬焕。
代碼也很簡(jiǎn)單审残， 直接上代碼吧！
import Foundation
import UIKit
struct YQ {
}
extension YQ {
struct CircleImage {
let maxCount = 4
var images: [UIImage]?
var size: CGFloat?
var boardWidth: CGFloat = 3
var boardColor: UIColor = UIColor.white
var crossWidth: CGFloat = 20
var direction: Direction = .clockwise
init(images aImages: [UIImage]?, aSize: CGFloat?) {
images = aImages
size = aSize
}
private func subImageRect(at index: Int) -> CGRect? {
guard let size = size else {
return nil
}
let count = min(images?.count ?? 0, maxCount)
guard count > 0 else {
return nil
}
guard index >= 0 && index < count else {
return nil
}
if count == 1 {
return CGRect.init(origin: CGPoint.zero, size: CGSize.init(width: size, height: size))
} else if count == 2 {
let subSize = size / 2 + crossWidth / 2
let y = (size - subSize) / 2
switch index {
case 0:
return CGRect.init(origin: CGPoint.init(x: 0, y: y), size: CGSize.init(width: subSize, height: subSize))
case 1:
let x = (size - crossWidth) / 2
return CGRect.init(origin: CGPoint.init(x: x, y: y), size: CGSize.init(width: subSize, height: subSize))
default:
break
}
}else if count == 3 {
let subSize = (2 * CGFloat(sqrtf(3)) - 3) * size + (1 / (2 + CGFloat(sqrtf(3)))) * crossWidth * 2
var original = CGPoint.zero
switch index {
case 0:
original = CGPoint.init(x: (size - subSize) / 2, y: 0)
case 1:
original = CGPoint.init(x: (CGFloat(sqrtf(3)) + 2) / 4 * size - (2 + CGFloat(sqrtf(3))) / 2 * subSize / 2, y: 0.75 * size - 1.5 * subSize / 2)
case 2:
original = CGPoint.init(x:(2 - CGFloat(sqrtf(3))) / 4 * size + (CGFloat(sqrtf(3)) - 2) / 2 * subSize / 2 , y: 0.75 * size - 1.5 * subSize / 2)
default:
return nil
}
return CGRect.init(origin: original, size: CGSize.init(width: subSize, height: subSize))
}else if count == 4 {
let subSize = size / 2 + crossWidth / 2
let behindO = (size - crossWidth) / 2
switch index {
case 0:
return CGRect.init(x: 0, y: 0, width: subSize, height: subSize)
case 1:
return CGRect.init(x: behindO, y: 0, width: subSize, height: subSize)
case 2:
return CGRect.init(x: behindO, y: behindO, width: subSize, height: subSize)
case 3:
return CGRect.init(x: 0, y: behindO, width: subSize, height: subSize)
default:
break
}
}
return nil
}
private func subImageAngleClockwise(at index: Int) -> SubAngle?{
guard let rect = subImageRect(at: index) else {
return nil
}
let angle = acos(1 - crossWidth / rect.width)
let start = -angle
let end = angle
let count = min(images!.count, maxCount)
if count == 1 {
return SubAngle.init(start: 0, end: CGFloat.pi * 2, rotate: 0)
} else if count == 2 {
switch index {
case 0:
return SubAngle.init(start: 0, end: CGFloat.pi * 2, rotate: 0)
case 1:
return SubAngle.init(start: start, end: end, rotate: CGFloat.pi)
default:
break
}
} else if count == 3 {
var rote: CGFloat = 0
switch index {
case 0:
rote = -CGFloat.pi * 2 / 3
case 1:
rote = CGFloat.pi * 2 / 3
case 2:
rote = 0
default:
return nil
}
return SubAngle.init(start: start, end: end, rotate: rote)
} else if count == 4 {
var rote: CGFloat = 0
switch index {
case 0:
rote = -CGFloat.pi / 2
case 1:
rote = CGFloat.pi
case 2:
rote = CGFloat.pi / 2
case 3:
rote = 0
default:
return nil
}
return SubAngle.init(start: start, end: end, rotate: rote)
}
return nil
}
private func subImageAngleClockwise(at index: Int, direction: Direction) -> SubAngle? {
if direction == .clockwise {
return subImageAngleClockwise(at: index)
}
// 暫時(shí)只支持順時(shí)針
return nil
}
fileprivate func subImage(at index: Int) -> UIImage? {
guard let rect = subImageRect(at: index) else {
return nil
}
guard let angle = subImageAngleClockwise(at: index, direction: direction) else {
return nil
}
let size = rect.height
let radius = size / 2
UIGraphicsBeginImageContextWithOptions(rect.size, false, 1)
let context = UIGraphicsGetCurrentContext()
context?.saveGState()
context?.translateBy(x: radius, y: radius)
context?.rotate(by: -angle.rotate)
context?.addArc(center: CGPoint.init(x: 0, y: 0), radius: radius, startAngle: angle.start, endAngle: angle.end, clockwise: true)
if angle.start != 0 {
context?.addArc(center: CGPoint.init(x: size * 2 - crossWidth - radius * 2, y: 0), radius: radius, startAngle: angle.start + CGFloat.pi, endAngle: angle.end + CGFloat.pi, clockwise: false)
}
context?.clip()
context?.rotate(by: angle.rotate)
let image = images![index]
image.draw(in: CGRect.init(origin: CGPoint.init(x: -radius, y: -radius), size: rect.size))
context?.rotate(by: -angle.rotate)
context?.addArc(center: CGPoint.init(x: 0, y: 0), radius: radius - boardWidth / 2, startAngle: angle.start, endAngle: angle.end, clockwise: true)
if angle.start != 0 {
context?.addArc(center: CGPoint.init(x: size * 2 - crossWidth - radius * 2, y: 0), radius: radius - boardWidth / 2, startAngle: angle.start + CGFloat.pi, endAngle: angle.end + CGFloat.pi, clockwise: false)
}
context?.setStrokeColor(boardColor.cgColor)
context?.setLineWidth(boardWidth)
context?.strokePath()
context?.restoreGState()
let resultImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return resultImage
}
var circleImage: UIImage?{
guard let images = images, !images.isEmpty else {
return nil
}
guard let size = size, size != 0 else {
return nil
}
UIGraphicsBeginImageContextWithOptions(CGSize.init(width: size, height: size), false, 1)
for index in 0...min(maxCount, images.count) {
let image = subImage(at: index)
image?.draw(in: subImageRect(at: index)!)
}
let resultImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return resultImage
}
}
}
extension YQ.CircleImage {
enum Direction {
case clockwise // 順時(shí)針
case anticlockwise // 逆時(shí)針
}
private struct SubAngle {
var start: CGFloat = 0
var end: CGFloat = 0
var rotate: CGFloat = 0
}
}
使用：
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let image = #imageLiteral(resourceName: "img.jpg")
let size: CGFloat = 120
let screenW = UIScreen.main.bounds.width
let space = (screenW - (2 * size)) / 3
var images = [image]
var cirImage = YQ.CircleImage.init(images: images, aSize: size * UIScreen.main.scale)
var imageView = UIImageView.init(frame: CGRect.init(x:space , y: 50, width: size, height: size))
imageView.image = cirImage.circleImage
view.addSubview(imageView)
images.append(image)
cirImage = YQ.CircleImage.init(images: images, aSize: size * UIScreen.main.scale)
imageView = UIImageView.init(frame: CGRect.init(x:space * 2 + size , y: 50, width: size, height: size))
imageView.image = cirImage.circleImage
view.addSubview(imageView)
images.append(image)
cirImage = YQ.CircleImage.init(images: images, aSize: size * UIScreen.main.scale)
imageView = UIImageView.init(frame: CGRect.init(x:space , y: 100 + size, width: size, height: size))
imageView.image = cirImage.circleImage
view.addSubview(imageView)
images.append(image)
cirImage = YQ.CircleImage.init(images: images, aSize: size * UIScreen.main.scale)
imageView = UIImageView.init(frame: CGRect.init(x:space * 2 + size , y: 100 + size, width: size, height: size))
imageView.image = cirImage.circleImage
view.addSubview(imageView)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
如果你不想了解如何實(shí)現(xiàn)的击喂， 拷貝代碼即可使用啦
暫時(shí)只支持4個(gè)頭像维苔， 要支持更多的圖像， 按相同的思路擴(kuò)展即可懂昂！
