Question

现在我有一个矩形，我在其中调整大小并裁剪图像：

    UIGraphicsBeginImageContextWithOptions((scrollView?.bounds.size)!, true, UIScreen.mainScreen().scale)

    let offset = scrollView?.contentOffset
    CGContextTranslateCTM(UIGraphicsGetCurrentContext(), -(offset?.x)!, -offset!.y)
    scrollView!.layer.renderInContext(UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

对于我的整个控制器，请查看此Pastebin

所以，我的问题是，我怎么能在Instagram上做出像这样：

如何使用圆心添加黑色矩形并继续调整我的图像大小，就像我现在这样做？

Answer 1

创建CALayer的一个子类

以下代码

import UIKit

class GradiantLayer: CALayer {
    func frameSetup() -> CGRect {
        let frameWidth:CGFloat = superlayer!.frame.width
        let frameHeight:CGFloat = superlayer!.frame.height
        let frame = CGRectMake(0, 0, frameWidth, frameHeight)
        return frame
    }

    override func drawInContext(ctx: CGContextRef) {

        let locations :[CGFloat] = [ 0.5, 0.5,1.0 ]
        let colors = [UIColor.clearColor().CGColor,UIColor(red: 0, green: 0, blue: 0, alpha: 0.2).CGColor,UIColor(red: 0, green: 0, blue: 0, alpha: 0.2).CGColor]
        let colorspace : CGColorSpaceRef = CGColorSpaceCreateDeviceRGB()!

        let gradCenter: CGPoint = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2)

        let gradiant2: CGGradientRef = CGGradientCreateWithColors(colorspace, colors as CFArrayRef, locations)!

        CGContextDrawRadialGradient(ctx, gradiant2, gradCenter, 0, gradCenter, self.bounds.size.width, CGGradientDrawingOptions.DrawsAfterEndLocation)

    }

}

现在要添加此外圈，请在viewcontroller的viewDidLoad中使用以下方法

override func viewDidLoad() {
    super.viewDidLoad()
    let gradiant:GradiantLayer = GradiantLayer()
    scrollView?.layer.addSublayer(gradiant)
    gradiant.frame = gradiant.frameSetup()
    gradiant.setNeedsDisplay()
}

Answer 2

请参考以下答案，希望它适合您 Drawing a transparent circle on top of a UIImage - iPhone SDK

实际上，主要想法是创建半透明背景的方形UIView，并在先前创建的方形UIView上绘制具有半径和透明背景的UIView。

Answer 3

您可以使用2x CALayer轻松完成此操作。

在视图中添加CALayer，这是您想要外部蒙版的颜色。您可能需要将此图层放在前面（请参阅此处：docs）

然后在新的CALayer上，将其mask属性设置为CAShapeLayer，并将完整的白色圆圈设为path。

您可以在此处查看如何创建循环CAShapeLayer：https://stackoverflow.com/a/11015144/78496

Answer 4

使用此代码，这将完美无缺。

    let radius : CGFloat = 50;//make it dynamic as per frame of your imageView
    let path = UIBezierPath(roundedRect: CGRectMake(0, 0, 100, 100) , cornerRadius: 0);//make it dynamic as per frame of your imageview
    let circlePath = UIBezierPath(roundedRect: CGRectMake(0, 0, 2.0*radius , 2.0*radius) , cornerRadius: radius)

    path.appendPath(circlePath);
    path.usesEvenOddFillRule = true;

    let fillLayer = CAShapeLayer();
    fillLayer.path = path.CGPath;
    fillLayer.fillRule = kCAFillRuleEvenOdd;
    fillLayer.fillColor = UIColor.blackColor().CGColor;
    fillLayer.opacity = 0.4;
    self.imageView.layer.addSublayer(fillLayer)

如何在Instagram中创建矩形透明圆圈？

4 个答案: