CODEWITHSUNDEEP
iosswiftcore-graphics
Bohdan Savych
Bohdan Savych

Reputation: 3457

Best way to change pixels in iOS, swift

I'm currently implementing some sort of coloring book and I'm curious about the best way to change pixels in UIImage. Here is my code:

self.context = CGContext(data: nil, width: image.width, height: image.height, bitsPerComponent: 8, bytesPerRow: image.width * 4, space: colorSpace, bitmapInfo: CGBitmapInfo.byteOrder32Little.rawValue | CGImageAlphaInfo.premultipliedFirst.rawValue)!
self.context?.draw(image.cgImage, in: CGRect(x: 0, y: 0, width: CGFloat(image.width), height: CGFloat(image.height)))
let ptr = context.data
self.pixelBuffer = ptr!.bindMemory(to: UInt32.self, capacity: image.width * image.height)

And change pixels using this function:

@inline (__always) func fill(matrixPosition: MatrixPosition, color: UInt32) {
    pixelsBuffer?[self.linearIndex(for: matrixPosition)] = color
}

The problem is that every time when I change pixels I have to invoke makeImage on context to generate new image and it takes a lot of time:

func generateImage() -> UIImage {
    let cgImage = context.makeImage()!
    let uiimage = UIImage(cgImage: cgImage)

    return uiimage
}

Does my approach is correct? What are better and faster ways to implement it? Thanks.

Upvotes: 0

Views: 880

Answers (1)

Gene Z. Ragan
Gene Z. Ragan

Reputation: 2873

Manipulating individual pixels and then copying the entire memory buffer to a CGContext and then creating a UIImage with that context is going to end up being inefficient, as you are discovering.

You can continue to improve and optimize a CoreGraphics canvas approach by being more efficient about what part of your offscreen is copied onto screen. You can detect the pixels that have changed and only copy the minimum bounding rectangle of those pixels onto screen. This approach may be good enough for your use case where you are only filling in areas with colors.

Instead of copying the entire offscreen, copy just the changed area:

self.context?.draw(image.cgImage, in: CGRect(x: diffX, y: diffY, width: diffWidth, height: diffHeight))

It is up to you to determine the changed rectangle and when to update the screen.

Here is an example of a painting app that uses CoreGraphics, CoreImage and CADisplayLink. The code is a bit old, but the concepts are still valid and will serve as a good starting point. You can see how the changes are accumulated and drawn to the screen using a CADisplayLink.

If you want to introduce various types of ink and paint effects, a CoreGraphics approach is going to be more challenging. You will want to look at Apple's Metal API. A good tutorial is here.

Upvotes: 3

Related Questions