CODEWITHSUNDEEP
graphicsdrawingcoronasdk
kender
kender

Reputation: 87171

How to fill same-color area with another color in CoronaSDK?

I have an app whose part is a coloring-pages like drawing app. You can paint with your finger in it. What I'd like to add is the "flood fill" option - one that fills the shape with the selected color.

I'm wondering how to do this, since I don't have an access to individual pixel properties in CoronaSDK, so I can't do the most direct approach (iterate through the pixels around the touch point and change their color, and repeat that until I find a different color pixel).

How should I do it? Each colouring starts with a black-and-white image, but those images are different and there can be a lot of them, so I'd rather not hand-pick the shapes or do something like this :)

Upvotes: 0

Views: 370

Answers (1)

Jordan Schuetz
Jordan Schuetz

Reputation: 1036

That would be very complex to do since you would have to deal with all sorts of vectors. What I did for my drawing game is used the line append API to draw. Here's the code I used for drawing:

local endPoint, startPoint
local lines, line, lx, ly, sx, sy = {}
local points = {}
r,g,b = 255,0,0
lineWidth = 10
local drawPacket

local odd = true

local function draw(event)
    if event.phase == "began" then
        startPoint = display.newCircle(0,0,lineWidth/2)
        startPoint.x, startPoint.y = event.x, event.y
        startPoint:setFillColor(r,g,b) 

        if startPoint.x <350 or startPoint.x > 700 then
            director:changeScene("fail")
        end

        endPoint = display.newCircle(-100,0,lineWidth/2) 
        endPoint:setFillColor(r,g,b)

        lineGroup:insert(startPoint)
        lineGroup:insert(endPoint)
    elseif event.phase == "moved" then
        if not line then
            print "I am now drawing the line"

            line = display.newLine(startPoint.x, startPoint.y, event.x, event.y)
            lines[ #lines + 1 ] = line
            line.width = lineWidth
            line:setColor(r,g,b)

            lx,ly = startPoint.x , startPoint.y
            sx,sy = event.x, event.y

            lineGroup:insert(line)
        else
            if math.sqrt((lx-event.x)^2+(ly-event.y)^2) > 2 then
                --print "I am now appending the line"
                line:append( event.x, event.y)
                lx, ly = event.x, event.y

            end
            endPoint.x = event.x
            endPoint.y = event.y
            if odd then

                points[#points+1] = event.x
                points[#points+1] = event.y

            end
            odd = not odd
        end
    elseif event.phase == "ended" then
        if win == true then
            if endPoint.x <350 or endPoint.x > 700 then
                director:changeScene("fail")
            else
                director:changeScene("scene11")
            end
        else
            director:changeScene("fail")
        end


        line = nil
        endPoint.x, endPoint.y = event.x, event.y
        print "I have ended my touch, sending data"
        points = {}
    end
end


background:addEventListener("touch", draw)

So above is a solution on how you can let people draw ontop of the picture, but if you want them to one click fill, you will have to create custom polygons, then on tap it uses FillColor:

http://docs.coronalabs.com/api/library/display/newPolygon.html

Hope this helps.

Upvotes: 1

Related Questions