【问题标题】:Invert a radial gradient mask in core graphics在核心图形中反转径向渐变蒙版
【发布时间】:2013-07-04 22:29:19
【问题描述】:

我可以使用核心图形在 iOS 中用黑色/白色径向渐变遮盖图片。但我得到的结果与我想要的相反。我希望图片从应用渐变的区域透明,并应显示图片的剩余部分。这意味着图片中的“![hole] [1]”。但这里的洞将由渐变蒙版创建。

谁能给我一些方法或任何提示来反转径向渐变蒙版,就像我们在 Photoshop 中所做的那样。

【问题讨论】:

  • 您的渐变代码中应该有一组颜色组件。这可能听起来很傻,但是切换颜色会有帮助吗?或者您想在任何情况下反转颜色?
  • @architectpianist 不,我尝试切换颜色,但效果不佳。

标签: ios core-graphics gradient masking


【解决方案1】:

我认为最好的方法是插入图层,而不是使用蒙版。这就是我为我的 IOS 应用所做的。

- (void) addSublayer {
    CGPoint center = CGPointMake(self.addButton.frame.origin.x, self.addButton.frame.origin.y);
    UIBezierPath* clip = [UIBezierPath bezierPathWithArcCenter:center
                                                    radius:CGRectGetMaxX(self.addUnavailabilitySubView.frame) - self.addButton.center.x
                                                startAngle:-1.57
                                                  endAngle:1.57
                                                 clockwise:YES];
    [clip addLineToPoint:center];
    [clip closePath];

    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    [shapeLayer setMasksToBounds:YES];
    shapeLayer.frame = self.view.layer.bounds;
    shapeLayer.path = clip.CGPath;

    //This gradient layer can be a customised one
    CALayer *gradientLayer = [CALayer layer];
    gradientLayer.frame = CGRectMake(0, 0, self.view.bounds.size.height, self.view.bounds.size.width);

    [self.view.layer insertSublayer:gradientLayer atIndex:0];
}

我也可以在这里分享我的径向渐变层 :)

-(void)drawInContext:(CGContextRef)ctx {
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0, 1.0 }; // End color

    CGFloat components[8] = {0.f, 0.f, 0.f, 0.3f, 0.f, 0.f, 0.f, 0.8f};

    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, num_locations);

    CGFloat myStartRadius, myEndRadius;

    CGPoint radialCenter = CGPointMake(100, 100)
    myStartRadius = 20;
    myEndRadius = 300;
    CGContextDrawRadialGradient (ctx, gradient, radialCenter,
                             myStartRadius, radialCenter, myEndRadius,
                             kCGGradientDrawsAfterEndLocation);
}

【讨论】:

  • 我知道评论晚了,但您提供的解决方案要好得多。谢谢。
猜你喜欢
  • 2014-06-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-06-17
  • 2014-10-12
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多