Question

How can i extract an UIImage with an path?

I need to get the content that’s inside the path into a new UIImage. What I need is the content of a rotated rectangle. This is the code that I use to get the corners of the rectangle. (x,y = center of image. width, height of image).

UIBezierPath* aPath = [UIBezierPath bezierPath];

//1
[aPath moveToPoint:CGPointMake(
                               x+(width/2)*cosf(A)-(height/2)*sinf(A),
                               y+(height/2)*cosf(A)+(width/2)*sinf(A))];

NSLog(@"%f, %f", x+(width/2)*cosf(A)-(height/2)*sinf(A),
      y+(height/2)*cosf(A)+(width/2)*sinf(A));


//2
[aPath moveToPoint:CGPointMake(
                               x-(width/2)*cosf(A)-(height/2)*sinf(A),
                               y+(height/2)*cosf(A)-(width/2)*sinf(A))];

NSLog(@"%f, %f", x-(width/2)*cosf(A)-(height/2)*sinf(A),
      y+(height/2)*cosf(A)-(width/2)*sinf(A));


//3
[aPath moveToPoint:CGPointMake(
                               x-(width/2)*cosf(A)+(height/2)*sinf(A),
                               y-(height/2)*cosf(A)-(width/2)*sinf(A))];

NSLog(@"%f, %f", x-(width/2)*cosf(A)+(height/2)*sinf(A),
      y-(height/2)*cosf(A)-(width/2)*sinf(A));


//4
[aPath moveToPoint:CGPointMake(
                               x+(width/2)*cosf(A)+(height/2)*sinf(A),
                               y-(height/2)*cosf(A)+(width/2)*sinf(A))];

NSLog(@"%f, %f", x+(width/2)*cosf(A)+(height/2)*sinf(A),
      y-(height/2)*cosf(A)+(width/2)*sinf(A));



//5
[aPath moveToPoint:CGPointMake(
                               x+(width/2)*cosf(A)-(height/2)*sinf(A),
                               y+(height/2)*cosf(A)+(width/2)*sinf(A))];

NSLog(@"%f, %f", x+(width/2)*cosf(A)-(height/2)*sinf(A),
      y+(height/2)*cosf(A)+(width/2)*sinf(A));
[aPath closePath];

I was thinking something like this: A picture of the problem.
(The shape is different here.) I want that yellow part to be a new UIImage.

Answer 1

Use your UIBezierPath as a clipping path. There is the addClip method for that.

See the Quartz2D Programming Guide, especially this part for details.

The idea is to create a new Bitmap context, apply the clipping using your path, then draw the image (that will thus get clipped) on this bitmap context and finally generate an UIImage from it.

Moreover, instead of making some maths by yourself to rotate your CGRect you want to use for clipping, you should create a CGRect without any rotation, and use CGAffineTransform to rotate it. This will avoid the need to do the computation by yourself using cos/sin functions and make your code easier to read.

---

[EDIT] Here is a full example to:

• Generate a Bezier path and apply CGAffineTransform rotation to it
• Use this bezier path to clip an image

I did check it and works like a charm.

// Generate a UIBezierPath of a rounded rect rotated by angle radians
-(UIBezierPath*)computePathWithRect:(CGRect)rect
                       cornerRadius:(CGFloat)cornerRadius
                              angle:(CGFloat)radians;
{
  // Compute basic path
  UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:cornerRadius];

  // Apply rotation.
  // Don't forget that rotations are around origin 0,0 so if you want to rotate around the rect's center,
  // you need to apply a translation so that the rect's center is at 0,0, then rotate, and translate it back at its original position.
  CGAffineTransform restoreCenterPosition = CGAffineTransformMakeTranslation(CGRectGetMidX(rect), CGRectGetMidY(rect));
  CGAffineTransform rotateFromOrigin = CGAffineTransformRotate(restoreCenterPosition,radians);
  CGAffineTransform rotateFromRectCenter = CGAffineTransformTranslate(rotateFromOrigin, -CGRectGetMidX(rect), -CGRectGetMidY(rect));
  [path applyTransform:rotateFromRectCenter];

  return path;
}

// Generate a new image from srcImage but clipped with the given path
-(UIImage*)clipImage:(UIImage*)srcImage withPath:(UIBezierPath*)path
{
  UIGraphicsBeginImageContextWithOptions(srcImage.size, NO, 0.0);

  // Add clipping path
  // Actually UIBezierPath has a method for that, that is equivalent to CGContextClip(currentContext, bezierPath.CGPath), so better use it
  [path addClip];

  // Flip coordinates before drawing image as UIKit and CoreGraphics have inverted coordinate system
  CGContextTranslateCTM(UIGraphicsGetCurrentContext(), 0, srcImage.size.height);
  CGContextScaleCTM(UIGraphicsGetCurrentContext(), 1, -1);
  // Draw image, that will thus be clipped, on the bitmap context
  CGContextDrawImage(UIGraphicsGetCurrentContext(), CGRectMake(0, 0, srcImage.size.width, srcImage.size.height), srcImage.CGImage);

  // Generate final (clipped) image
  UIImage* clippedImage = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();

  return clippedImage;
}


// Usage example
- (void)doClipping
{
  UIImage* originalImage = ...
  UIBezierPath* path = [self computePathWithRect:CGRectMake(100,100,184,94)
                                    cornerRadius:10.f
                                           angle:30*M_PI/180.f];
  UIImage* clippedImage = [self clipImage:originalImage withPath:path];
  self.resultImageView.image = clippedImage;
}