Objective C - Create UIImage from this PaintCode code

Question

I am using PaintCode and it has generated some code to create a shape with text overlayed. I want to use the code to parse a string and generate a UIImage that I can save to the camera roll or share on FB, but I am struggling to generate the UIImage. Any help would be great!

Here is the code:

- (void)drawShareImageWithText: (NSString*)text;
{
//// Color Declarations
UIColor* questionText = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1];

//// Bezier Drawing
UIBezierPath* bezierPath = UIBezierPath.bezierPath;
[bezierPath moveToPoint: CGPointMake(42.46, 0.09)];
[bezierPath addCurveToPoint: CGPointMake(53.37, 11) controlPoint1: CGPointMake(42.46, 0.09) controlPoint2: CGPointMake(47.66, 5.3)];
[bezierPath addLineToPoint: CGPointMake(255.6, 11)];
[bezierPath addCurveToPoint: CGPointMake(267.62, 11.92) controlPoint1: CGPointMake(261.76, 11) controlPoint2: CGPointMake(264.84, 11)];
[bezierPath addLineToPoint: CGPointMake(268.16, 12.05)];
[bezierPath addCurveToPoint: CGPointMake(275.95, 19.84) controlPoint1: CGPointMake(271.78, 13.37) controlPoint2: CGPointMake(274.63, 16.22)];
[bezierPath addCurveToPoint: CGPointMake(277, 32.4) controlPoint1: CGPointMake(277, 23.16) controlPoint2: CGPointMake(277, 26.24)];
[bezierPath addLineToPoint: CGPointMake(277, 148.6)];
[bezierPath addCurveToPoint: CGPointMake(276.08, 160.62) controlPoint1: CGPointMake(277, 154.76) controlPoint2: CGPointMake(277, 157.84)];
[bezierPath addLineToPoint: CGPointMake(275.95, 161.16)];
[bezierPath addCurveToPoint: CGPointMake(268.16, 168.95) controlPoint1: CGPointMake(274.63, 164.78) controlPoint2: CGPointMake(271.78, 167.63)];
[bezierPath addCurveToPoint: CGPointMake(255.6, 170) controlPoint1: CGPointMake(264.84, 170) controlPoint2: CGPointMake(261.76, 170)];
[bezierPath addLineToPoint: CGPointMake(21.4, 170)];
[bezierPath addCurveToPoint: CGPointMake(9.38, 169.08) controlPoint1: CGPointMake(15.24, 170) controlPoint2: CGPointMake(12.16, 170)];
[bezierPath addLineToPoint: CGPointMake(8.84, 168.95)];
[bezierPath addCurveToPoint: CGPointMake(1.05, 161.16) controlPoint1: CGPointMake(5.22, 167.63) controlPoint2: CGPointMake(2.37, 164.78)];
[bezierPath addCurveToPoint: CGPointMake(0, 148.6) controlPoint1: CGPointMake(0, 157.84) controlPoint2: CGPointMake(0, 154.76)];
[bezierPath addLineToPoint: CGPointMake(0, 32.4)];
[bezierPath addCurveToPoint: CGPointMake(0.92, 20.38) controlPoint1: CGPointMake(0, 26.24) controlPoint2: CGPointMake(0, 23.16)];
[bezierPath addLineToPoint: CGPointMake(1.05, 19.84)];
[bezierPath addCurveToPoint: CGPointMake(8.84, 12.05) controlPoint1: CGPointMake(2.37, 16.22) controlPoint2: CGPointMake(5.22, 13.37)];
[bezierPath addCurveToPoint: CGPointMake(21.4, 11) controlPoint1: CGPointMake(12.16, 11) controlPoint2: CGPointMake(15.24, 11)];
[bezierPath addLineToPoint: CGPointMake(31.54, 11)];
[bezierPath addCurveToPoint: CGPointMake(42.46, 0.09) controlPoint1: CGPointMake(37.25, 5.3) controlPoint2: CGPointMake(42.46, 0.09)];
[bezierPath closePath];
[StyleKit.Color1 setFill];
[bezierPath fill];


