圆形视图和颜色以及带有动画的 cifilter

Question

我正在开发一个应用程序，我需要在用户单击 UIButton 时制作效果。

http://imageshack.com/a/img802/3337/on55.png

当用户单击屏幕截图中心的按钮时，图片上会出现一个带有颜色的光环，该光环正在通过网络请求加载。图片加载了颜色，实际上我在其上应用了一个去除颜色的 cifilter。

如果可能，请向我解释如何使用背景图像重现圆形视图。

谢谢。

Answer 1

所以，我试图解释我的解决方案，我是法国人，我的英语很差：D

为了实现这一点，我使用自定义 drawrect 制作了一个 uiview，PaintCode 确实帮助我做到了这一点，因为我的设计师制作了一些 svg 示例文件，我将它加载到 PaintCode 中以制作 UIBezierPath。像这样。

UIBezierPath* bezier2Path = [UIBezierPath bezierPath];
    [bezier2Path moveToPoint: CGPointMake(160, 228.1)];
    [bezier2Path addCurveToPoint: CGPointMake(148.16, 239.5) controlPoint1: CGPointMake(153.46, 228.1) controlPoint2: CGPointMake(148.16, 233.2)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 250.9) controlPoint1: CGPointMake(148.16, 245.8) controlPoint2: CGPointMake(153.46, 250.9)];
    [bezier2Path addCurveToPoint: CGPointMake(171.84, 239.5) controlPoint1: CGPointMake(166.54, 250.9) controlPoint2: CGPointMake(171.84, 245.8)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 228.1) controlPoint1: CGPointMake(171.84, 233.2) controlPoint2: CGPointMake(166.54, 228.1)];
    [bezier2Path closePath];
    [bezier2Path moveToPoint: CGPointMake(160, 249.51)];
    [bezier2Path addCurveToPoint: CGPointMake(149.62, 239.5) controlPoint1: CGPointMake(154.26, 249.51) controlPoint2: CGPointMake(149.62, 245.03)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 229.49) controlPoint1: CGPointMake(149.62, 233.97) controlPoint2: CGPointMake(154.26, 229.49)];
    [bezier2Path addCurveToPoint: CGPointMake(170.38, 239.5) controlPoint1: CGPointMake(165.74, 229.49) controlPoint2: CGPointMake(170.38, 233.97)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 249.51) controlPoint1: CGPointMake(170.38, 245.03) controlPoint2: CGPointMake(165.74, 249.51)];
    [bezier2Path closePath];
    bezier2Path.miterLimit = 4;

当 uiview 初始化时，我在使用 AFNetworking 从 Internet 下载我的图像时初始化她。我在drawrect中将图像设置在我的视图的背景中，如下所示：

//// General Declarations
CGContextRef context = UIGraphicsGetCurrentContext();


//// Image Declarations
UIImage* bGTest = [UIImage imageNamed:self.image];

//// Calque_2_-_copie
{
    //// Bezier 2 Drawing
    UIBezierPath* bezier2Path = [UIBezierPath bezierPath];
    [bezier2Path moveToPoint: CGPointMake(160, 228.1)];
    [bezier2Path addCurveToPoint: CGPointMake(148.16, 239.5) controlPoint1: CGPointMake(153.46, 228.1) controlPoint2: CGPointMake(148.16, 233.2)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 250.9) controlPoint1: CGPointMake(148.16, 245.8) controlPoint2: CGPointMake(153.46, 250.9)];
    [bezier2Path addCurveToPoint: CGPointMake(171.84, 239.5) controlPoint1: CGPointMake(166.54, 250.9) controlPoint2: CGPointMake(171.84, 245.8)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 228.1) controlPoint1: CGPointMake(171.84, 233.2) controlPoint2: CGPointMake(166.54, 228.1)];
    [bezier2Path closePath];
    [bezier2Path moveToPoint: CGPointMake(160, 249.51)];
    [bezier2Path addCurveToPoint: CGPointMake(149.62, 239.5) controlPoint1: CGPointMake(154.26, 249.51) controlPoint2: CGPointMake(149.62, 245.03)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 229.49) controlPoint1: CGPointMake(149.62, 233.97) controlPoint2: CGPointMake(154.26, 229.49)];
    [bezier2Path addCurveToPoint: CGPointMake(170.38, 239.5) controlPoint1: CGPointMake(165.74, 229.49) controlPoint2: CGPointMake(170.38, 233.97)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 249.51) controlPoint1: CGPointMake(170.38, 245.03) controlPoint2: CGPointMake(165.74, 249.51)];
    [bezier2Path closePath];
    bezier2Path.miterLimit = 4;

    CGContextSaveGState(context);
    [bezier2Path addClip];
    [bGTest drawInRect: CGRectMake(0, 0, bGTest.size.width, bGTest.size.height)];
    CGContextRestoreGState(context);
}

这真的很简单，之后我可以只使用 alpha 组件为我的视图设置动画来制作我的波纹动画。

现在看截图：

http://imageshack.com/a/img839/4613/v2wm.png

感谢您的回复。

Answer 2

我不确定您是否在询问进度圈，但您可以使用图像遮罩来获得所需的任何视图形状。这是进度圈的例子：

创建自定义视图并像这样覆盖drawRect 方法

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetAllowsAntialiasing(context, true);
    CGContextClipToMask(context, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), [UIImage imageNamed:@"circle"]);
    CGContextBeginPath(context);

    UIColor* colour = [UIColor greenColor];
    CGFloat red, green, blue, alpha;
    [colour getRed:&red green:&green blue:&blue alpha:&alpha];
    CGContextSetRGBFillColor(context,red,green,blue,alpha);

    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
    CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 1.5f);
    CGContextMoveToPoint(context, self.frame.size.width / 2,self.frame.size.height / 2);
    CGContextAddArc(context, self.frame.size.width / 2,self.frame.size.height / 2, self.frame.size.width, M_PI_2 , M_PI_2 - 2 * M_PI * (1 - self.progress) , 0);
    CGContextClosePath(context);
    CGContextFillPath(context);
}

self.progress 是从0 到1 的值。

最后一部分代码用于在视图内绘制半径较大的绿色圆弧：

circle 图像是一个环，用户可以用来遮罩弧线（黑色透明背景）：

结合这两者（绘制和蒙版）后，您会得到类似这样的结果（您可以用实心圆圈遮盖您的图像）：

改变circle可以改变线宽。不要忘记为您的自定义视图设置透明背景。

问候