Question

如何绘制这样的视图。

经过研究，我可以使用context.fillRects方法。但是如何找到确切的信息。

let context = UIGraphicsGetCurrentContext()
context?.setFillColor(UIColor.red.cgColor)
context?.setAlpha(0.5)
context?.fill([<#T##rects: [CGRect]##[CGRect]#>])

如何实现这一结果？

背景：蓝色。

叠加（紫色）：50％不透明度，包含中心的方孔

Answer 1

首先创建视图，然后使用两个UIBezierPaths绘制所有内容：一个描述内部rect（孔），另一个沿屏幕边框（externalPath）运行。这种绘图方式可确保中间的蓝色矩形是真正的洞，而不是在紫色视图的顶部绘制。

let holeWidth: CGFloat = 200

let hollowedView = UIView(frame: view.frame)
hollowedView.backgroundColor = UIColor.clear

//Initialise the layer
let hollowedLayer = CAShapeLayer()

//Draw your two paths and append one to the other
let holePath = UIBezierPath(rect: CGRect(origin: CGPoint(x: (view.frame.width - holeWidth) / 2, y: (view.frame.height - holeWidth) / 2), size: CGSize(width: holeWidth, height: holeWidth)))
let externalPath = UIBezierPath(rect: hollowedView.frame).reversing()
holePath.append(externalPath)
holePath.usesEvenOddFillRule = true

//Assign your path to the path property of your layer
hollowedLayer.path = holePath.cgPath
hollowedLayer.fillColor = UIColor.purple.cgColor
hollowedLayer.opacity = 0.5


//Add your hollowedLayer to the layer of your hollowedView
hollowedView.layer.addSublayer(hollowedLayer)

view.addSubview(hollowedView)

结果如下：

Answer 2

创建一个背景色为蓝色的自定义UIView。

class CustomView: UIView {

// Try adding a rect and fill color.

    override func draw(_ rect: CGRect) {

       let ctx = UIGraphicsGetCurrentContext()
       ctx!.beginPath()

       //Choose the size based on the size required.
       ctx?.addRect(CGRect(x: 20, y: 20, width: rect.maxX - 40, height: rect.maxY - 40))

       ctx!.closePath()
       ctx?.setFillColor(UIColor.red.cgColor)
       ctx!.fillPath()

    }
 }

Answer 3

我刚刚结束了这个。

代码：

createHoleOnView()
let blurView = createBlurEffect(style: style)
self.addSubview(blurView)

方法创建孔：

private func createHoleOnView() {

        let maskView = UIView(frame: self.frame)
        maskView.clipsToBounds = true;
        maskView.backgroundColor = UIColor.clear

        func holeRect() -> CGRect {
            var holeRect = CGRect(x: 0, y: 0, width: scanViewSize.rawValue.width, height: scanViewSize.rawValue.height)
            let midX = holeRect.midX
            let midY = holeRect.midY
            holeRect.origin.x = maskView.frame.midX - midX
            holeRect.origin.y = maskView.frame.midY - midY
            self.holeRect = holeRect
            return holeRect
        }

        let outerbezierPath = UIBezierPath.init(roundedRect: self.bounds, cornerRadius: 0)

        let holePath = UIBezierPath(roundedRect: holeRect(), cornerRadius: holeCornerRadius)
        outerbezierPath.append(holePath)
        outerbezierPath.usesEvenOddFillRule = true

        let hollowedLayer = CAShapeLayer()
        hollowedLayer.fillRule = kCAFillRuleEvenOdd
        hollowedLayer.fillColor = outerColor.cgColor
        hollowedLayer.path = outerbezierPath.cgPath

        if self.holeStyle == .none {
            hollowedLayer.opacity = 0.8
        }
        maskView.layer.addSublayer(hollowedLayer)

        switch self.holeStyle {
        case .none:
            self.addSubview(maskView)
            break

        case .blur(_):
            self.mask = maskView;
            break
        }
    }

UIView的创建模糊扩展功能：

internal func createBlurEffect(style: UIBlurEffectStyle = .extraLight) -> UIView {
    let blurEffect = UIBlurEffect(style: style)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = self.bounds
    return blurEffectView
}

自定义视图绘图 - 视图内的孔

3 个答案: