Best way to create a drawing app which can use images as fill - swift

Question

I'm trying to create a section of an app where the user can draw freestyle shapes and fill these shapes with an image.
I have tried using UIBezierPaths and CAShapeLayers, and have been able to create a drawing app which fills all images with a single colour.
I want each shape to be able to be filled with a different colour, so eventually the individual shapes can be filled with separate images.
I'm having trouble separating each drawing so they can be filled individually, and have so far been unable to fill a drawing with an image.
If anyone has suggestions of other ways I could go about doing this, I would appreciate any ideas!

Answer 1

Have you thought about maybe using SpriteKit for the drawing portion of your app? Using Spritekit you can create your shapes using SKShapeNode and fill them with different colors using the fillColor property of SKShapeNode. For filling the newly create shape with an image you can place your image in an SKSpriteNode then crop it using SKCropNode and set the maskNode property of SKCropNode to the SKShapeNode you created.
Eample:
import UIKit
import SpriteKit
class DrawView: SKScene {
override func didMoveToView(view: SKView) {
scaleMode = .ResizeFill
backgroundColor = UIColor.whiteColor()
//creating a triangle and filling it with the color blue
let path = CGPathCreateMutable()
CGPathAddArc(path, nil, 160, 284, 0, 0, CGFloat(M_PI*2), true)
CGPathAddLineToPoint(path, nill, 60, 184)
CGPathAddLineToPoint(path, nill, 260, 184)
CGPathAddLineToPoint(path, nill, 60, 284)
let triangle = SKShapeNode()
triangle.lineCap = .Round
triangle.lineJoin = .Round
triangle.fillColor = UIColor.blueColor()
triangle.path = path
addChild(triangle)
//placing image into SKSpriteNode
let image = SKSpriteNode(imageNamed: "yourImage")
image.size = CGSizeMake(320, 568)
image.position = CGPointMake(160, 284)
//creating an SKCropNode
let imageCrop = SKCropNode()
imageCrop.position = CGPointMake(0, 0)
imageCrop.addChild(image) //adding image to the SKCropNode
imageCrop.maskNode = triangle //using the triangle created as a mask
addChild(imageCrop)
}
}
class ViewController: UIViewController {
override func viewDidLoad() {
//create spritekit scene
let skView = SKView(frame: CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height))
skView.center = CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height/2)
self.view.addSubview(skView)
//add drawing view to the scene
let drawView = DrawView()
sKView.presentScene(drawView)
}
}
The tricky part is going to be repositioning the SKSpriteNode and SKCropNode to fill the SKShapeNode.