Getting blur stroked while drawing in Cglayer - ios

I am working with a drawing app where I draw inside CGlayers and then draw on grahics context, but I drawing is getting blurred.
Here is my code
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();//Get a reference to current context(The context to draw)
NSLog(#"Size1%#", NSStringFromCGRect(self.bounds));
if(self.currentDrawingLayer == nil)
{
self.currentDrawingLayer = CGLayerCreateWithContext(context, self.bounds.size, NULL);
}
CGPoint mid1 = midPoint(m_previousPoint1, m_previousPoint2);
CGPoint mid2 = midPoint(m_currentPoint, m_previousPoint1);
CGContextRef layerContext = CGLayerGetContext(self.currentDrawingLayer);
// UIGraphicsBeginImageContextWithOptions(self.bounds.size,YES,0.0);
CGContextSetLineCap(layerContext, kCGLineCapRound);
CGContextSetBlendMode(layerContext, kCGBlendModeNormal);
CGContextSetLineJoin(layerContext, kCGLineJoinRound);
CGContextSetLineWidth(layerContext, self.lineWidth);
CGContextSetStrokeColorWithColor(layerContext, self.lineColor.CGColor);
CGContextSetShouldAntialias(layerContext, YES);
CGContextSetAllowsAntialiasing(layerContext, YES);
CGContextSetAlpha(layerContext, self.lineAlpha);
CGContextSetFlatness(layerContext, 1.0f);
CGContextBeginPath(layerContext);
CGContextMoveToPoint(layerContext, mid1.x, mid1.y);//Position the current point
CGContextAddQuadCurveToPoint(layerContext, m_previousPoint1.x, m_previousPoint1.y, mid2.x, mid2.y);
CGContextStrokePath(layerContext);//paints(fills) the line along the current path.
CGContextDrawLayerInRect(context, self.bounds, self.currentDrawingLayer);
}
I get blurr strokes with this code, according to docs, whenever we create the CGlayer with graphicsContext, they say that it will provide the resolution of the device, but then why I am getting blur lines.
Here is the image of blur lines
Regards
Ranjit

Substitute this in your code where you create your CGLayer:
if(self.currentDrawingLayer == nil)
{
CGFloat scale = self.contentScaleFactor;
CGRect bounds = CGRectMake(0, 0, self.bounds.size.width * scale, self.bounds.size.height * scale);
CGLayerRef layer = CGLayerCreateWithContext(context, bounds.size, NULL);
CGContextRef layerContext = CGLayerGetContext(layer);
CGContextScaleCTM(layerContext, scale, scale);
self.currentDrawingLayer = layer;
}

Related

How to rotate and crop iOS CGImage from file

