how to draw on the surface of imageview transparently - iphone

i want to track finger touch and draw the path on top of the imageView.
following is what i did:
In the touch event:
UIgraphicsBeginImageContext(imageView.frame.size);
[imageView.image drawInRect:CGRectMake(0,0,imageView.size.width,imageView.size.height)];
//drawing.....
imageView.image=UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
however, the drawing opaque the background Image?
how to drawing the path while still can make the background available?
thanks in advance:)

If you're doing simple vector drawing, you can set a color with a non-1.0 alpha value. These shapes will then be translucent when you draw them on top of your image. For example:
CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
CGFloat values[4] = {1.0, 0.0, 0.0, 0.5};
CGColorRef translucentRed = CGColorCreate(space, values);
CGContextSetStrokeColorWithColor(context, translucentRed);
CGContextSetFillColorWithColor(context, translucentRed)
// Do your drawing here
CGColorRelease(translucentRed);
CGColorSpaceRelease(space);
will create a translucent red color and set the current stroke and fill to use that color.
Note that overlapping drawn elements will have darker areas because of this translucency, which might be an effect that you don't want.

Related

Filling Colors inside edges

I am new to Iphone development.
Currently i am making coloring app.
I am using apple's paint app as ref to create my app.
I successfully create app where u can color on a screen with given texture image
What i did is
I create a custom UIView which extends opengl and i detect touches on it and draw accordingly.
I also kept background UIImageView which contain outline images, so it feels like your drawing above that Image.
Everything works fine
but i wanted to fill color inside black edges
Like if a image has four square which has black edges and inside of that square is blank and if i touch any square it should fill that square with selected color(mostly i am working on irregular shape)
Can anyone tell me how can i fill colors inside that square
The flood fill algo looks slow as i have some big images which will take time to fill the color
so is there any easy method by which i can fill color
A sample code will b very helpful as i am new to iPhone Dev
I implemnted this kind of feature in my recent project. The difference is: I filled color in border only.
Check my code over here, it might get helpful to you
// apply color to only border & return an image
+ (UIImage *)imageNamed:(NSString *)name withColor:(UIColor *)color
{
// load the image
UIImage *img = [UIImage imageNamed:name];
// begin a new image context, to draw our colored image onto
UIGraphicsBeginImageContext(img.size);
// get a reference to that context we created
CGContextRef context = UIGraphicsGetCurrentContext();
// set the fill color
[color setFill];
// translate/flip the graphics context (for transforming from CG* coords to UI* coords
CGContextTranslateCTM(context, 0, img.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
// set the blend mode to color burn, and the original image
CGContextSetBlendMode(context, kCGBlendModeColorBurn);
CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height);
CGContextDrawImage(context, rect, img.CGImage);
// set a mask that matches the shape of the image, then draw (color burn) a colored rectangle
CGContextClipToMask(context, rect, img.CGImage);
CGContextAddRect(context, rect);
CGContextDrawPath(context,kCGPathFill);
// generate a new UIImage from the graphics context we drew onto
UIImage *coloredImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//return the color-burned image
return coloredImg;
}
Enjoy Programming !

Can I use UIBezierPath to draw a shadow image around a UITableView section?

