Swift - 如何创建一个在其中裁剪的形状的视图

Question

我正在尝试使用swift 1.2和xcode 6来实现图像中显示的结果.

基本上我想创建一个切入形状的视图,以便能够看到下面的视图,为我的应用程序制作教程.我知道如何创建一个圆形,但我不知道如何在视图中剪切它.我需要一个完整的例子来说明如何做到这一点.提前致谢

Answer 1

即使有答案,我想分享我的方式:

// Let's say that you have an outlet to the image view called imageView
// Create the white view 
let whiteView = UIView(frame: imageView.bounds) 
let maskLayer = CAShapeLayer() //create the mask layer

// Set the radius to 1/3 of the screen width
let radius : CGFloat = imageView.bounds.width/3 

// Create a path with the rectangle in it.
let path = UIBezierPath(rect: imageView.bounds)
// Put a circle path in the middle
path.addArcWithCenter(imageView.center, radius: radius, startAngle: 0.0, endAngle: CGFloat(2*M_PI), clockwise: true)

// Give the mask layer the path you just draw
maskLayer.path = path.CGPath
// Fill rule set to exclude intersected paths
maskLayer.fillRule = kCAFillRuleEvenOdd

// By now the mask is a rectangle with a circle cut out of it. Set the mask to the view and clip.
whiteView.layer.mask = maskLayer
whiteView.clipsToBounds = true

whiteView.alpha = 0.8
whiteView.backgroundColor = UIColor.whiteColor()

//If you are in a VC add to the VC's view (over the image)
view.addSubview(whiteView)    
// Annnnnd you're done.

Answer 2

    //assume you create a UIImageView and content image before execute this code
  let sampleMask = UIView()
    sampleMask.frame = self.view.frame
    sampleMask.backgroundColor =  UIColor.black.withAlphaComponent(0.6)
    //assume you work in UIViewcontroller
    self.view.addSubview(sampleMask)
    let maskLayer = CALayer()
    maskLayer.frame = sampleMask.bounds
    let circleLayer = CAShapeLayer()
    //assume the circle's radius is 150
    circleLayer.frame = CGRect(x:0 , y:0,width: sampleMask.frame.size.width,height: sampleMask.frame.size.height)
    let finalPath = UIBezierPath(roundedRect: CGRect(x:0 , y:0,width: sampleMask.frame.size.width,height: sampleMask.frame.size.height), cornerRadius: 0)
    let circlePath = UIBezierPath(ovalIn: CGRect(x:sampleMask.center.x - 150, y:sampleMask.center.y - 150, width: 300, height: 300))
    finalPath.append(circlePath.reversing())
    circleLayer.path = finalPath.cgPath
    circleLayer.borderColor = UIColor.white.withAlphaComponent(1).cgColor
     circleLayer.borderWidth = 1
    maskLayer.addSublayer(circleLayer)

    sampleMask.layer.mask = maskLayer

Answer 3

以下是有关如何为UIView制作圆形蒙版的示例代码：

let sampleView = UIView(frame: UIScreen.mainScreen().bounds)
let maskLayer = CALayer()
maskLayer.frame = sampleView.bounds
let circleLayer = CAShapeLayer()
//assume the circle's radius is 100
circleLayer.frame = CGRectMake(sampleView.center.x - 100, sampleView.center.y - 100, 200, 200)
let circlePath = UIBezierPath(ovalInRect: CGRectMake(0, 0, 200, 200))
circleLayer.path = circlePath.CGPath
circleLayer.fillColor = UIColor.blackColor().CGColor
maskLayer.addSublayer(circleLayer)

sampleView.layer.mask = maskLayer

这是我在操场上做的：

Answer 4

最简单的方法是创建一个 png 图像，外部周围有部分透明的白色，中间有一个清晰的圆圈。然后将 2 个图像视图堆叠在一起，将遮罩图像放在顶部，并将其“不透明”标志设置为 false。

您还可以通过创建一个 CAShapeLayer 并将其设置为使用半透明白色来完成此操作，然后安装一个形状，该形状是正方形，并从其形状中切出孔。您可以将该形状图层安装在图像视图图层的顶部。

最通用的方法是创建 UIImageView 的自定义子类，并让子类的 init 方法创建并安装形状层。我昨天刚刚创建了一个要点，说明了创建 UIImageView 的自定义子类。这是链接：ImageViewWithGradient要点

这个要点创建了一个渐变层。调整它来创建形状图层将是一件简单的事情，如果您修改了layoutSubviews方法，您可以使其在图像视图调整大小时调整视图和路径。

编辑：

好的，我采取了额外的步骤创建一个创建裁剪图像视图的游乐场。你可以在 github 上的 ImageViewWithMask找到它

我的游乐场的最终图像如下所示：