I'm having some trouble with image rotation in iOS. I'm performing some image manipulation in the background of an app... I would like to rotate and crop the images. Currently, the rotation seems to be working correctly, but no matter what I have tried, the crop is off. I have performed these same operations in GIMP and found that the images crop correctly, so I believe it has something to do with the Quartz coordinate system. Furthermore, the greater the radians in either direction, the further "off" the crop becomes. Here is the code I am using to rotate and crop:
+(UIImage*)imageWithImageFile:(NSString*)imageFile
radians:(float)radians
imageSize:(CGSize)imageSize
croppedToRect:(CGRect)croppedToRect
{
UIImage* returnImg = nil;
#autoreleasepool {
CGDataProviderRef dataProvider = CGDataProviderCreateWithFilename([imageFile UTF8String]);
CGImageRef image = CGImageCreateWithJPEGDataProvider(dataProvider, NULL, YES, kCGRenderingIntentDefault);
UIGraphicsBeginImageContext(croppedToRect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetShouldAntialias(context, YES);
CGContextSetAllowsAntialiasing(context, YES);
CGContextSetInterpolationQuality(context, kCGInterpolationHigh);
CGContextTranslateCTM(context, imageSize.width * 0.5,
imageSize.height * 0.5);
CGContextRotateCTM(context, radians);
CGContextTranslateCTM(context, -imageSize.width * 0.5, -imageSize.height * 0.5);
//Translate and scale upside-down to compensate for Quartz's inverted coordinate system
CGContextTranslateCTM(context, 0.0, imageSize.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, (CGRect) {croppedToRect.origin, imageSize}, image);
returnImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGDataProviderRelease(dataProvider);
CGImageRelease(image);
}
return returnImg;
}
I believe this is the solution: Since the context is a different size and has a different origin inside the original image, you must offset the point where you "paint" the image on the context (canvas for those of you more visual people). You first find the origin of the centered context, then compare it to the origin of the desired crop. The difference (or offset) can be subtracted from the center point of the context, which will offset the point at which the image is painted.
CGDataProviderRef dataProvider = CGDataProviderCreateWithFilename([imageFile UTF8String]);
CGImageRef image = CGImageCreateWithJPEGDataProvider(dataProvider, NULL, YES, kCGRenderingIntentDefault);
UIGraphicsBeginImageContext(croppedToRect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGPoint contextCenter = CGPointMake(croppedToRect.size.width * 0.5f,
croppedToRect.size.height * 0.5f);
CGPoint centerOfImage = CGPointMake(imageSize.width * 0.5f,
imageSize.height * 0.5f);
CGPoint contextOriginInImage = CGPointMake(centerOfImage.x - contextCenter.x,
centerOfImage.y - contextCenter.y);
CGPoint desiredOrigin = croppedToRect.origin;
CGPoint offset = CGPointMake(desiredOrigin.x - contextOriginInImage.x,
desiredOrigin.y - contextOriginInImage.y);
CGContextTranslateCTM(context, contextCenter.x - offset.x, contextCenter.y - offset.y);
CGContextRotateCTM(context, radians);
CGContextScaleCTM(context, 1.0f, -1.0f);
CGContextDrawImage(context, CGRectMake(-imageSize.width * 0.5f,
-imageSize.height * 0.5f,
imageSize.width,
imageSize.height), image);
returnImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGDataProviderRelease(dataProvider);
CGImageRelease(image);

iOS drawing over UIImage

I need to draw over an image graffiti style, as below. My problem is that I need to have the capability to erase the lines I've drawn without erasing sections of the UIImage. At the moment I'm considering using one image for the background image and another image, with a transparent background, for the graffiti drawing, then combining the two once the drawing is complete. Is there a better way?
- (void)drawRect:(CGRect)rect
{
//Get drawing context
CGContextRef context = UIGraphicsGetCurrentContext();
//Create drawing layer if required
if(drawingLayer == nil)
{
drawingLayer = CGLayerCreateWithContext(context, bounds.size, NULL);
CGContextRef layerContext = CGLayerGetContext(drawingLayer);
CGContextScaleCTM(layerContext, scale, scale);
self.viewRect = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.width);
NSLog(#"%f %f",self.viewRect.size.width,self.viewRect.size.width);
}
//Draw paths from array
int arrayCount = [pathArray count];
for(int i = 0; i < arrayCount; i++)
{
path = [pathArray objectAtIndex:i];
UIBezierPath *bezierPath = path.bezierPath;
CGContextRef layerContext = CGLayerGetContext(drawingLayer);
CGContextAddPath(layerContext, bezierPath.CGPath);
CGContextSetLineWidth(layerContext, path.width);
CGContextSetStrokeColorWithColor(layerContext, path.color.CGColor);
CGContextSetLineCap(layerContext, kCGLineCapRound);
if(activeColor == 4)
{
CGContextSetBlendMode(layerContext, kCGBlendModeClear);
}
else
{
CGContextSetBlendMode(layerContext, kCGBlendModeNormal);
}
CGContextStrokePath(layerContext);
}
if (loadedImage == NO)
{
loadedImage = YES;
CGContextRef layerContext = CGLayerGetContext(drawingLayer);
CGContextSaveGState(layerContext);
UIGraphicsBeginImageContext (self.viewRect.size);
CGContextTranslateCTM(layerContext, 0, self.viewRect.size.height);
CGContextScaleCTM(layerContext, 1.0, -1.0);
CGContextDrawImage(layerContext, self.viewRect, self.image.CGImage);
UIGraphicsEndImageContext();
CGContextRestoreGState(layerContext);
}
[pathArray removeAllObjects];
CGContextDrawLayerInRect(context, self.viewRect, drawingLayer);
}

Memory issues with CGlayer

I am working CGlayers for drawing. I have implemented the drawing part, the drawingView(canvas) where the user will draw is dynamic, what I mean by this is, user can increase/decrease height of the drawingView(Canvas)
For example by default size - 500*200
When user clicks on expand button - 500*300
So here is my function when user expands the canvas,
- (void)IncreaseCanavasSize
{
CGContextRef layerContext1 = CGLayerGetContext(permanentDrawingLayer );
CGContextDrawLayerInRect(layerContext1, rectSize, newDrawingLayer);
rectSize = self.bounds;
CGFloat scale = self.contentScaleFactor;
CGRect bounds = CGRectMake(0, 0, self.bounds.size.width * scale, self.bounds.size.height * scale);
CGLayerRef layer = CGLayerCreateWithContext(layerContext1, bounds.size, NULL);
CGContextRef layerContext = CGLayerGetContext(layer);
CGContextScaleCTM(layerContext, scale, scale);
[self setNewDrawingLayer:layer];
CGLayerRelease(layer);
CGContextDrawLayerInRect(layerContext, self.bounds, permanentDrawingLayer);
permanentDrawingLayer = nil;
}
So let me explain what I am doing in the above code, I am creating a newLayer with size before it is increased, and then transfer the previousDrawing from "*permanentDrawingLayer" to this "newDrawingLayer" and making "permanentDrawing" nil*
So Whenever I draw, I draw into permanentDrawingLayer, here is my drawRect method
- (void)drawRect:(CGRect)rect
{
if(permanentDrawingLayer == nil)
{
CGFloat scale = self.contentScaleFactor;
CGRect bounds = CGRectMake(0, 0, self.bounds.size.width * scale, self.bounds.size.height * scale);
CGLayerRef layer = CGLayerCreateWithContext(context, bounds.size, NULL);
CGContextRef layerContext = CGLayerGetContext(layer);
CGContextScaleCTM(layerContext, scale, scale);
[self setPermanentDrawingLayer:layer];
CGLayerRelease(layer);
}
CGContextRef layerContext = CGLayerGetContext(permanentDrawingLayer);
CGContextBeginPath(layerContext);
CGContextAddPath(layerContext, mutablePath);
CGContextSetLineWidth(layerContext, self.lineWidth);
CGContextSetLineCap(layerContext, kCGLineCapRound);
CGContextSetLineJoin(layerContext, kCGLineJoinRound);
CGContextSetAllowsAntialiasing(layerContext, YES);
CGContextSetShouldAntialias(layerContext, YES);
CGContextSetStrokeColorWithColor(layerContext, self.lineColor.CGColor);
CGContextSetFillColorWithColor(layerContext, self.lineColor.CGColor);
CGContextSetBlendMode(layerContext,kCGBlendModeNormal);
CGContextStrokePath(layerContext);
CGContextDrawLayerInRect(context,rectSize, newDrawingLayer);
CGContextDrawLayerInRect(context, self.bounds, permanentDrawingLayer);
}
Here you can see, I draw newDrawingLayer with rectSize, and permanetDrawingLayer with newSize, So whenever, I draw on a canvas, if user has increased the size, the newDrawingLayer will draw that, and new drawing whatever user does will be done in permanentDrawingLayer. Hope it is clear.
Now here are my problems
1) Memory spikes to 10MB, when I drawSomething and increase the canvasSize, so if I do this action always you can imagine, how fast my app will terminate due to memory pressure.
2) What I saw was if I comment the Line " permanentDrawingLayer = nil" in function - "IncreaseCanavasSize", then memory doesnt spikes up, but if I dont do that, then when I draw next time, then Layer with newSize will not be created and I will get duplicate drawings.
So I need all your help
Your permanentDrawingLayer is a CGLayerRef so setting it to NULL, don't release it.
You need to call CGLayerRelease(permanentDrawingLayer) before setting it to NULL.
- (void)IncreaseCanavasSize
{
CGContextRef layerContext1 = CGLayerGetContext(permanentDrawingLayer );
CGContextDrawLayerInRect(layerContext1, rectSize, newDrawingLayer);
rectSize = self.bounds;
CGFloat scale = self.contentScaleFactor;
CGRect bounds = CGRectMake(0, 0, self.bounds.size.width * scale, self.bounds.size.height * scale);
CGLayerRef layer = CGLayerCreateWithContext(layerContext1, bounds.size, NULL);
CGContextRef layerContext = CGLayerGetContext(layer);
CGContextScaleCTM(layerContext, scale, scale);
[self setNewDrawingLayer:layer];
CGLayerRelease(layer);
CGContextDrawLayerInRect(layerContext, self.bounds, permanentDrawingLayer);
CGLayerRelease(permanentDrawingLayer);
permanentDrawingLayer = NULL;
}
Also if your method -setPermanentDrawingLayer: looks like the method -setCurrentDrawingLayer: in your previous question.
In -IncreaseCanavasSize You can simply replace the line permanentDrawingLayer = nil; with [self setPermanentDrawingLayer:NULL];, then it will release the CGLayerRef and set it to NULL.

