In this code
CGRect contextRect = self.bounds;
will refer which bound? rectangle, imageRect, or whole iOS view.
I am trying to manipulate image using quartz2D, i created this code by looking different examples, and code written between // is from Apple Quartz2D guide draw text.
Thanks in advance,
Regards.
- (void)drawRect:(CGRect)rect
{
CGSize cgs = CGSizeMake(250.0, 400.0);
UIGraphicsBeginImageContext(cgs);
CGRect rectangle = CGRectMake(0,0,cgs.width,cgs.height);
CGRect imageRect = CGRectInset(rectangle, 5.4, 5.4);
imageRect.size.height -= 100;
UIImage *myImage = [UIImage imageNamed:#"pumpkin.jpg"];
[myImage drawInRect:imageRect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 10.0);
CGContextSetRGBStrokeColor(context, 0.0, 0.0, 1.0, 1.0);
CGContextStrokeRect(context, rectangle);
//
CGRect contextRect = self.bounds;
CGContextTranslateCTM(context, 0, contextRect.size.height);
CGContextScaleCTM(context, 1, -1);
float w, h;
w = contextRect.size.width;
h = contextRect.size.height;
CGAffineTransform myTextTransform;
CGContextSelectFont (context, "Helvetica-Bold", h/10, kCGEncodingMacRoman);
CGContextSetCharacterSpacing (context, 10);
CGContextSetTextDrawingMode (context, kCGTextFillStroke);
CGContextSetRGBFillColor(context, 0, 1, 0, .5);
CGContextSetRGBStrokeColor(context, 0, 0, 1, 1);
myTextTransform = CGAffineTransformMakeRotation(0);
CGContextSetTextMatrix(context, myTextTransform);
CGContextShowTextAtPoint(context, 0, 50, "Quartz 2D", 9);
//
UIImage *testImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[testImg drawAtPoint:CGPointMake(35, 10)];
}
self.frame indicates the coords and size of the view in its parent view coordinate system.
self.bounds indicates the coords and size of the view in its own coordinate system. So it always has the same width and height as self.frame, but it has x and y equal to 0.
self.bounds is equal to CGRectMake(0, 0, self.frame.size.width, self.frame.size.height).
So your code:
CGRect contextRect = self.bounds;
is the same as:
CGRect contextRect = rect;
Related
I am drawing a radial gradient in quartz.
I created a new file and put the code in drawRect as
CGContextRef ctx = UIGraphicsGetCurrentContext();
//Draw the gray Gradient
CGFloat BGLocations[2] = { 0.0, 1.0 };
CGFloat BgComponents[8] = { 0.25, 0.25, 0.25 , 1.0, // Start color
0.11, 0.11, 0.11, 1.0 }; // Mid color and End color
CGColorSpaceRef BgRGBColorspace = CGColorSpaceCreateDeviceRGB();
CGGradientRef bgRadialGradient = CGGradientCreateWithColorComponents(BgRGBColorspace, BgComponents, BGLocations, 2);
CGPoint startBg = CGPointMake(250, 250);
CGFloat endRadius= 250;
CGContextDrawRadialGradient(ctx, bgRadialGradient, startBg, 0, startBg, endRadius, kCGGradientDrawsAfterEndLocation);
CGColorSpaceRelease(BgRGBColorspace);
CGGradientRelease(bgRadialGradient);
Now i am making a UIView and initializing it with the RadialGradientView created through the website but i need to change the endRadius according to the different implementations.
IS there a way to do that.
I am initializing the UIView with Frame.
UIView* backgroundView = [[UIView alloc] initWithFrame: CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
UIView* gradientView = [[RadialGradientView alloc] initWithFrame: backgroundView.bounds];
So when i am trying to access endRadius property of gradientView, Its not showing up.
Declare the endRadius as a property in your subclassed yourView.h file as
#property(assign) CGFloat endRadius;
and you can access this property like:
yourView.endRadius=40;
and in the code , change this line:
CGContextDrawRadialGradient(ctx, bgRadialGradient, startBg, 0, startBg, endRadius, kCGGradientDrawsAfterEndLocation);
to
CGContextDrawRadialGradient(ctx, bgRadialGradient, startBg, 0, startBg, self.endRadius, kCGGradientDrawsAfterEndLocation);
or
CGContextDrawRadialGradient(ctx, bgRadialGradient, startBg, 0, startBg, _endRadius, kCGGradientDrawsAfterEndLocation);
how do i rotate a NSString to a certain degree ? when i draw a string together with an image.
i referred this SO question Drawing rotated text with NSString drawInRect but my Ellipse is gone.
//Add text to UIImage
-(UIImage *)addMoodFound:(int)moodFoundCount andMoodColor:(CGColorRef)mColour
{
float scaleFactor = [[UIScreen mainScreen] scale];
UIGraphicsBeginImageContextWithOptions(CGSizeMake(36, 36), NO,scaleFactor);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
//CGContextSetRGBFillColor(context, kCGAggressiveColor);
CGContextSetFillColorWithColor(context,mColour);
CGContextFillEllipseInRect(context, CGRectMake(0, 0, 36, 36));
CGContextSetRGBFillColor(context, 250, 250, 250, 1);
//nsstring missing after adding this 3 line
CGAffineTransform transform1 = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(65));
CGContextConcatCTM(context, transform1);
CGContextTranslateCTM(context, 36, 0);
////////////////////////////////////////////////
[[NSString stringWithFormat:#"%d",moodFoundCount ] drawInRect : CGRectMake(0, 7, 36, 18)
withFont : [UIFont fontWithName:monR size:17]
lineBreakMode : NSLineBreakByTruncatingTail
alignment : NSTextAlignmentCenter ];
CGContextRestoreGState(context);
UIImage *theImage=UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return theImage;
}
CGAffineTransformMakeRotation will rotate around the context's origin (in this case x = 0, y = 0).
To properly rotate your text you need to first translate the origin of the context with the center of the box containing the string, rotate and move back the origin to its original location.
Replace the 3 lines where you're applying the rotation with:
CGContextConcatCTM(context, CGAffineTransformMakeTranslation(18, 18));
CGContextConcatCTM(context, CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(65)));
CGContextConcatCTM(context, CGAffineTransformMakeTranslation(-18, -18));
I have a UIImageView and I am applying a rotation transform using CGAffineTransformMakeRotation. This does not only rotate the image but scales it as well.
What is the correct way to rotate a UIImageView and retain the size/scale of the image?
I tried setting
self.image.contentMode = UIViewContentModeCenter;
self.image.autoresizingMask = UIViewAutoresizingNone;
and it doesn't seem to help.
try the below method
-(UIImage*)rotateImage:(UIImage*)img forAngle:(CGFloat)radian {
UIView *rotatedViewBox = [[UIView alloc]initWithFrame:CGRectMake(0, 0, img.size.width, img.size.height)];
CGAffineTransform t = CGAffineTransformMakeRotation(radian);
rotatedViewBox.transform = t;
CGSize rotatedSize = rotatedViewBox.frame.size;
UIGraphicsBeginImageContext(rotatedSize);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, rotatedSize.width, rotatedSize.height);
CGContextRotateCTM(context, radian);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, CGRectMake(-img.size.width, -img.size.height, img.size.width, img.size.height), img.CGImage);
UIImage *returnImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return returnImg;
}
I am drawing a circle in this way:
CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(contextRef, 2.0);
//CGContextSetRGBFillColor(contextRef, 0, 0, 1.0, 1.0);
//CGContextSetRGBStrokeColor(contextRef, 0, 0, 1.0, 1.0);
CGContextSetStrokeColorWithColor(contextRef, [color CGColor]);
CGRect circlePoint = (CGRectMake(coordsFinal.x, coordsFinal.y, 50.0, 50.0));
CGContextFillEllipseInRect(contextRef, circlePoint);
I wanted to know how can Make the inside of the circle empty so that I can see what there is behind it.
You mean you only want the outline? Use CGContextStrokeEllipseInRect in that case.
CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(contextRef, 2.0);
CGContextSetStrokeColorWithColor(contextRef, [color CGColor]);
CGRect circlePoint = (CGRectMake(coordsFinal.x, coordsFinal.y, 50.0, 50.0));
CGContextStrokeEllipseInRect(contextRef, circlePoint);
Swift 3
let currentContext = UIGraphicsGetCurrentContext()
currentContext?.setLineWidth(2.0)
currentContext?.setFillColor(color.CGColor)
let circleRect = CGRect(x: coordsFinal.x, y: coordsFinal.y, width: 50.0, height: 50.0)
currentContext?.strokeEllipse(in: circleRect)
I want to recreate a tab bar but I stumbled on this problem. As you can see in the images below my current (right image) selected tab bar item is a lot less crisp or sharper than the one from the UITabBar. Notice the small 1 point border around the icon in the left (which I don't know how to do) as well as the gradient inside the icon which is a lot noticeable in mine. I already thought of Core Graphics and Core Images Filters as possible approaches but can't seem to get that effect. I found an older thread which is part of what I want but the answer doesn't seem to work for me and requires a manual loop through the pixels of the image (which I don't know if it is to be desired). Can someone help me?
This is the code I'm currently using which, btw, you're welcome to correct some mistakes if you see any because I'm starting with Core Graphics:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextSaveGState(context);
{
/* Adjust for different coordinate systems from UIKit and Core Graphics and center the image */
CGContextTranslateCTM(context, self.bounds.size.width/2.0 - self.image.size.width/2.0, self.bounds.size.height - self.bounds.size.height/2.0 + self.image.size.height/2.0);
CGContextScaleCTM(context, 1.0f, -1.0f);
CGRect rect = CGRectMake(0, 0, self.image.size.width, self.image.size.height);
/* Add a drop shadow */
UIColor *dropShadowColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.8f];
CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 5, dropShadowColor.CGColor);
/* Draw the original image */
CGContextDrawImage(context, rect, self.image.CGImage);
/* Clip to the original image, so that we only draw the shadows on the
inside of the image but nothing outside. */
CGContextClipToMask(context, rect, self.image.CGImage);
if(self.isSelected){
/* draw background image */
CGImageRef background = [UIImage imageNamed:#"UITabBarBlueGradient"].CGImage;
CGContextDrawImage(context, rect, background);
}
else{
/* draw background color to unselected items */
CGColorRef backgroundColor = [UIColor colorWithRed:95/255.0 green:95/255.0 blue:95/255.0 alpha:1].CGColor;
CGContextSetFillColorWithColor(context, backgroundColor);
CGContextFillRect(context, rect);
/* location of the gradient's colors */
CGFloat locations[] = { 0.0, 1.0 };
NSArray *colors = [NSArray arrayWithObjects:(id)[UIColor colorWithRed:1 green:1 blue:1 alpha:0].CGColor, (id)[UIColor colorWithRed:1 green:1 blue:1 alpha:0.6].CGColor, nil];
/* create the gradient with colors and locations */
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,(__bridge CFArrayRef) colors, locations);
{
/* start and end points of the gradient */
CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
/* draw gradient */
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
}
CGGradientRelease(gradient);
}
}
CGContextRestoreGState(context);
CGColorSpaceRelease(colorSpace);
}
I'm working on this too, an optimization you can probably make is instead of rendering the UIImage each time drawrect is called you can save off the UIImage objects in an ivar and just update a UIImageView.image property to display them.
I'm generating my image with the "shine" like this:
(plus_icon.png is a 30 x 30 image with a 4 px wide cross occupying the entire thing in black on a transparent background: which renders like in imageView 2 and 4 like this:
-(UIImage *)tabBarImage{
UIGraphicsBeginImageContext(CGSizeMake(60, 60));
UIImage *image = [UIImage imageNamed:#"plus_icon"];
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(ctx, [[UIColor clearColor] CGColor]);
CGContextFillRect(ctx, CGRectMake(0, 0, 60, 60));
CGRect imageRect = CGRectMake(15, 15, 30, 30);
CGContextDrawImage(ctx, imageRect, [image CGImage]);
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
-(UIImage *)sourceImage{
UIGraphicsBeginImageContext(CGSizeMake(60.0, 60.0));
CGContextRef context = UIGraphicsGetCurrentContext();
size_t num_locations = 2;
CGFloat locations[2] = { 0.3, 1.0 };
CGFloat components[8] = {NC(72), NC(122), NC(229), 1.0, NC(110), NC(202), NC(255), 1.0 };
CGColorSpaceRef cspace;
CGGradientRef gradient;
cspace = CGColorSpaceCreateDeviceRGB();
gradient = CGGradientCreateWithColorComponents (cspace, components, locations, num_locations);
CGPoint sPoint = CGPointMake(0.0, 15.0);
CGPoint ePoint = CGPointMake(0.0, 45.0);
CGContextDrawLinearGradient (context, gradient, sPoint, ePoint, kCGGradientDrawsBeforeStartLocation| kCGGradientDrawsAfterEndLocation);
CGGradientRelease(gradient);
CGColorSpaceRelease(cspace);
[self addShineToContext:context];
UIImage * image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
-(void)addShineToContext:(CGContextRef) context{
CGContextSaveGState(context);
size_t num_locations = 2;
CGFloat locations[2] = { 0.3, 0.7};
CGFloat components[8] = {1.0, 1.0, 1.0, 0.8, 1.0, 1.0, 1.0, 0.0};//{0.82, 0.82, 0.82, 0.4, 0.92, 0.92, 0.92, .8 };
CGColorSpaceRef cspace;
CGGradientRef gradient;
cspace = CGColorSpaceCreateDeviceRGB();
gradient = CGGradientCreateWithColorComponents (cspace, components, locations, num_locations);
CGPoint sPoint = CGPointMake(25.0f, 15.0);
CGPoint ePoint = CGPointMake(35.0f, 44.0f);
[self addShineClip:context];
CGContextDrawLinearGradient(context, gradient, sPoint, ePoint, kCGGradientDrawsBeforeStartLocation);
// CGContextSetFillColorWithColor(context, [[UIColor redColor] CGColor]);
// CGContextFillRect(context, CGRectMake(15,15, 30, 30));
CGColorSpaceRelease(cspace);
CGGradientRelease(gradient);
CGContextRestoreGState(context);
}
-(void)addShineClip:(CGContextRef)context{
CGContextMoveToPoint(context, 15, 35);
CGContextAddQuadCurveToPoint(context, 25, 30, 45, 28);
CGContextAddLineToPoint(context, 45, 15);
CGContextAddLineToPoint(context, 15, 15);
CGContextClosePath(context);
CGContextClip(context);
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.imageView1.image = [self compositeOverSlate:[self drawTabBarOverSourceWithBlend:kCGBlendModeSourceIn]];
self.imageView2.image = [self compositeOverSlate:[self drawTabBarOverSourceWithBlend:kCGBlendModeDestinationIn]];
self.imageView3.image = [self compositeOverSlate:[self drawTabBarOverSourceWithBlend:kCGBlendModeSourceAtop]];
self.imageView4.image = [self compositeOverSlate:[self drawTabBarOverSourceWithBlend:kCGBlendModeDestinationAtop]];
}
-(UIImage *)compositeOverSlate:(UIImage *)image{
UIGraphicsBeginImageContext(image.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGRect imageRect = CGRectMake(0, 0, 0, 0);
imageRect.size = image.size;
CGContextSetFillColorWithColor(ctx, [[UIColor darkGrayColor] CGColor]);
CGContextFillRect(ctx, imageRect);
CGContextSetShadow(ctx, CGSizeMake(-1.0, 2.0), .5);
CGContextDrawImage(ctx, imageRect, [image CGImage]);
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return result;
}
-(UIImage *)drawTabBarOverSourceWithBlend:(CGBlendMode)blendMode{
UIGraphicsBeginImageContext(CGSizeMake(60,60));
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextDrawImage(ctx, CGRectMake(0, 0, 60.0, 60.0), [[self sourceImage] CGImage]);
CGContextSetBlendMode(ctx, blendMode);
CGContextDrawImage(ctx, CGRectMake(0, 0, 60.0, 60.0), [[self tabBarImage] CGImage]);
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return result;
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
but I don't have the border outline cracked yet, but will update if I do crack it.