Want to display image in the circle it is possible and how

1 Answers

One way of doing this is to create a subclass of NSView.

Then in you override drawrect: methods to do your custom drawing. You start by drawing your image in your defined frame. After that, you can either draw over, in the the same frame, an image of a rectangle with a transparent circle in the middle or use NSBezierPath to construct a similar rectangle.

The color of this rectangle, except the transparent circle in the middle, is the same as the background color of the enclosing view.


hi i want to display image in the circle not in the rectangle and all this will display in the tableview

Image Circular Wrap in iOS

Since CICircularWrap is not supported on iOS, one has to code his own effect for now. Probably the simplest way is to compute the transformation from polar to cartesian coordinate systems and then interpolate from the source image. I've come up with this simple (and frankly quite slow - it can be much optimised) algorithm:

    #import <QuartzCore/QuartzCore.h>

    CGContextRef CreateARGBBitmapContext (size_t pixelsWide, size_t pixelsHigh)
        CGContextRef    context = NULL;
        CGColorSpaceRef colorSpace;
        void *          bitmapData;
        int             bitmapByteCount;
        int             bitmapBytesPerRow;

        // Declare the number of bytes per row. Each pixel in the bitmap in this
        // example is represented by 4 bytes; 8 bits each of red, green, blue, and
        // alpha.
        bitmapBytesPerRow   = (int)(pixelsWide * 4);
        bitmapByteCount     = (int)(bitmapBytesPerRow * pixelsHigh);

        // Use the generic RGB color space.
        colorSpace = CGColorSpaceCreateDeviceRGB();
        if (colorSpace == NULL)
            fprintf(stderr, "Error allocating color space\n");
            return NULL;

        // Allocate memory for image data. This is the destination in memory
        // where any drawing to the bitmap context will be rendered.
        bitmapData = malloc( bitmapByteCount );
        if (bitmapData == NULL)
            fprintf (stderr, "Memory not allocated!");
            CGColorSpaceRelease( colorSpace );
            return NULL;

        // Create the bitmap context. We want pre-multiplied ARGB, 8-bits
        // per component. Regardless of what the source image format is
        // (CMYK, Grayscale, and so on) it will be converted over to the format
        // specified here by CGBitmapContextCreate.
        context = CGBitmapContextCreate (bitmapData,
                                         8,      // bits per component
        if (context == NULL)
            free (bitmapData);
            fprintf (stderr, "Context not created!");

        // Make sure and release colorspace before returning
        CGColorSpaceRelease( colorSpace );

        return context;

    CGImageRef circularWrap(CGImageRef inImage,CGFloat bottomRadius, CGFloat topRadius, CGFloat startAngle, BOOL clockWise, BOOL interpolate)
        if(topRadius < 0 || bottomRadius < 0) return NULL;

        // Create the bitmap context
        int w = (int)CGImageGetWidth(inImage);
        int h = (int)CGImageGetHeight(inImage);

        //result image side size (always a square image)
        int resultSide = 2*MAX(topRadius, bottomRadius);
        CGContextRef cgctx1 = CreateARGBBitmapContext(w,h);
        CGContextRef cgctx2 = CreateARGBBitmapContext(resultSide,resultSide);

        if (cgctx1 == NULL || cgctx2 == NULL)
            return NULL;

        // Get image width, height. We'll use the entire image.
        CGRect rect = {{0,0},{w,h}};

        // Draw the image to the bitmap context. Once we draw, the memory
        // allocated for the context for rendering will then contain the
        // raw image data in the specified color space.
        CGContextDrawImage(cgctx1, rect, inImage);

        // Now we can get a pointer to the image data associated with the bitmap
        // context.
        int *data1 = CGBitmapContextGetData (cgctx1);
        int *data2 = CGBitmapContextGetData (cgctx2);

        int resultImageSize = resultSide*resultSide;
        double temp;
        for(int *p = data2, pos = 0;pos<resultImageSize;p++,pos++)
            *p = 0;
            int x = pos%resultSide-resultSide/2;
            int y = -pos/resultSide+resultSide/2;
            CGFloat phi = modf(((atan2(x, y)+startAngle)/2.0/M_PI+0.5),&temp);
            if(!clockWise) phi = 1-phi;
            CGFloat r = ((sqrtf(x*x+y*y))-topRadius)*h/(bottomRadius-topRadius);
            if(phi>=0 && phi<w && r>=0 && r<h)
                if(!interpolate || phi >= w-1 || r>=h-1)
                    //pick the closest pixel
                    *p = data1[(int)r*w+(int)phi];
                    double dphi = modf(phi, &temp);
                    double dr = modf(r, &temp);

                    int8_t* c00 = (int8_t*)(data1+(int)r*w+(int)phi);
                    int8_t* c01 = (int8_t*)(data1+(int)r*w+(int)phi+1);
                    int8_t* c10 = (int8_t*)(data1+(int)r*w+w+(int)phi);
                    int8_t* c11 = (int8_t*)(data1+(int)r*w+w+(int)phi+1);

                    //interpolate components separately
                    for(int component = 0; component < 4; component++)
                        double avg = ((*c00 & 0xFF)*(1-dphi)+(*c01 & 0xFF)*dphi)*(1-dr)+((*c10 & 0xFF)*(1-dphi)+(*c11 & 0xFF)*dphi)*dr;
                        *p += (((int)(avg))<<(component*8));
                        c00++; c10++; c01++; c11++;

        CGImageRef result = CGBitmapContextCreateImage(cgctx2);

        // When finished, release the context
        // Free image data memory for the context
        if (data1) free(data1);
        if (data2) free(data2);

        return result;

Use the circularWrap function with parameters:

  • CGImageRef inImage the source image
  • CGFloat bottomRadius the bottom side of the source image will transform into a circle with this radius
  • CGFloat topRadius the same for the top side of the source image, this can be larger or smaler than the bottom radius. (results in wraping around top/bottom of the image)
  • CGFloat startAngle the angle in which the left and right sides of the source image will transform. BOOL clockWise direction of rendering
  • BOOL interpolate a simple anti-aliasing algorithm. Only the inside of the image is interpolated

some samples (top left is the source image):
with code:

    image1 = [UIImage imageWithCGImage:circularWrap(sourceImage.CGImage,0,300,0,YES,NO)];
    image2 = [UIImage imageWithCGImage:circularWrap(sourceImage.CGImage,100,300,M_PI_2,NO,YES)];
    image3 = [UIImage imageWithCGImage:circularWrap(sourceImage.CGImage,300,200,M_PI_4,NO,YES)];
    image4 = [UIImage imageWithCGImage:circularWrap(sourceImage.CGImage,250,300,0,NO,NO)];

enjoy! :)