1

I am experimenting with PaintCode. As an example, I've imported an abstract Illustrator drawing file, which has produced the below bezier Swift code.

On my storyboard I have an UIImageView named exampleImageView that I want to display the PaintCode code and have the ability to scale the resulting image like a vector graphic at different sizes, e.g. 1x, 2.5x 5x etc (i.e. smooth non pixellated lines and curves).

Questions:

1 - How do I display the below code as an image in an UIImageView named exampleImageView in Xcode?

2 - How do I display the below code in an UIView named exampleView in Xcode?

3 - Is it possible to scale up or down the below code (i.e. like a vector graphic), and if so, how in Xcode?

Expected image:

enter image description here

PaintCode code:

//// General Declarations
let context = UIGraphicsGetCurrentContext()

//// Color Declarations
let fillColor = UIColor(red: 0.087, green: 0.086, blue: 0.083, alpha: 1.000)

//// Group 2
CGContextSaveGState(context)
CGContextSetAlpha(context, 0.75)
CGContextBeginTransparencyLayer(context, nil)


//// Bezier Drawing
let bezierPath = UIBezierPath()
bezierPath.moveToPoint(CGPointMake(26.08, 23.65))
bezierPath.addCurveToPoint(CGPointMake(61.71, 12.5), controlPoint1: CGPointMake(38.43, 23.65), controlPoint2: CGPointMake(54.42, 18.61))
bezierPath.addCurveToPoint(CGPointMake(52.65, 1.35), controlPoint1: CGPointMake(69, 6.38), controlPoint2: CGPointMake(64.99, 1.35))
bezierPath.addCurveToPoint(CGPointMake(16.91, 12.5), controlPoint1: CGPointMake(40.2, 1.35), controlPoint2: CGPointMake(24.2, 6.38))
bezierPath.addCurveToPoint(CGPointMake(26.08, 23.65), controlPoint1: CGPointMake(9.63, 18.61), controlPoint2: CGPointMake(13.63, 23.65))
bezierPath.closePath()
bezierPath.moveToPoint(CGPointMake(48.14, 25))
bezierPath.addLineToPoint(CGPointMake(0.79, 25))
bezierPath.addCurveToPoint(CGPointMake(0.24, 24.35), controlPoint1: CGPointMake(-0.02, 25), controlPoint2: CGPointMake(-0.21, 24.73))
bezierPath.addCurveToPoint(CGPointMake(2.41, 23.65), controlPoint1: CGPointMake(0.76, 23.92), controlPoint2: CGPointMake(1.59, 23.65))
bezierPath.moveToPoint(CGPointMake(14.36, 12.5))
bezierPath.addCurveToPoint(CGPointMake(54.26, 0), controlPoint1: CGPointMake(22.62, 5.57), controlPoint2: CGPointMake(40.59, 0))
bezierPath.addCurveToPoint(CGPointMake(64.36, 12.5), controlPoint1: CGPointMake(67.93, 0), controlPoint2: CGPointMake(72.62, 5.57))
bezierPath.addCurveToPoint(CGPointMake(37.3, 23.65), controlPoint1: CGPointMake(58.56, 17.37), controlPoint2: CGPointMake(47.81, 21.59))
bezierPath.addLineToPoint(CGPointMake(49.75, 23.65))
fillColor.setFill()
bezierPath.fill()


CGContextEndTransparencyLayer(context)
CGContextRestoreGState(context)
user4806509
  • 2,925
  • 5
  • 37
  • 72
  • 1
    Do you need to use a `UIImageView`? This code is designed to sit in the `drawRect:` of a `UIView`, but you can always [create an image context](https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/HandlingImages/Images.html#//apple_ref/doc/uid/TP40010156-CH13-SW8), draw your curve, then get the image and assign it to a `UIImageView` if you really want. – Hamish Mar 05 '16 at 16:40
  • @originaluser2 Not necessarily. Prefer the `UIImageView`, but `UIView` is possible too. I've updated the question for both UIImageView and UIView to learn the differences in the way the code can be implemented. – user4806509 Mar 05 '16 at 16:44

1 Answers1

1

1 - How do I display the below code as an image in an UIImageView named exampleImageView?

Image can be created in PaintCode, but I don't think it is the right fit here. For starters create a drawing method in PaintCode.

2 - Is it possible to scale up or down the below code (i.e. like a vector graphic), and if so, how?

In PaintCode you can make the thing resizable by using frames.

Look at the Dynamic Shapes tutorial that addresses both.

MirekE
  • 11,515
  • 5
  • 35
  • 28
  • Sorry, I meant how can that code be placed in Xcode in a UIImageView or UIView and resized in Xcode. – user4806509 Mar 05 '16 at 17:11
  • The code is only part of what PaintCode generates. You want to use the generated drawing method (or generated image code) - it will save you time. Create drawing method and export the code from PaintCode to your project to see what I mean. The particular code above is not dynamic. It is hard coded. The tutorial I linked shows how to make it dynamic. There are other ways that may better fit your purpose and the other tutorials on their web page address that. – MirekE Mar 05 '16 at 17:23