当一个切割另一个时，两个圆之间的空间

Question

我需要按照以下方式安排两个UIImageView，其中一个在另一个之间切换另一个空格，如下例所示：

我无法使用borderWidth因为我需要围绕绿色圆圈的透明度。我的应用中有一个背景图片视图，因此borderWidth用户会在图片周围看到黑色边框线，或者如果我使用clearColor则看不到任何内容。有什么建议吗？

Answer 1

您可以使用图层蒙版来实现此目的。

Swift 2.3

let mask = CAShapeLayer()
let path = CGPathCreateMutable()

let center = view.convertPoint(statusImageView.center, toView: profileImageView)
let radius = statusImageView.frame.width / 2 + 4

CGPathAddRect(path, nil, profileImageView.bounds)
CGPathAddArc(path, nil, center.x, center.y, radius, 0, CGFloat(2 * M_PI), false)

mask.fillRule = kCAFillRuleEvenOdd
mask.path = path

profileImageView.layer.mask = mask
profileImageView.clipsToBounds = true

Swift 3

let mask = CAShapeLayer()
let path = CGMutablePath()

path.addRect(profileImageView.bounds)
path.addArc(
    center: view.convert(statusImageView.center, to: profileImageView),
    radius: statusImageView.frame.width / 2 + 4,
    startAngle: 0,
    endAngle: CGFloat(2 * M_PI),
    clockwise: false
)

mask.fillRule = kCAFillRuleEvenOdd
mask.path = path

profileImageView.layer.mask = mask
profileImageView.clipsToBounds = true

<强> 更新

class MatchViewController: UIViewController {

    // MARK: Outlets

    @IBOutlet var matchedImageView: UIImageView!
    @IBOutlet var profileImageView: UIImageView!
    @IBOutlet var tickImageView: UIImageView!

    // MARK: Properties

    var innerContainer: UIView! { return profileImageView.superview }
    var outerContainer: UIView! { return innerContainer?.superview }

    // MARK: Lifecycle

    override func preferredStatusBarStyle() -> UIStatusBarStyle { return .LightContent }

    override func viewDidAppear(animated: Bool) {

        super.viewDidAppear(animated)

        let mask = CAShapeLayer(),
            path = CGPathCreateMutable()

        let center = outerContainer.convertPoint(tickImageView.center, toView: innerContainer),
            radius = tickImageView.frame.width / 2 + 4

        CGPathAddRect(path, nil, innerContainer.bounds)
        CGPathAddArc(path, nil, center.x, center.y, radius, 0, CGFloat(2 * M_PI), false)

        mask.fillRule = kCAFillRuleEvenOdd
        mask.path = path

        innerContainer?.layer.mask = mask
        innerContainer?.clipsToBounds = true
    }
}

确保您的观看结构如此。

这应该是结果。 应该。

Answer 2

您可以对图像使用剪裁，也可以使用自定义视图而不是UIImageView。要计算剪切路径，您需要intersection of two circles。