CODEWITHSUNDEEP
iphoneobjective-cioscore-graphicsquartz-graphics
Alex Stone
Alex Stone

Reputation: 47364

iPhone iOS how to create graphics effects like drop shadow, etc? What effects are built-into iOS?

I apologize for a large set of questions here. I'm starting to play with Quartz Graphics more and more, and found that it has interesting effects, yet I do not have many samples to see them in action. 

 view.layer.shadowPath = [UIBezierPath bezierPathWithRect:view.bounds].CGPath;

There's a shadow property:

view.layer.shadowColor = [UIColor grayColor].CGColor;
view.layer.shadowOffset = CGSizeMake(5, 5);
view.layer.shadowPath = [UIBezierPath bezierPathWithRect:view.bounds].CGPath;
view.layer.shadowRadius = 9;

I was unable to make the shadow show though.

Borders:

 view.layer.borderWidth = 1;
   view.layer.borderColor=[[UIColor whiteColor] CGColor];

What other effects can I get from built-in iOS on iPhone? *Is there a comprehensive demo project that can showcase what kind of graphic manipulation functionality is built into iOS?*

How do I do transparency masking?

Is there a way to add inner shadow or inner glow? Is there a way to make an iOS button appear more "concave" than it really is?

Is there a way to do radial gradients? Is there a way to create multi-ray lens flare effects like Adobe Illustrator? Is there a way to blend layers using "lighten, dissolve", or other photoshop effects? Is there a way to dynamically adjust the brightness of the image? I know how to do hue shift.

I would appreciate any other hints on what kind of layer effects I can apply to the CALayers

Upvotes: 8

Views: 10282

Answers (3)

pkluz
pkluz

Reputation: 4881

What an interesting coincidence! I've just recently held a presentation at an iOS Game Design Seminar on CoreGraphics and CoreAnimation and just today I've published some of the documents on Github.

So if you prefer some hands on examples you can check out the repository here: https://github.com/pkluz/PKCoreTechniques

Includes some of the following examples:

  • Color Fill

  • Gradient Fill (Linear and Radial)

  • Simple Paths

  • Bezier Curves

  • Clipping (Standard and Even-Odd)

  • Creating custom-drawn Buttons

  • Simple Translations

  • Translations with Hit-Test Triggers

  • A very primitive 'CoverFlow' with 3D Transformations in CoreAnimation.

.. and some more ;-)

Hope you find what you need, but from what I see it should cover a fair amount of what you've requested.

Note: There's also a PDF that serves as an interactive tutorial.

Upvotes: 12

Templar
Templar

Reputation: 1694

Here is a really good tutorial, it helped me a lot, maybe it'll help you too.

Upvotes: 2

Alex Stone
Alex Stone

Reputation: 47364

Here's my implementation of a radial gradient generation using CIImage. It displays the named image if a gradient was not created. Otherwise it displays a radial gradient. 

+(UIImage*)doRadialGradientFilter:(NSString*)baseImageName 
{

    CIFilter* controlsFilter  = [CIFilter filterWithName: @"CIRadialGradient" keysAndValues:
                   @"inputColor1", [CIColor colorWithRed:0.0 green:0.0
                                                    blue:0.0 alpha:0.0], @"inputColor0", [CIColor colorWithRed:0.0 green:0.0
                                                                                                          blue:0.5 alpha:0.5], @"inputRadius0", [NSNumber numberWithDouble:0.0], nil];


    CIImage *displayImage = controlsFilter.outputImage;
    UIImage *finalImage = [UIImage imageWithCIImage:displayImage];

    CIContext *context = [CIContext contextWithOptions:nil];
    if (displayImage == nil || finalImage == nil) {
        // We did not get output image. Let's display the original image itself.
        return  [UIImage imageNamed:baseImageName];
    }else {
        // We got output image. Display it.
        return  [UIImage imageWithCGImage:[context createCGImage:displayImage fromRect:displayImage.extent]];
    }

}

Upvotes: 1

Related Questions