Ios 如何创建内部有透明圆的UIView(在swift中)?
我想创建一个如下所示的视图: 我想我需要的是一个带有某种遮罩的uiview,我可以用UIBezierpath制作一个圆形的遮罩,但是我不能反转它,这样它可以遮罩除圆形以外的所有东西。我需要它是一个视图的遮罩,而不是填充层,因为我要遮罩的视图对它有一个效果。最终目标是将此UIView动画化到现有视图之上,以提供指导Ios 如何创建内部有透明圆的UIView(在swift中)?,ios,swift,uiview,uikit,Ios,Swift,Uiview,Uikit,我想创建一个如下所示的视图: 我想我需要的是一个带有某种遮罩的uiview,我可以用UIBezierpath制作一个圆形的遮罩,但是我不能反转它,这样它可以遮罩除圆形以外的所有东西。我需要它是一个视图的遮罩,而不是填充层,因为我要遮罩的视图对它有一个效果。最终目标是将此UIView动画化到现有视图之上,以提供指导 请注意,我使用的是swift。有什么办法可以这样做吗?如果是,怎么做 您可以使用此功能创建所需内容 func createOverlay(frame : CGRect) { l
请注意,我使用的是swift。有什么办法可以这样做吗?如果是,怎么做 您可以使用此功能创建所需内容
func createOverlay(frame : CGRect)
{
let overlayView = UIView(frame: frame)
overlayView.alpha = 0.6
overlayView.backgroundColor = UIColor.blackColor()
self.view.addSubview(overlayView)
let maskLayer = CAShapeLayer()
// Create a path with the rectangle in it.
var path = CGPathCreateMutable()
let radius : CGFloat = 50.0
let xOffset : CGFloat = 10
let yOffset : CGFloat = 10
CGPathAddArc(path, nil, overlayView.frame.width - radius/2 - xOffset, yOffset, radius, 0.0, 2 * 3.14, false)
CGPathAddRect(path, nil, CGRectMake(0, 0, overlayView.frame.width, overlayView.frame.height))
maskLayer.backgroundColor = UIColor.blackColor().CGColor
maskLayer.path = path;
maskLayer.fillRule = kCAFillRuleEvenOdd
// Release the path since it's not covered by ARC.
overlayView.layer.mask = maskLayer
overlayView.clipsToBounds = true
}
调整
radius
和xOffset
和yOffset
以更改圆的半径和位置。对于Swift 3,以下是rakeshbs的答案格式,以便返回所需的UIView:
func createOverlay(frame : CGRect, xOffset: CGFloat, yOffset: CGFloat, radius: CGFloat) -> UIView
{
let overlayView = UIView(frame: frame)
overlayView.alpha = 0.6
overlayView.backgroundColor = UIColor.black
// Create a path with the rectangle in it.
let path = CGMutablePath()
path.addArc(center: CGPoint(x: xOffset, y: yOffset), radius: radius, startAngle: 0.0, endAngle: 2 * 3.14, clockwise: false)
path.addRect(CGRect(x: 0, y: 0, width: overlayView.frame.width, height: overlayView.frame.height))
let maskLayer = CAShapeLayer()
maskLayer.backgroundColor = UIColor.black.cgColor
maskLayer.path = path;
maskLayer.fillRule = kCAFillRuleEvenOdd
// Release the path since it's not covered by ARC.
overlayView.layer.mask = maskLayer
overlayView.clipsToBounds = true
return overlayView
}
再次更新Swift 4并删除了一些项目,以使代码更紧凑 请注意,Swift 4和Swift 4.2的设置不同。
func createOverlay(frame: CGRect,
xOffset: CGFloat,
yOffset: CGFloat,
radius: CGFloat) -> UIView {
// Step 1
let overlayView = UIView(frame: frame)
overlayView.backgroundColor = UIColor.black.withAlphaComponent(0.6)
// Step 2
let path = CGMutablePath()
path.addArc(center: CGPoint(x: xOffset, y: yOffset),
radius: radius,
startAngle: 0.0,
endAngle: 2.0 * .pi,
clockwise: false)
path.addRect(CGRect(origin: .zero, size: overlayView.frame.size))
// Step 3
let maskLayer = CAShapeLayer()
maskLayer.backgroundColor = UIColor.black.cgColor
maskLayer.path = path
// For Swift 4.0
maskLayer.fillRule = kCAFillRuleEvenOdd
// For Swift 4.2
maskLayer.fillRule = .evenOdd
// Step 4
overlayView.layer.mask = maskLayer
overlayView.clipsToBounds = true
return overlayView
}
对正在发生的事情的粗略分类:
下面的代码片段将调用这个,并在屏幕中间放置一个半径为50:
的圆。let overlay = createOverlay(frame: view.frame,
xOffset: view.frame.midX,
yOffset: view.frame.midY,
radius: 50.0)
view.addSubview(overlay)
看起来是这样的:
上述解决方案非常有效 假设您正在寻找矩形区域的遮罩,下面是代码片段
let fWidth = self.frame.size.width
let fHeight = self.frame.size.height
let squareWidth = fWidth/2
let topLeft = CGPoint(x: fWidth/2-squareWidth/2, y: fHeight/2-squareWidth/2)
let topRight = CGPoint(x: fWidth/2+squareWidth/2, y: fHeight/2-squareWidth/2)
let bottomLeft = CGPoint(x: fWidth/2-squareWidth/2, y: fHeight/2+squareWidth/2)
let bottomRight = CGPoint(x: fWidth/2+squareWidth/2, y: fHeight/2+squareWidth/2)
let cornerWidth = squareWidth/4
// Step 2
let path = CGMutablePath()
path.addRoundedRect(in: CGRect(x: topLeft.x, y: topLeft.y,
width: topRight.x - topLeft.x, height: bottomLeft.y - topLeft.y),
cornerWidth: 20, cornerHeight: 20)
path.addRect(CGRect(origin: .zero, size: self.frame.size))
// Step 3
let maskLayer = CAShapeLayer()
maskLayer.backgroundColor = UIColor.clear.cgColor
maskLayer.path = path
// For Swift 4.0
maskLayer.fillRule = kCAFillRuleEvenOdd
// For Swift 4.2
//maskLayer.fillRule = .evenOdd
// Step 4
self.layer.mask = maskLayer
self.clipsToBounds = true
看起来像是Hi Rakesh的复制品!你的解决方案很有帮助。我有一个小小的疑问。我有一个按钮在这个遮罩的黑色视图下面。我在按钮上做了一个透明的矩形,就像上面的解决方案中的u一样。但由于黑色视图位于顶部,我无法点击按钮。有什么方法可以让我点击按钮吗?@Abhishek729-你要确保将图层的isUserInteractionEnabled设置为false来点击它。谢谢你的swift 3翻译!!很有帮助