//// shareContent Drawing
CGRect shareContentRect = CGRectMake(15, 26, 247, 136.03);
NSMutableParagraphStyle* shareContentStyle = NSMutableParagraphStyle.defaultParagraphStyle.mutableCopy;
shareContentStyle.alignment = NSTextAlignmentCenter;

NSDictionary* shareContentFontAttributes = @{NSFontAttributeName: [UIFont fontWithName: @"Helvetica" size: 15], NSForegroundColorAttributeName: questionText, NSParagraphStyleAttributeName: shareContentStyle};

[text drawInRect: CGRectOffset(shareContentRect, 0, (CGRectGetHeight(shareContentRect) - [text boundingRectWithSize: shareContentRect.size options: NSStringDrawingUsesLineFragmentOrigin attributes: shareContentFontAttributes context: nil].size.height) / 2) withAttributes: shareContentFontAttributes];
}

Pyrethrum

which paint code version u r using? – Sodamide

then i believe u should be able to do this. As it also provides functions to get the image apart from giving you the code for CGRect. refer to this tutorial youtube.com/watch?v=QLoJrgVg8Ok#t=375 using image methods and variables you will get there – Sodamide

I have used a StyleKit call to draw the code, using algal's code below. Thanks – Pyrethrum

The result is a little blurry though... – Pyrethrum

see if the image methods works, then? – Sodamide

No. Still blurry. My code now looks like this: UIImage * finalImage = [StyleKit imageOfXXX]; return finalImage; I think the issue must be elsewhere. I'll keep looking – Pyrethrum

do you know if paintcode's code scales itself according to its container? Like if u got some code for UIButton, if we keep on changing the size of the button, will the corresponding drawing code scales automatically or not? – Sodamide

Create a very big image in paintcode and then use it – Sodamide

Answer 1

All of this drawing code is generated under the expectation that it will be run within a graphics context created and managed by UIKit.

This is automatically the case within a UIView's drawRect method. But you want to generate a UIImage, so you need to setup a temporary graphics context just for that.

The general approach is as follows:

// specify size of the image
CGRect imageRect = CGRectMake(0,0,100,100);
// create the graphics context
UIGraphicsBeginImageContextWithOptions(imageRect.size,NO,0.0);
// insert calls to your drawing code here, to draw into the context
// ...
// save the image from the implicit context into an image 
UIImage * finalImage = UIGraphicsGetImageFromCurrentImageContext();
// cleanup
UIGraphicsEndImageContext();

Erica Sadun's book on practical UIKit drawing is probably the best one-stop resource for this sort of thing.

Equivalent in Swift (language version 1.2):

// specify size of the image
let imageRect:CGRect = CGRectMake(0,0,100,100)
// create the graphics context
UIGraphicsBeginImageContextWithOptions(imageRect.size, false, 0)
// insert calls to your drawing code here, to draw into the context
// ...
// save the image from the implicit context into an image
let finalImage = UIGraphicsGetImageFromCurrentImageContext()
// cleanup
UIGraphicsEndImageContext()

Swift 4+ Version:

// specify size of the image
let imageSize = CGSize(width: 100, height: 100)
// create the graphics context
UIGraphicsBeginImageContextWithOptions(imageSize, false, 0)
// insert calls to your drawing code here, to draw into the context
// ...
// save the image from the implicit context into an image
let finalImage = UIGraphicsGetImageFromCurrentImageContext()
// cleanup
UIGraphicsEndImageContext()

Epiphora

Thanks this is great. PaintCode isn't really plug and play. – Elder

I'd say PaintCode is a very helpful tool for learning CoreGraphics, or for speeding up your work with CoreGraphics, but I find it hard to imagine a situation where it could be a substitute for understanding CoreGraphics. – Epiphora