[英]How to make transparent holes in a UIView
I have achieved this thing by using UIBezierPath and CAShapeLayer 我已经通过使用UIBezierPath和CAShapeLayer实现了这一目标
I am taking outlet of view from storyboard.
我正在从情节提要中获取观点。
@IBOutlet weak var myView: UIView!
Create an object of UIBezierPath()
创建一个UIBezierPath()对象
var path = UIBezierPath()
Create a method which take center point of circle as parameter and we create another UIBezierPath() as circlePath which is circle and we append the circle on previous UIBezierPath() path .
创建一个以圆心为参数的方法,并创建另一个UIBezierPath()作为circlePath ,然后将圆附加到先前的UIBezierPath() 路径上 。
Know take a CAShapeLayer and cut the circlePath知道采取CAShapeLayer并切圆
func overLay(points: CGPoint) {
let sizes = CGSize(width: 30, height: 30)
let circlePath = UIBezierPath(ovalIn: CGRect(origin: points, size: sizes))
path.append(circlePath)
let maskLayer = CAShapeLayer() //create the mask layer
maskLayer.path = path.cgPath // Give the mask layer the path you just draw
maskLayer.fillRule = kCAFillRuleEvenOdd // Cut out the intersection part
myView.layer.mask = maskLayer
}
Create updateUI() and call overLay methods with all points.
创建updateUI()并使用所有要点调用overLay方法。
func updateUI() {
path = UIBezierPath(rect: myView.bounds)
let viewFrames = myView.bounds
overLay(points: CGPoint(x: viewFrames.origin.x - 15, y: viewFrames.origin.y - 15))
overLay(points: CGPoint(x: viewFrames.origin.x + viewFrames.width - 15, y: viewFrames.origin.y - 15))
overLay(points: CGPoint(x: viewFrames.origin.x - 15, y: viewFrames.origin.y + viewFrames.height - 15))
overLay(points: CGPoint(x: viewFrames.origin.x + viewFrames.width - 15, y: viewFrames.origin.y + viewFrames.height - 15))
overLay(points: CGPoint(x: viewFrames.origin.x - 15 , y: viewFrames.origin.y + viewFrames.height/2))
overLay(points: CGPoint(x: viewFrames.origin.x + viewFrames.width - 15, y: viewFrames.origin.y + viewFrames.height/2))
}
call updateUI from viewDidLayoutSubviews() method.
从viewDidLayoutSubviews()方法调用updateUI。
override func viewDidLayoutSubviews() {
updateUI()
}
it will create the overlay on view with transparency. 它将在透明的情况下在视图上创建叠加层。
Full code snippet
完整代码段
import UIKit 导入UIKit
class ViewController: UIViewController { 类ViewController:UIViewController {
@IBOutlet weak var myView: UIView!
var path = UIBezierPath()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func overLay(points: CGPoint) {
let sizes = CGSize(width: 30, height: 30)
let circlePath = UIBezierPath(ovalIn: CGRect(origin: points, size: sizes))
path.append(circlePath)
let maskLayer = CAShapeLayer() //create the mask layer
maskLayer.path = path.cgPath // Give the mask layer the path you just draw
maskLayer.fillRule = kCAFillRuleEvenOdd // Cut out the intersection part
myView.layer.mask = maskLayer
}
override func viewDidLayoutSubviews() {
updateUI()
}
func updateUI() {
path = UIBezierPath(rect: myView.bounds)
let viewFrames = myView.bounds
overLay(points: CGPoint(x: viewFrames.origin.x - 15, y: viewFrames.origin.y - 15))
overLay(points: CGPoint(x: viewFrames.origin.x + viewFrames.width - 15, y: viewFrames.origin.y - 15))
overLay(points: CGPoint(x: viewFrames.origin.x - 15, y: viewFrames.origin.y + viewFrames.height - 15))
overLay(points: CGPoint(x: viewFrames.origin.x + viewFrames.width - 15, y: viewFrames.origin.y + viewFrames.height - 15))
overLay(points: CGPoint(x: viewFrames.origin.x - 15 , y: viewFrames.origin.y + viewFrames.height/2))
overLay(points: CGPoint(x: viewFrames.origin.x + viewFrames.width - 15, y: viewFrames.origin.y + viewFrames.height/2))
}
} }
I have created an enum with all the corners where the circle need to be placed. 我创建了一个包含所有需要放置圆的角落的枚举。
enum Corners {
case topLeft
case topRight
case bottomLeft
case bottomRight
case centerLeft
case centerRight
}
I am adding the a circular view programmatically to the viewcontroller's view and setting it's color. 我以编程方式向视图控制器的视图中添加了一个圆形视图,并设置了它的颜色。 Here, I have given white, you can change it to your respective transparent background.
在这里,我给了白色,您可以将其更改为各自的透明背景。
func addCircularViews(toCorners corners: [Corners]) {
for corner in corners {
let circleView = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
circleView.layer.cornerRadius = circleView.frame.width/2
circleView.backgroundColor = UIColor.white
self.view.addSubview(circleView)
setPosition(forCircularView: corner, circleView)
}
}
I am setting the postion of the circle by changing the center of the circular view. 我通过更改圆形视图的中心来设置圆形的位置。
func setPosition(forCircularView corner: Corners,_ circleView: UIView) {
let screenFrame = UIScreen.main.bounds
switch corner {
case .topLeft:
circleView.center = CGPoint(x: screenFrame.origin.x, y: screenFrame.origin.y)
case .topRight:
circleView.center = CGPoint(x: screenFrame.origin.x + screenFrame.width, y: screenFrame.origin.y)
case .bottomLeft:
circleView.center = CGPoint(x: screenFrame.origin.x , y: screenFrame.origin.y + screenFrame.height)
case .bottomRight:
circleView.center = CGPoint(x: screenFrame.origin.x + screenFrame.width , y: screenFrame.origin.y + screenFrame.height)
case .centerLeft:
circleView.center = CGPoint(x: screenFrame.origin.x , y: screenFrame.origin.y + screenFrame.height/2)
case .centerRight:
circleView.center = CGPoint(x: screenFrame.origin.x + screenFrame.width , y: screenFrame.origin.y + screenFrame.height/2)
}
}
You can call the above function where ever required 您可以在需要时调用上述函数
addCircularViews(toCorners: [.topLeft, .topRight, .centerRight, .centerLeft, .bottomLeft, .bottomRight])
As the above is an array, the corners can be set according to requirement. 由于上面是一个数组,可以根据需要设置边角。 Hope it helps!!
希望能帮助到你!!
I have a subclass of UIView
for such tasks. 我有一个用于此类任务的
UIView
子类。 Basically, it uses CAShapeLayer
, created with UIBezierPath
, as a mask for view. 基本上,它使用通过
CAShapeLayer
创建的UIBezierPath
作为视图的遮罩。 You can customize frames and corner radius of holes. 您可以自定义框架和孔的拐角半径。 Here is my code:
这是我的代码:
import UIKit
struct TransparentPart {
var rect: CGRect
var cornerRadius: CGFloat
}
class PartiallyTransparentView: UIView {
var transparentParts: [TransparentPart] = []
override func draw(_ rect: CGRect) {
super.draw(rect)
backgroundColor?.setFill()
UIRectFill(rect)
let clipPath = UIBezierPath(rect: self.bounds)
for part in transparentParts {
let holeRect = part.rect
let radius = part.cornerRadius
let path = UIBezierPath(roundedRect: holeRect, cornerRadius: radius)
clipPath.append(path)
}
let layer = CAShapeLayer()
layer.path = clipPath.cgPath
layer.fillRule = kCAFillRuleEvenOdd
self.layer.mask = layer
self.layer.masksToBounds = true
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.