How to create UIBezierPath gradient fill?

旧城冷巷雨未停 提交于 2019-12-21 02:42:26

问题


I would like to create a UIBezierPath with 10px rounded corners and with gradient fill. How can I acheive this effect?

Here's an image of what I want to do:

As you can see, this square has:

  • 2px black border
  • 10px rounded corners
  • red to green linear gradient fill

How can I do this programatically without using pattern image color?

Here's how I create the path:

UIBezierPath *border = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:10.0f];
[border setLineWidth:2];
[[UIColor blackColor] setStroke];
[border stroke];
[[UIColor redColor] setFill]; <-- what should I put here?
[border fill];

回答1:


3 ways that I can think of.

  1. Create a CAGradientLayer and insert it as a sublayer of theView.layer. You can even put a rounded corner radius on the layer. Of course you'll have to import QuartzCore framework.

  2. Do it with CoreGraphics, like so:

    CGGradientRef gradient;
    CGColorSpaceRef colorspace;
    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0, 1.0 };
    CGFloat components[8] = { 1.0, 0.0, 0.0, 1.0,  // Start color
            0.0, 1.0, 0.0, 1.0 }; // End color
    
    colorspace = CGColorSpaceCreateDeviceRGB();
    gradient = CGGradientCreateWithColorComponents (colorspace, components, locations, num_locations);
    CGContextDrawLinearGradient (ctx, gradient, gradientStartPoint, gradientEndPoint, 0);
    CGGradientRelease(gradient);
    
  3. Create an off-screen image context that's one pixel wide and has a gradient, generate the image, then set the background color with colorWithPatternImage.

These are in order of easiest to hardest.



来源:https://stackoverflow.com/questions/9249921/how-to-create-uibezierpath-gradient-fill

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!