I have a shadow image that I would like to draw around the outer edge of a grouped UITableView section. This is the image:
I can get the UIBezierPath that represents the rect I want to draw around, but I can't figure out how to repeat the image along the route of the rect. So far it just fills the rect with the image:
UIImage *patternImg = [UIImage imageNamed:#"cellShadow"];
UIColor *fill = [UIColor colorWithPatternImage:patternImg];
[fill setFill];
CGRect aSectRect = [self rectForSection:0];
UIBezierPath *aSectPath = [self createRoundedPath:aSectRect];
[aSectPath fill];
Is this possible? What do I need to do?
Unfortunately, there's no way to have UIBezierPath use an image as a "brush" which is essentially what you'd want. But you can have CoreGraphics draw a shadow for you:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetShadow(context, CGSizeZero, myShadowRadius);
// Draw your shape here
Now if you draw just one shape it will get a shadow. But if you draw more shapes, each will get its own shadow which might not be what you want. The solution is called a transparency layer, which is not related to CALayers or something but is just some kind of "grouping" in CoreGraphics:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetShadow(context, CGSizeZero, myShadowRadius);
CGContextBeginTransparencyLayer(context, NULL);
// Draw your shapes here.
CGContextEndTransparencyLayer(context);
Between the CGContextBeginTransparencyLayer and CGContextEndTransparencyLayer calls the shadow is disabled. After the CGContextEndTransparencyLayer call, the shadow is applied to everything that has been drawn between begin and end as if it were just one shape.

How to animate a circle which is drawn in OpenGL?

I'm drawing several circles within my view by means of the drawRect function.
I'd like to have my circles pop up (scale to 1.2 -> scale to 1.0)
I've used coreanimation in the past but using OpenGL takes different functions.
Here's a snippit of my code which draws a circle in my view:
//calling draw function
CGContextRef contextRef = UIGraphicsGetCurrentContext();
//setting a specific fill color
CGContextSetRGBFillColor(contextRef, 0.0, 255.0, 0.0, 1.0);
//drawing the circle with a specific height, weight and x,y location
CGContextFillEllipseInRect(contextRef, CGRectMake(30 ,30, 20,20));
How can I animate this circle that it 'pops up'.
"Pops up" is not telling me that much.
if you want it to go from small to big modify width and height of rect.use a global int variable

How to use a CGBlendMode on a UIView that scrolls above a fixed background?

Our main UIView is a UIScrollView with a fixed background image (very common, obviously). In that scrollView, we have several UIViews that hold content and scroll up and down as the user scrolls (also common). Those UIViews each have their own background, a simple gradient from white to black.
The goal is to have the background gradient of those (inner) UIViews be partially opaque AND use a CGBlendMode other than "kCGBlendModeNormal" (specifically, "kCGBlendModeOverlay"). You should be able to see through to the "parent" scrollView’s fixed background image as the UIViews scroll up and down above it.
- (void)drawRect:(CGRect)rect {
gradientStart = [UIColor colorWithRed:1 green:1 blue:1 alpha:1.0];
gradientEnd = [UIColor colorWithRed:0 green:0 blue:0 alpha:1.0];
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat locations[2] = { 0.0f, 1.0f };
NSArray *colors = [NSArray arrayWithObjects:(id)gradientStart.CGColor, (id)gradientEnd.CGColor, nil];
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef)colors, locations);
CGColorSpaceRelease(colorSpace);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetAlpha(context, 0.50); //this works!
CGContextSetBlendMode(context, kCGBlendModeOverlay); //doesn’t seem to do anything!
CGContextClearRect(context, rect);
CGPoint startPoint, endPoint;
startPoint.x = 0.0;
startPoint.y = 0.0;
endPoint.x = 0.0;
endPoint.y = rect.size.height;
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
CGGradientRelease(gradient);
[super drawRect:rect];
}
Everything works as expected except the CGContextSetBlendMode, which is ignored. We can't seem to find a way to change the blendMode of a UIView relative to what is behind it, the same way you can with alpha. Please note that this is different than building up multiple layers in a SINGLE UIView; in that case, this technique does change the blendMode of the layers "on top". We want to see through to the parent scrollView's fixed background image (as we scroll the child view up and down above it), with both an alpha and an overlay blend applied.
Here's an image showing the issue: http://img2.sbck.us/blendmode.png
Thanks in advance for your help!
I believe what you want is not possible with your current setup. On iOS, it is simply not possible for the blend mode of a view to have an effect on the stuff that is drawn under the view. You would have to draw the scroll view's background and the gradients in the same view.
This is possible, at least with two image views. It might even be possible with more general views. The approach is to implement drawRect in the parent view, and do as follows:
Determine the rect for the foreground view.
Convert the rect in the foreground view to a rect in the background view.
Begin a new graphics context.
Draw the background with the proper blend mode.
Draw the foreground with the proper blend mode.
Extract the image from the graphics context.
End the graphics context.
Use the extracted image accordingly.
This allows a foreground image to blend with a background image.
Seems like you could do this by setting the 'compositingFilter' property of your view's CALayer. The comment in CALayer.h says "A filter object used to composite the layer with its (possibly filtered) background. Default value is nil, which implies source-over compositing."
Alas, CoreImage which provides the filters is not (officially) available on iOS.
I guess your other alternative would be to use OpenGL. You could still use UIView with OpenGL after a fashion by rendering your UIView's into images which could then be used a textures.

iPhone: How to change the color of an image

I have a small image from a database and the image's average color need to be altered slightly.
It's a CGImageRef and I thought of creating a CGContext, drawing the image to this context, then subsequently changing the bitmap data somehow and finally rendering it.
But how can I alter the color information?
Thanks for your help!
Check out this Apple Q&A on pixel data manipulation for details on how you might go about that.
Draw a color onto the object like this:
// first draw image
[self.image drawInRect:rect];
// prepare the context to draw into
CGContextRef context = UIGraphicsGetCurrentContext();
// set the blend mode and draw rectangle on top of image
CGContextSetBlendMode(context, kCGBlendModeColor);
CGContextClipToMask(context, self.bounds, image.CGImage); // this restricts drawing to within alpha channel
CGContextSetRGBFillColor(context, 0.75, 0.0, 0.0, 1.0); // this is your color, a light reddish tint
CGContextFillRect(context, rect);
I put this into the drawRect: method of a custom UIView. That UIView has an ivar, UIImage *image that holds the image you want to tint or color.