iOS: Inverse UIBezierPath (bezierPathWithOvalInRect) - ios

I have an jpg Image with a round object in a rect and want to make the envoirement of the round object transparent...
(Remove red area in this example)
With the help of this iOS make part of an UIImage transparent and "UIBezierPath bezierPathWithOvalInRect" i've got a little success, but this make a path around my object, and I need to invert it, to make the outside and not the inside of the path transparent..
Im not shure where I have to change my code to get the right result..
Here is my code:
//BezierPath
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
// Create an image context containing the original UIImage.
UIGraphicsBeginImageContext(_imgTemp.image.size);
[_imgTemp.image drawAtPoint:CGPointZero];
// Clip to the bezier path and clear that portion of the image.
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddPath(context,bezierPath.CGPath);
CGContextClip(context);
CGContextClearRect(context,CGRectMake(0,0,self._imgTemp.image.size.width,self._imgTemp.image.size.height));
// Build a new UIImage from the image context.
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self._imgTemp.image = newImage;
Anybody got the resolving?

To only draw within the black circle you should move [_imgTemp.image drawAtPoint:CGPointZero]; to after CGContextClip(context); and then remove the CGContextClearRect( ... ) call entirely:
//BezierPath
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
// Create an image context containing the original UIImage.
UIGraphicsBeginImageContext(_imgTemp.image.size);
// Clip to the bezier path and clear that portion of the image.
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddPath(context,bezierPath.CGPath);
CGContextClip(context);
// Draw here when the context is clipped
[_imgTemp.image drawAtPoint:CGPointZero];
// Build a new UIImage from the image context.
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self._imgTemp.image = newImage;

Related

UIBezierPath clip an UIIimage

I have a UIBezierPath and I want to get a PNG image from a source image which is shaped like path.
UIGraphicsBeginImageContextWithOptions(sourceImage.size, NO, 0);
[bpath addClip];
[sourceImage drawAtPoint:CGPointZero];
UIImage *maskedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
But the maskedImage is empty. My path seems to be valid as I tested a fill using the path. Please advice how I can get the part of an image which is shaped liked the UIBezierPath
Your code is fine, the problem is either your clipping mask or your image. I just tried the below and it worked flawlessly:
UIImage *sourceImage = [UIImage imageNamed:#"example"];
UIBezierPath *bpath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, sourceImage.size.width, sourceImage.size.height) cornerRadius:50];
UIGraphicsBeginImageContextWithOptions(sourceImage.size, NO, 0);
[bpath addClip];
[sourceImage drawAtPoint:CGPointZero];
UIImage *maskedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
The first two lines are mine; the last five are yours. The results looks exactly as I would expect, so either there's a problem loading your image (put a breakpoint when drawing and inspect the results using Quick Look), or your mask isn't what you think it is.
Fun fact: UIBezierPath is also compatible with Quick Look, so you should be able to inspect the contents of bpath in the debugger to make sure it is what you think it is. Make sure your path is a sensible size given the size of your image!
I figured it out. I wrote my solution here
The key was to draw the image as
UIGraphicsPushContext(context);
UIBezierPath *bpath = [UIBezierPath bezierPath];
// Add lines to path
[bpath closePath];
[bpath addClip];
[_overlayImage drawInRect:theRect blendMode:kCGBlendModeMultiply alpha:0.4];
UIGraphicsPopContext();

Create image on top of another uiimage

