Using Core Graphics Code from iDraw in Xcode

Why would you want to grab some core graphics code while using iDraw and paste it into Xcode? First, its a different workflow. An alternative is to export an image from iDraw (maybe as a .png) and then create a UIImage in Xcode and bring in the your .png file. This has the problem of image files being part of your Xcode resources and you may not want this. Second, you can add code to your imported core graphics code and do some things easily, i.e. generate various button states. A third reason is that core graphics code executes very rapidly and this may be important to your application.

There are, of course, disadvantages to using iDraw’s generated core graphics code in Xcode. This technology appears to be in its infancy. Hence, exactly how to do this, and what are the various use cases, remain to be documented. iDraw has kindly provided a video to help in this process: https://www.youtube.com/watch?v=FvElfya_hSA

We will do something simple to get started. First, we generate a colored circle in iDraw. Second, we will copy the core graphics code for this and paste it into Xcode. In Xcode we create a graphics context, run the core graphics code, and retrieve an image of our colored circle from the graphics context.

Drawing the Colored Circle in iDraw

Go to iDraw’s preferences and click on the import/export tab. Choose the Swift language for Core Graphics code. Set your Fill color to what you want and your Stroke to none. Select the ellipse tool. Choose the properties inspector (the ruler) from the tab bar located in the upper-right. Choose the Geometry properties by clicking on the first item in the tab bar (again a ruler) below the word properties.

Now draw your ellipse. Fill in the values for the X, Y positions and the width and height as 180, 300, 100, 100. Use the Move tool to select your circle. We now want to get the core graphics code for the circle. First, set its top-left (x, y) to 0, 0. The reason for this is that graphics contexts begin at 0, 0. We can move it where we want it (x=180, y=300) in Xcode.

Go to the Editor Menu > Copy As and select Core Graphics Code. You can now paste the Core Graphics Code into Xcode!

Working in Xcode

Create an iOS Single View Application in Xcode. Choose the Swift programming language. Put ViewController.swift in the editor.

override func viewDidLoad() {
super.viewDidLoad()
drawCircle()
}

Here is the code for func drawCircle()

func drawCircle() {
UIGraphicsBeginImageContextWithOptions (CGSize(width:100, height:100), false, 0.0) // false — not opaque; 0.0 — no scaling
let ctx = UIGraphicsGetCurrentContext()
/* Shape */
let pathRef = CGPathCreateMutable()
// draws four 90 degree arcs
CGPathMoveToPoint(pathRef, nil, 50, 100)
CGPathAddCurveToPoint(pathRef, nil, 22.386, 100, 0, 77.614, 0, 50)
CGPathAddCurveToPoint(pathRef, nil, 0, 22.386, 22.386, 0, 50, 0)
CGPathAddCurveToPoint(pathRef, nil, 77.614, 0, 100, 22.386, 100, 50)
CGPathAddCurveToPoint(pathRef, nil, 100, 77.614, 77.614, 100, 50, 100)
CGPathCloseSubpath(pathRef)
//CGContextSetRGBFillColor(ctx, 0.341, 0.855, 0.835, 1) old way
CGContextSetFillColorWithColor(ctx, UIColor(red: 0.341, green: 0.855, blue: 0.835, alpha: 1.0).CGColor)
CGContextAddPath(ctx, pathRef)
CGContextFillPath(ctx)
// Returns an image based on the contents of the current bitmap-based graphics context.
let img = UIGraphicsGetImageFromCurrentImageContext()
let imageView = UIImageView(image: img!)
// place origin of frame at 180, 300
imageView.frame = CGRect(x: 180, y: 300, width: 100, height: 100)
self.view.addSubview(imageView)
UIGraphicsEndImageContext()
}
}

I have also posted this code at: http://snipplr.com/view/94961/idrawcoregraphics1/

That’s it. Just compile and run.

Reference:
https://www.youtube.com/watch?v=SJtEJOoNvtI

Show your support

Clapping shows how much you appreciated Ron Mourant’s story.