iOS 方向光晕答案

【问题标题】：iOS Direction GlowiOS 方向光晕
【发布时间】：2013-05-27 05:24:36
【问题描述】：

我正在尝试创建一个“迷你地图”。这是一个充满标记的圆圈，我希望圆圈的边界在某些地方发光，以向用户表明在给定方向上更多的标记超出了小地图。

我可以通过在其下方绘制一个半径稍大的蓝色圆圈来给圆圈添加一个“发光”的蓝色边框。我认为我可以通过给它的 CALayer 一个蒙版来使这个蓝色边框在某些地方比其他地方更亮。（我试过给它一个渐变蒙版，效果很好。）

假设我可以进行正确的计算来确定给定像素的亮度（给定小地图视口之外的标记位置），我该如何设置 CALayer 的各个像素？或者除了对圆圈中的每个像素进行复杂的 alpha 值计算之外，还有更简单的方法来完成我正在寻找的东西吗？

谢谢。

【问题讨论】：

很难（对我来说，无论如何）想象你所追求的效果。能否添加截图或截图链接？
我尝试了我的圈子答案（现已删除），但它有点垃圾。下一个猜测是在主地图圆圈的外部添加带有阴影的 cashapelayer 圆圈。你有进步吗？

标签： ios calayer quartz-graphics

【解决方案1】：

这是我的解决方案。我画了一系列 1 像素的弧线，每个弧线都有不同的描边颜色。

void AddGlowArc(CGContextRef context, CGFloat x, CGFloat y, CGFloat radius, CGFloat peakAngle, CGFloat sideAngle, CGColorRef colorRef){
    CGFloat increment = .05;
    for (CGFloat angle = peakAngle - sideAngle; angle < peakAngle + sideAngle; angle+=increment){
        CGFloat alpha = (sideAngle - fabs(angle - peakAngle)) / sideAngle;
        CGColorRef newColor = CGColorCreateCopyWithAlpha(colorRef, alpha);
        CGContextSetStrokeColorWithColor(context, newColor);
        CGContextAddArc(context, x, y, radius, angle, angle + increment, 0);
        CGContextStrokePath(context);
    }
}

然后，在 DrawRect 中，

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
AddGlowArc(context, 160, 160, 160, angle, .2, [UIColor colorWithRed:0 green:.76 blue:.87 alpha:1].CGColor);

【讨论】：

【解决方案2】：

这是我的 [更长] 解决方案，如果需要，可以单独添加每个发光点图层并为其设置动画。将小圆圈添加到较大圆圈的圆周上，然后旋转较大的圆圈。即使您回答了问题，我也很高兴能理解这一点

- (void)viewDidLoad
{
    [super viewDidLoad];
    CGPoint circleCenter = CGPointMake(300.f, 300.f);
    CALayer *outerCircle = [self outerCircleToRotateWithCenter:circleCenter andRadius:100.f];
    [self.view.layer addSublayer:outerCircle];

    CGFloat rotationAngleInDeg = 270.f;
    CGFloat rotationAngle = (M_PI * -rotationAngleInDeg)/180.f;

    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DRotate(transform, rotationAngle, 0.f, 0.f, -1.f);
    [outerCircle setTransform:transform];
}

使用方法：

- (CALayer *)outerCircleToRotateWithCenter:(CGPoint)circleCenter andRadius:(CGFloat )radius {
    // outer circle
    CAShapeLayer *container = [CAShapeLayer layer];
    UIBezierPath *containerCircle = [UIBezierPath
                            bezierPathWithOvalInRect:CGRectMake(0.f, 0.f, radius, radius)];
    [container setPath:containerCircle.CGPath];
    [container setBounds:CGPathGetBoundingBox(containerCircle.CGPath)];
    [container setPosition:circleCenter];
    [container setAnchorPoint:CGPointMake(0.5f, 0.5f)];
    [container setStrokeColor:[UIColor blackColor].CGColor]; // REMOVE
    [container setFillColor:nil];

    // smaller circle
    CAShapeLayer *circle = [[CAShapeLayer alloc] init];
    [container addSublayer:circle];
    UIBezierPath *circlePath = [UIBezierPath
                            bezierPathWithOvalInRect:CGRectMake(0.f, 0.f, 25.f, 25.f)];
    [circle setPath:circlePath.CGPath];
    [circle setBounds:CGPathGetBoundingBox(circlePath.CGPath)];
    [circle setFillColor:[UIColor orangeColor].CGColor];
    [circle setAnchorPoint:CGPointMake(0.5f, 0.5f)];
    [circle setPosition:CGPointMake(radius/2.f, 0.f)];
    [circle setOpacity:0.4f];

    // shadow
    [circle setShadowOpacity:0.8f];
    [circle setShadowRadius:4.f];
    [circle setShadowOffset:CGSizeMake(0.f, 0.f)];
    [circle setShadowColor:[UIColor orangeColor].CGColor];
    [circle setShadowPath:circlePath.CGPath];

    return container;
}

我猜较小的圆圈可以在单个变换中添加和旋转，而不是作为子图层。

【讨论】：