I am not able to draw image on top of another image. Below if the code I am using:
-(void)createImage
{
// create a new bitmap image context at the device resolution (retina/non-retina)
UIGraphicsBeginImageContextWithOptions(imgVw_noHair_.frame.size, YES, 0.0);
// get context
CGContextRef context = UIGraphicsGetCurrentContext();
// push context to make it current
// (need to do this manually because we are not drawing in a UIView)
UIGraphicsPushContext(context);
// drawing code comes here- look at CGContext reference
// for available operations
// this example draws the inputImage into the context
[eraser drawAtPoint:CGPointMake(50, 50)];
// pop context
UIGraphicsPopContext();
UIImage _image_ = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
The image which I get from the current context is a black image. I want to draw eraser image on the image which I get from the context.
This is updated code which is working in my side.
-(void)createImage
{
//Create context in which you have to draw
UIGraphicsBeginImageContextWithOptions(imgvwImage.image.size, YES, 0.0);
// get context
CGContextRef context = UIGraphicsGetCurrentContext();
// push context to make it current
// (need to do this manually because we are not drawing in a UIView)
UIGraphicsPushContext(context);
//draw the old image in that context
[imgvwImage.image drawInRect:CGRectMake(0, 0, 200, 200)];
UIImage *img=[UIImage imageNamed:#"img.png"];
//Draw your image in that context
[img drawAtPoint:CGPointMake(50, 50)];
// pop context
UIGraphicsPopContext();
UIImage *image_ = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//Get that image
imgvwImage.image=image_;
}
try to draw your eraser image in rect instead of AtPoint
[eraser drawInRect:CGRectMake(50, 50, width, height)];
You forgot to draw the bottom image into the context, hence you are drawing your eraser image on top of an uninitialized (black) background. You need to add some code to first draw your desired background image.

Color tinted UIImages gets pixelated

I am having problem understanding the reason for the following method, to return images that are visibly pixelated. I have double checked the size of the image, and it is fine. What's more, without tinting it, the image edges are smooth, and lack pixelation.
The method for tinting image, based on IOS7 ImageView's tintColor property, works fine, however I would love to find out what is wrong with the following code, because it seems to work for everybody but me. Thanks!
- (UIImage *)imageTintedWithColor:(UIColor *)color
{
if (color) {
UIImage *img = self; // The method is a part of UIImage category, hence the "self"
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
CGContextSetBlendMode(context, kCGBlendModeSourceIn);
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;
}
return self;
}
Change this line:
UIGraphicsBeginImageContext(img.size);
to:
UIGraphicsBeginImageContextWithOptions(img.size, NO, 0);
If your images will never have an transparency, change the NO to YES.

Why is my image upside down after using CGContextSetFillColorWithColor

I am trying to apply a color fill to the MKAnnotation. I found some code that pretty much works but for some reason the filled image is upside down after applying the fill to it.
Here is the current code that I am running on a map pin.
CGRect rect = CGRectMake(0, 0, self.image.size.width, self.image.size.height);
UIGraphicsBeginImageContext(self.image.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClipToMask(context, rect, self.image.CGImage);
CGContextSetFillColorWithColor(context, [[UIColor grayColor] CGColor]);
CGContextFillRect(context, rect);
CGContextRotateCTM(context, 90);
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImage *flippedImage = [UIImage imageWithCGImage:img.CGImage
scale:1.0 orientation:self.image.imageOrientation];
self.image = flippedImage;
Here is what the pins look like after this code runs.
http://d.pr/i/UaPU
I was thinking that if I applied the current image orientation to the flippedImage that would do the trick but that did not work. I also tried setting self.image = img; and removing the flippedImage var completely but the result is still the same.
CGContext coordinate system is flipped vertically in regard to UIView coordinate system.
Just flip it like this:
CGContextTranslateCTM(ctx, 0, imageHeight);,
CGContextScaleCTM(ctx, 1, -1);

Change color of an UIImage with masking and replacing that image with a colored image

In one class I have an array consisting of five UIImages such as tiangle.png and circle.png.
In the current class I have a list of colors. After clicking to the UIImage and after clicking to one color it is possible to change the color of the current UIImage.
This will be realized by masking the image, set its color and replace the old UIImage with the new one in the selected color.
But there is something wrong in the method, which should change the color:
- (void) changeColor: (UITapGestureRecognizer*) gestureRecognizer{
UIGraphicsBeginImageContext(test.newView.image.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGPoint loc = [gestureRecognizer locationInView:self.view];
CGContextSetFillColorWithColor(context, [[self colorOfPoint:loc]CGColor]);
CGContextTranslateCTM(context, 0, test.newView.image.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGRect rect = CGRectMake(test.newView.frame.origin.x,test.newView.frame.origin.x, test.newView.image.size.width,test.newView.image.size.height);
CGContextSetBlendMode(context, kCGBlendModeColorBurn);
CGContextClipToMask(context, rect, test.newView.image.CGImage);
CGContextAddRect(context, rect);
CGContextDrawPath(context, kCGPathFill);
CGImageRef imgRef = CGBitmapContextCreateImage(context);
UIImage* img = [UIImage imageWithCGImage:imgRef];
CGImageRelease(imgRef);
CGContextRelease(context);
UIGraphicsEndImageContext();
test.newView.image = img;
}
The only thing what is happening is that the clicked UIImage is going to get opaque.
The imageview which is holding the UIImage is in this case not deleted.
I'm not sure that grabbing an imageRef using a CGBitmapContextCreateImage() call is appropriate inside a UIGraphics image context. Every example I've ever seen uses
UIImage* image = UIGraphicsGetImageFromCurrentImageContext();
to grab the image before closing the image context. You might try that.

Resources