Crayon effect using iPhone

I am working on the app that allows a user to fill开发者_JAVA技巧 the color in the drawing using the finger as a crayon. Can anybody help me to produce a crayon effect? Thanks in advance.

You can refer to the below given link to start with. Here you can change the pen color or crayon color by giving the RGB values as given in the tutorial.

http://www.ifans.com/forums/showthread.php?t=132024

You can provide buttons on screen representing different colors and based on the button clicked you can set the RGB values of your current pen and file the color using hand.

Hope this helps you.

The standard Quartz calls that you would use in drawRect: won't actually give you the crayon effect that your looking for using any default behavior.

The easiest implementation to get your head around, at least just getting started, would be to create a series of transparent crayon textures. Photoshop, Fireworks, and many other drawing applications already have brushes and line styles for crayon like effects, so you can simply play around with a few of those on a transparent background to get some workable "splotches" (small round crayon looking transparent PNGs).

Then as the user drags their finger across the device record the path and draw these "splotch" images along the path. If the person draws back and forth, more will be laid down and you will get a darker (more solid/less transparent) color.

This is a very rough, but common approach to this problem. You could get really clever with masks, patterns, gradients, and other Quartz methods, but the complexity to deliver what you want will probably out-weight the simplicity of the image approach.

Some recommendations to get the best effect possible:

1. You can use HSV (Hue-Saturation-Value) to create a range of color variations from a single initial set of images to get your various crayon colors. This can be done in code or in your graphics program.
2. Adding some very light grey-scale shadows into the images can give them depth and roughness that will be preserved even if you layer the images many times, and the grey scale won't be filtered out when you do HSV adjustments. This prevents the crayon from becoming a solid color.
3. Record your path, (x,y), size, "splotch" choice, and color continuously as the person is dragging, however, break it up into segments based on touch down/up or a maximum size, that way you can provide a step by step "undo" functionality.
4. You can convert the "segments" from (3) into a single image by rendering them to an off screen buffer. This will allow you to redraw the entire piece with just a few transparent images, instead of thousands of little "splotches" every time.
5. If your familiar with OpenGL, you can get a good performance boost even for 2D because it can manipulate the "splotch" source images, offscreen rendering, and layering with a lot less code then you would have to do in CoreGraphics. Unfortunately, setting up OpenGL adds a ton of code and can be very confusing.

Hopefully this was clear enough and gives you some ideas.

Keep in mind once you master this approach you can draw with anything. Instead of crayon textures you could have neon glow, stars, particle effects, and just about anything you can imagine.

try this

class myView {

var crayon = UIColor(patternImage: UIImage(named: "acrayontexture")!)

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { firstTouch = (touches.first?.location(in: self))! aPath.move(to: firstTouch)

} 

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    if firstTouch != lastTouch {
        lastTouch = (touches.first?.location(in: self))! ;
         aPath.addLine(to: lastTouch)

        setNeedsDisplay()
        }
 override func draw(_ rect: CGRect) {

    let context = UIGraphicsGetCurrentContext() ;
    context?.addPath(aPath)
    context?.setLineWidth(10.0)
    context?.setStrokeColor(crayon.cgColor) ;
    context?.setLineCap(.round)
    context?.setShadow(offset: CGSize(width: 5.0 , height: 4.0), blur: 4.0) ;
    //
    context?.strokePath()

}

    }    
}

`