Drawing getting pixelated in iOS

I am working on a drawing application, I am drawing into CGlayers, I am creating a CGlayer this way
-(void)drawRect
{
if(self.DrawingLayer == nil)
{
CGFloat scale = self.contentScaleFactor;
CGRect bounds = CGRectMake(0, 0, self.bounds.size.width * scale, self.bounds.size.height * scale);
CGLayerRef layer = CGLayerCreateWithContext(context, bounds.size, NULL);
CGContextRef layerContext = CGLayerGetContext(layer);
CGContextScaleCTM(layerContext, scale, scale);
self.DrawingLayer = layer;
}
CGContextDrawLayerInRect(context,rectSize, self.newDrawingLayer);
CGContextDrawLayerInRect(context, self.bounds, self.DrawingLayer );
}
Now as my drawing Canvas can be dynamically increased/decreased, whenever user performs any of the actions , I create one more layer and store the previous drawing on to the new CGlayer
this way
-(void)canvasIncreased
{
rectSize = self.bounds
CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat scale = self.contentScaleFactor;
CGRect bounds = CGRectMake(0, 0, self.bounds.size.width * scale, self.bounds.size.height * scale);
CGLayerRef layer = CGLayerCreateWithContext(context, bounds.size, NULL);
CGContextRef layerContext = CGLayerGetContext(layer);
CGContextScaleCTM(layerContext, scale, scale);
self.newDrawingLayer = layer;
CGContextDrawLayerInRect(layerContext, self.bounds, self.DrawingLayer);
self.DrawingLayer = nil;
}
Everything works fine, but what happens is that whenever I draw something then increase canvas size, the again draw, then increase canvas size, then again draw and so on,
then, my previous drawing is getting pixelated, here is the image

