I am erasing an image with touch using the blend mode destination out. I did this successfully.
Actually I am reducing the alpha with touch so I am able to set the strength too.
Now my problem is about redrawing the erased part of image with touch (i.e I want to draw back the image with strength or want to set the alpha darker). For that I am having a backup of original image then I cropped the part of touch and merged it with image. But the problem is that it is drawing more than it should.
Note that Redraw procedure just darkens the image more than original when drawing overlaps (need to set a upper bound). So how can I avoid the redrawing at the point on which I have already drawn the image in order to avoid darkening of the original image.
I have also attached the code.
// Code to erase an image
UIGraphicsBeginImageContext(self._overlayImage.image.size);
CGRect rect =CGRectMake(0, 0, self._overlayImage.image.size.width, self._overlayImage.image.size.height) ;
CGContextRef context = UIGraphicsGetCurrentContext();
CGImageRef imageRef=self._overlayImage.image.CGImage;
if (imageRef) {
// Restore the screen that was previously saved
CGContextTranslateCTM(context, 0, rect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, rect, imageRef);
//CGImageRelease(imageRef);
CGContextTranslateCTM(context, 0, rect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
}
// Erase the background -- raise the alpha to clear more away with eash swipe
// [[UIImage imageNamed:#"eraser222.png"] drawAtPoint:point blendMode:kCGBlendModeDestinationOut alpha:.2];
[ [UIImage imageNamed:#"eraser222.png"] drawInRect:CGRectMake(newPoint.x-self.imgOrignal.size.width*2*radius/self._overlayImage.bounds.size.width, newPoint.y-self.imgOrignal.size.height*2*radius/self._overlayImage.bounds.size.height, self.imgOrignal.size.width*2*radius/self._overlayImage.bounds.size.width, self.imgOrignal.size.height*2*radius/self._overlayImage.bounds.size.height) blendMode:kCGBlendModeDestinationOut alpha:strength/3];
self._overlayImage.image=UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// code to draw an image
UIImage *cropped = [self imageByCropping:self.imgOrignal toRect:CGRectMake(newPoint.x-self.imgOrignal.size.width*2*radius/self._overlayImage.bounds.size.width, newPoint.y-self.imgOrignal.size.height*2*radius/self._overlayImage.bounds.size.height, self.imgOrignal.size.width*2*radius/self._overlayImage.bounds.size.width, self.imgOrignal.size.height*2*radius/self._overlayImage.bounds.size.height)];
UIGraphicsBeginImageContext(self._overlayImage.image.size);
CGRect rect =CGRectMake(0, 0, self._overlayImage.image.size.width, self._overlayImage.image.size.height) ;
CGContextRef context = UIGraphicsGetCurrentContext();
CGImageRef imageRef=self._overlayImage.image.CGImage;
if (imageRef) {
// Restore the screen that was previously saved
CGContextTranslateCTM(context, 0, rect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, rect, imageRef);
//CGImageRelease(imageRef);
CGContextTranslateCTM(context, 0, rect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
}
[ cropped drawInRect:CGRectMake(newPoint.x-self.imgOrignal.size.width*2*radius/self._overlayImage.bounds.size.width, newPoint.y-self.imgOrignal.size.height*2*radius/self._overlayImage.bounds.size.height, self.imgOrignal.size.width*2*radius/self._overlayImage.bounds.size.width, self.imgOrignal.size.height*2*radius/self._overlayImage.bounds.size.height) blendMode:kCGBlendModeNormal alpha:strength];
cropped= [UIImage imageWithData:UIImagePNGRepresentation(cropped)];
UIImage *finalimage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self._overlayImage.image=finalimage;
I know it too late to ans here but I have reached one solution and I will like to share here as it can help someone in need. It was not possible to delete and redraw the same image. So I worked on two images. One that was original Image and second image was nil. Second image was used to draw path where user touches screen. Thenceforth created a new context , drew original image, then drew the path image with kCGBlendModeDestinationOut blend mode. It is kCGBlendModeDestinationOut the main hero of this method. Main task was accomplished by using the kCGBlendModeDestinationOut blend mode. Hence getting the required effect. Check my blog here.
Related
I am creating a simple drawing application in which I have a UIView in background & UIImageView in foreground. I am doing some drawing stuff in UIView and I have set an image in UIImageView. I want to add the transparency effect in UIImageView to show the lines behind the image. I know I can do this by reducing alpha, but I don’t want to change the alpha of image.
I want to do it with CGContextSetBlendMode, but I don’t know how to do this. Kindly help me to resolve this issue.
Thanks!
IMAGE http://www.freeimagehosting.net/q3237
UIImage *img = [UIImage imageNamed:#"Image.png"];
UIGraphicsBeginImageContext(self.view.frame.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetBlendMode(ctx, kCGBlendModeMultiply);
[img drawInRect:CGRectMake(0, 0, 768, 1004) blendMode:kCGBlendModeDarken alpha:1]; [imageView.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width,self.view.frame.size.height)];
CGContextSetBlendMode(ctx, kCGBlendModeDarken);
imageView.image = UIGraphicsGetImageFromCurrentImageContext();
No need to keep imageview do it like this..
Since you are drawing on two different context you wont be able to use blend modes across them. For that you need to draw other stuff on your drawing view and then draw your image..
- (void)drawRect:(CGRect)rect {
// do ur drawing stuff first
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, self.bounds, self.image.CGImage);
CGContextSetBlendMode(context, kCGBlendModeSaturation);
CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 1.0);
CGContextFillRect(context, rect);
}
I'm currently drawing a line using Core Graphics. It's really bare bones and simple.
- (void)drawRect:(CGRect)rect {
CGContextRef c = UIGraphicsGetCurrentContext();
CGFloat red[4] = {1.0f, 0.0f, 0.0f, 1.0f};
CGContextSetStrokeColor(c, red);
CGContextBeginPath(c);
CGContextMoveToPoint(c, 5.0f, 5.0f);
CGContextAddLineToPoint(c, 300.0f, 600.0f);
CGContextSetLineWidth(c, 25);
CGContextSetLineCap(c, kCGLineCapRound);
CGContextStrokePath(c);
}
This works well. Let's say that we wanted to draw a custom style line. Say we wanted to imitate the style of a crayon for example. And that the designer handed your crayon style images: http://imgur.com/a/N40ig
To do accomplish this effect I think I need to do something like this:
Create a special colored versions of crayonImage1-crayonImage4
Every time you add a line to line you use one of the crayonImages
You alternate the crayonImages every time you draw a point.
Step 1 makes sense. I can use the following method:
- (UIImage *)image:(UIImage *)img withColor:(UIColor *)color {
// 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;
}
I'm unsure how I can complete steps 2 and 3. Is there an API in CoreGraphics for setting an image as the point of line? If so what is it and how can I use it?
Thanks in advance,
-David
Start with the following example: http://www.ifans.com/forums/showthread.php?t=132024
But for brushes, don't draw a line. Simply draw the brush image using CGContextDrawImage.
Basically, you simply draw an image for every touch.
I'm calling the following code from drawRect
- (void) drawPartial:(UIImage *)img colour:(UIColor *)colour {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextTranslateCTM(context, 0.0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, self.frame, img.CGImage);
if (colour!=nil) {
CGContextSetBlendMode (context, kCGBlendModeColor );
CGContextClipToMask(context, self.bounds, img.CGImage);
CGContextSetFillColor(context, CGColorGetComponents(colour.CGColor));
CGContextFillRect (context, self.bounds);
}
self.currentImage=UIGraphicsGetImageFromCurrentImageContext();
CGContextRestoreGState(context);
}
Infact I call it multiple times to build a composite image dynamically coloured in. Each img passed in is effectively a transparent overlay with a different part of the image on it.
I can build my compound image by calling this multiple times in drawrect. The issue comes when I want to update one part of the image. Ideally I would be able to call the above function and just change the one part: I've tried playing with self.clearsContextBeforeDrawing to no avail.
Then I thought I would try to keep a copy of the image from each draw, as a cached image of the state - that way I just need to overlay the new part on that: two calls rather than 15.
However the line self.currentImage=UIGraphicsGetImageFromCurrentImageContext() is not returning me the current image so I can't build a cached copy.
Any help on either approach would really be appreciated. (or obviously point me the way I should be doing this!)
EDIT
I also tried compositing the image separtly using virtually the same code, and then drawing that, but again I don't get the image out...
- (UIImage *) overlayImage:(UIImage *)srcImage withImage:(UIImage *)overlayImage ofColour:(UIColor *)colour {
CGSize size =srcImage.size;
CGRect box = CGRectMake(0, 0, size.width, size.height);
UIGraphicsBeginImageContext(size);
CGContextRef context=UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0.0, size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, box, srcImage.CGImage);
if (colour!=nil) {
CGContextSetBlendMode (context, kCGBlendModeColor ); //kCGBlendModeMultiply
CGContextClipToMask(context, box, overlayImage.CGImage); // respect alpha mask
CGContextSetFillColor(context, CGColorGetComponents(colour.CGColor));
CGContextFillRect (context, box);
}
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
//UIImage *result = [UIImage imageWithCGImage: CGBitmapContextCreateImage (context)];
UIGraphicsEndImageContext();
return result;
}
As a rule, you want -drawRect: to be as simple as possible.
Move your drawing code from -drawRect: into a method that creates and draws the entire image you want. Reduce -drawRect: to just compositing this image into the current context.
It's entirely possible that your UIImage object simply isn't retaining the stored data. Furthermore you should know that UIImage is not a mutable object type. You'll get memory leaks unless you release it before reassigning it. Try this:
UIImage *result = [UIGraphicsGetImageFromCurrentImageContext() retain];
i have a view with uiimageview i assign this uiimageview image by camera..now i want to do some drawing onto image....using coregraphics.i want to do something like this... select an area by touching and drawing line when line joins something like circle or any shape..i want to change that particular area in to something else for example change color there.turn that into grayscale.. till now i am able to draw line...here is an image of line drawn over a uiimage view...
but i am unable to figure it out how do i draw at imageview's image..mean how to modify imageview's image???
also i want to restore image when click on clear button or something like undo..does someone knows how to achieve this?
and
how do i create a rectangle when click on crop button move the rectangle any where on the screen...and then push the button to crop the image...and then save cropped image..
These are the steps:
Create a CGBitmapContext matching the image's colorspace and dimensions.
Draw the image into that context.
Draw whatever you want on top of the image.
Create a new image from the context.
Dispose off the context.
Here's a method that takes an image, draws something on top of it and returns a new UIImage with modified contents:
- (UIImage*)modifiedImageWithImage:(UIImage*)uiImage
{
// build context to draw in
CGImageRef image = uiImage.CGImage;
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGContextRef ctx = CGBitmapContextCreate(NULL,
CGImageGetWidth(image), CGImageGetHeight(image),
8, CGImageGetWidth(image) * 4,
colorspace, kCGImageAlphaPremultipliedLast);
CGColorSpaceRelease(colorspace);
// draw original image
CGRect r = CGRectMake(0, 0, CGImageGetWidth(image), CGImageGetHeight(image));
CGContextSetBlendMode(ctx, kCGBlendModeCopy);
CGContextDrawImage(ctx, r, image);
CGContextSetBlendMode(ctx, kCGBlendModeNormal);
// draw something
CGContextAddEllipseInRect(ctx, CGRectInset(r, 10, 10));
CGContextSetRGBStrokeColor(ctx, 1.0f, 1.0f, 1.0f, 0.5f);
CGContextSetLineWidth(ctx, 16.0f);
CGContextDrawPath(ctx, kCGPathStroke);
CGContextAddEllipseInRect(ctx, CGRectInset(r, 10, 10));
CGContextSetRGBStrokeColor(ctx, 0.7f, 0.0f, 0.0f, 1.0f);
CGContextSetLineWidth(ctx, 4.0f);
CGContextDrawPath(ctx, kCGPathStroke);
// create resulting image
image = CGBitmapContextCreateImage(ctx);
UIImage* newImage = [[[UIImage alloc] initWithCGImage:image] autorelease];
CGImageRelease(image);
CGContextRelease(ctx);
return newImage;
}
To restore to old image, just keep a reference to it.
The cropping thing is not related to the above and you should create a new question for that.
A lot easier solution would be
(UIImage *) modifyImage:(UIImage *)inputImage
{
UIGraphicsBeginImageContext(inputImage.size);
[inputImage drawInRect:CGRectMake(0, 0, inputImage.size.width, inputImage.size.height);
CGContextRef ctx = UIGraphicsGetCurrentContext();
//Drawing code using above context goes here
/*
*
*/
UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return outputImage;
}
Take a look at Overview of Quartz 2D for information on using Quartz 2D on iPhone.
How can i take an UIImage and give it a black border programmatically?
If i can receive code, it will be great.
tnx
If you only need to display the border you can do that with Core Animation on the UIImageView's layer. If you need to do it on the image itself then you will need to create a new image, draw the old image into the new image and then draw a rect on top of it.
- (UIImage*)imageWithBorderFromImage:(UIImage*)source;
{
CGSize size = [source size];
UIGraphicsBeginImageContext(size);
CGRect rect = CGRectMake(0, 0, size.width, size.height);
[source drawInRect:rect blendMode:kCGBlendModeNormal alpha:1.0];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 0.5, 1.0, 1.0);
CGContextStrokeRect(context, rect);
UIImage *testImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return testImg;
}
This will put a pink border on an image and return the new image.
I'd have a look at this:
Can I Edit the Pixels of the UIImage's Property CGImage
As for the black border part, I assume you can figure that one out. Just iterate along each side and change the pixels to (0,0,0,255) for a certain amount.