Memory issues with Core Graphics

I draw a table "by hand", by using primitives of Core Graphics.
The view is re-draw when I click a button.
The problem is that when I profile the code in Instruments, the VM Regions keep increase, while Heap and Anonymous VM oscillate (and I would expect it).
And the details about CoreAnimation:
An excerpt of my drawRect:
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect paperRect = CGRectMake(self.bounds.origin.x+hourLabelSize+self.marginX,
10 +self.cellBorder ,
self.bounds.size.width,
self.cellHeight * 48
);
// custom shadow
drawLinearGradient(context, paperRect, whiteColor.CGColor, lightGrayColor.CGColor);
CGContextSaveGState(context);
CGFloat outerMargin = 5.0f;
CGFloat eventSize;
// Draw table
CGRect hourRect;
CGRect outerRect;
CGMutablePathRef outerPath;
CGRect strokeRect;
CGRect rowRect;
for (int j=0; j < 7;j++)
{
for (int i=0; i < numberOfRows; i++)
{
// Odd index means we are in the half of an hour
if ( (i%2) == 0)
{
[hour setString:[NSString stringWithFormat:#"%d:00",(int)floor(i/2)]];
// Draw box around hours //
if (j == 0 && i >0)
{
CGContextSaveGState(context);
hourRect = CGRectMake(5, i*cellHeight-5, hourLabelSize, 28);
outerRect = CGRectInset(hourRect, outerMargin, outerMargin);
outerPath = newRoundedRectForRect(outerRect, 6.0);
CGContextAddPath(context, outerPath);
CFRelease(outerPath); // <--- This solve the leak!!
// Draw gradient
strokeRect = CGRectInset(hourRect, 5.0, 5.0);
CGContextSetStrokeColorWithColor(context, boxColor.CGColor);
CGContextSetLineWidth(context, 1.0);
CGContextStrokeRect(context, strokeRect);
drawLinearGradient(context, strokeRect, whiteColor.CGColor, lightGrayColor.CGColor);
CGContextRestoreGState(context);
}
}
else
{
[hour setString:[NSString stringWithFormat:#"%d:30",(int)floor(i/2)]];
}
// Draw hours
if (j == 0 && i > 0)
[hour drawInRect:CGRectMake(0, i*cellHeight, hourLabelSize+10, 26) withFont:font lineBreakMode:NSLineBreakByClipping alignment:NSTextAlignmentCenter];
// Draw row
CGContextBeginPath(context);
CGContextSetStrokeColorWithColor(context, boxColor.CGColor);
CGContextSetLineWidth(context, self.cellBorder);
rowRect = CGRectMake(j*cellWidth + hourLabelSize +self. marginX - self.cellBorder/2, i*cellHeight+10 + self.cellBorder / 2, cellWidth , cellHeight);
CGContextStrokeRect(context, rowRect);
} //
CGContextFlush(context);
CGContextRestoreGState(context);
The first thing I do not understand is why I see VM:CoreAnimation. CoreGraphics is part of Core Animation?
Secondly, what I shall watch as syntoms of bad allocation: VM Regions, XCode measurements or Head and Anonymous?
Regards!
[EDIT]
The createRoundedRect is as follows
CGMutablePathRef newRoundedRectForRect(CGRect rect, CGFloat radius)
{
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPathAddArcToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMinY(rect), CGRectGetMaxX(rect), CGRectGetMaxY(rect), radius);
CGPathAddArcToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMaxY(rect), radius);
CGPathAddArcToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMinY(rect), radius);
CGPathAddArcToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect), CGRectGetMaxX(rect), CGRectGetMinY(rect), radius);
CGPathCloseSubpath(path);
return path;
}:
and the drawLineGradient.m :
void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef endColor)
{
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat locations[] = { 0.0, 1.0 };
NSArray *colors = #[(__bridge id) startColor, (__bridge id) endColor];
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);
CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
CGContextSaveGState(context);
CGContextAddRect(context, rect);
CGContextClip(context);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
CGContextRestoreGState(context);
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
colors = nil;
}
The reason you see core animation is because all iOS views are layer-backed views.
The reason for your leak is that you release the path.
ARC does not manage Core Foundation objects.

Resources