[sharedmedia=core:attachments:8877]
Hi, I m looking for a solution, to fill an shape that has a specific path on the screen, with touch or mouse down and move, is there any way?
actually I want to make a shape like an English char and fill it with touching.
is there a way in corona to partial filling of a shape whit every movement of x,y ?
Maybe you can have a hidden-touch-listener, and then draw a newCircle as the user moves the touch
Touch doc : http://docs.coronalabs.com/api/event/touch/index.html
local hiddenForeground = display.newRect( 0, 0, display.viewableContentWidth, display.viewableContentHeight ) hiddenForeground:setFillColor( 1,0,0,0.5 ) hiddenForeground.alpha = 0 -- hide this object hiddenForeground.isHitTestable = true -- a must, so touch can be done on hidden objects function hiddenForeground:touch( event ) if ( event.phase == "began" ) then elseif ( event.phase == "moved" ) then -- Draw a circle local circle = display.newCircle( event.x, event.y, 10 ) circle:setFillColor( 0.5 ) elseif ( event.phase == "ended" or event.phase == "cancelled" ) then end return true end hiddenForeground:addEventListener( "touch", hiddenForeground )thank you , its a good idea ,i have just a tiny problem ,
that i need ,when filling the shape , the color don’t go out of boundary of shape?
could you please tell me how i do that ?
Fill the path with invisible circles (0 alpha) that are within the boundary shape. Add a touch listener to each circle (or do a distance check between the touch and each circle every frame) and have the alpha of the circle change when it it touched.
You can also add logic controls to make sure the circles are activated in the order they should be - i.e. not skipping circles or making a patchwork instead of a path.
here is a link that might be helpful as well :
https://coronalabs.com/blog/2015/09/08/tutorial-partially-filling-an-object/
here is some rough code (not related to the link); just some code I threw together. It is just one way to ‘maybe’ do what I think you are trying to do. I just am piggy-backing off @sporkfin comment about touch listener on a series of circles. I used rects and did a few other things to try and replicate what you are trying to do.
Most likely there is a mush better way, probably using ‘masks’; that is why the link is most helpful; it has mask action in it.
local hzCnt = 0 local vtCnt = 0 local rectSize = 40 local gap = 25 local x, y = 0, 0 local rot = 0 local bg\_rect local cont local cover local function onTouch(e) e.target:setFillColor(.5, .5, .5) e.target.alpha = 1 end bg\_rect = display.newRect(MID\_W, MID\_H, 290, 290) bg\_rect:setFillColor(.1, .4, .1) cont = display.newContainer(250, 250) cont.l = -((cont.width \* .5) + (gap \* .5)) cont.r = (cont.width \* .5) - (gap \* .5) cont.t = -((cont.height \* .5) + (gap \* .5)) cont.b = (cont.height \* .5) - (gap \* .5) for i = 1, 10 do for ii = 1, 10 do local x = cont.l + (ii \* gap) local y = cont.t + (i \* gap) if i \> 1 and i \< 10 then if ii == 1 or ii == 10 then local c = display.newCircle(x,y,3) cont:insert(c) end else local c = display.newCircle(x,y,3) cont:insert(c) end end end cover = display.newRect(0,0,210,210) cover:setFillColor(.1, .1, .8) for i = 1, 16 do for ii = 1, 16 do local r = display.newRect(0,0 ,rectSize, rectSize) if hzCnt \> 0 and hzCnt \<= 8 then r.x = -(hzCnt \* 15) elseif hzCnt \> 8 then r.x = (hzCnt-7) \* 15 end if vtCnt \> 0 and vtCnt \<= 8 then r.y = -(vtCnt \* 15) elseif vtCnt \> 8 then r.y = (vtCnt-7) \* 15 end cont:insert(r) r:setFillColor(.3, .3, .3) r:addEventListener("touch", onTouch) hzCnt = hzCnt + 1 end hzCnt = 0 vtCnt = vtCnt + 1 end y = cont.t + gap for i = 1, 10 do local c x = cont.l + (i \* gap) c = display.newImageRect("Textures/rtArrow.png", 8, 8) c.x = x; c.y = y; if i == 10 then rot = rot + 90 end c.rotation = rot cont:insert(c) end for i = 1, 10 do local c y = cont.t + (i \* gap) c = display.newImageRect("Textures/rtArrow.png", 8, 8) c.x = x; c.y = y; if i == 10 then rot = rot + 90 end c.rotation = rot cont:insert(c) end for i = 9, 1, -1 do local c x = cont.l + (i \* gap) c = display.newImageRect("Textures/rtArrow.png", 8, 8) c.x = x; c.y = y; if i == 1 then rot = rot + 90 end c.rotation = rot cont:insert(c) end for i = 9, 2, -1 do local c y = cont.t + (i \* gap) c = display.newImageRect("Textures/rtArrow.png", 8, 8) c.x = x; c.y = y; c.rotation = rot cont:insert(c) end cont:insert(cover) cont.x = display.contentCenterX cont.y = display.contentCenterY
hope some of it is helpful to you!
thank you so much , i run your code , jsut tell me please what is the value of MID_W and MID_H?
It’s not my code but I would guess you were looking for the midpoints of the screen height and width to center the green background?
try:
[lua]
local MID_W = display.safeActualContentWidth * 0.5
local MID_H = display.safeActualContentHeight * 0.5
[/lua]
yes, MID_W, MID_H are what I call handles to ‘constant’ values. I uppercase them so I know they are ‘constants’ - that is, they will never be(or should be) changed by any code or function in the app/game.
I use them throughout all the modules of the app/game, so I do not need to constantly re-type the longer display.safeActualContentWidth * 0.5
Maybe you can have a hidden-touch-listener, and then draw a newCircle as the user moves the touch
Touch doc : http://docs.coronalabs.com/api/event/touch/index.html
local hiddenForeground = display.newRect( 0, 0, display.viewableContentWidth, display.viewableContentHeight ) hiddenForeground:setFillColor( 1,0,0,0.5 ) hiddenForeground.alpha = 0 -- hide this object hiddenForeground.isHitTestable = true -- a must, so touch can be done on hidden objects function hiddenForeground:touch( event ) if ( event.phase == "began" ) then elseif ( event.phase == "moved" ) then -- Draw a circle local circle = display.newCircle( event.x, event.y, 10 ) circle:setFillColor( 0.5 ) elseif ( event.phase == "ended" or event.phase == "cancelled" ) then end return true end hiddenForeground:addEventListener( "touch", hiddenForeground )thank you , its a good idea ,i have just a tiny problem ,
that i need ,when filling the shape , the color don’t go out of boundary of shape?
could you please tell me how i do that ?
Fill the path with invisible circles (0 alpha) that are within the boundary shape. Add a touch listener to each circle (or do a distance check between the touch and each circle every frame) and have the alpha of the circle change when it it touched.
You can also add logic controls to make sure the circles are activated in the order they should be - i.e. not skipping circles or making a patchwork instead of a path.
here is a link that might be helpful as well :
https://coronalabs.com/blog/2015/09/08/tutorial-partially-filling-an-object/
here is some rough code (not related to the link); just some code I threw together. It is just one way to ‘maybe’ do what I think you are trying to do. I just am piggy-backing off @sporkfin comment about touch listener on a series of circles. I used rects and did a few other things to try and replicate what you are trying to do.
Most likely there is a mush better way, probably using ‘masks’; that is why the link is most helpful; it has mask action in it.
local hzCnt = 0 local vtCnt = 0 local rectSize = 40 local gap = 25 local x, y = 0, 0 local rot = 0 local bg\_rect local cont local cover local function onTouch(e) e.target:setFillColor(.5, .5, .5) e.target.alpha = 1 end bg\_rect = display.newRect(MID\_W, MID\_H, 290, 290) bg\_rect:setFillColor(.1, .4, .1) cont = display.newContainer(250, 250) cont.l = -((cont.width \* .5) + (gap \* .5)) cont.r = (cont.width \* .5) - (gap \* .5) cont.t = -((cont.height \* .5) + (gap \* .5)) cont.b = (cont.height \* .5) - (gap \* .5) for i = 1, 10 do for ii = 1, 10 do local x = cont.l + (ii \* gap) local y = cont.t + (i \* gap) if i \> 1 and i \< 10 then if ii == 1 or ii == 10 then local c = display.newCircle(x,y,3) cont:insert(c) end else local c = display.newCircle(x,y,3) cont:insert(c) end end end cover = display.newRect(0,0,210,210) cover:setFillColor(.1, .1, .8) for i = 1, 16 do for ii = 1, 16 do local r = display.newRect(0,0 ,rectSize, rectSize) if hzCnt \> 0 and hzCnt \<= 8 then r.x = -(hzCnt \* 15) elseif hzCnt \> 8 then r.x = (hzCnt-7) \* 15 end if vtCnt \> 0 and vtCnt \<= 8 then r.y = -(vtCnt \* 15) elseif vtCnt \> 8 then r.y = (vtCnt-7) \* 15 end cont:insert(r) r:setFillColor(.3, .3, .3) r:addEventListener("touch", onTouch) hzCnt = hzCnt + 1 end hzCnt = 0 vtCnt = vtCnt + 1 end y = cont.t + gap for i = 1, 10 do local c x = cont.l + (i \* gap) c = display.newImageRect("Textures/rtArrow.png", 8, 8) c.x = x; c.y = y; if i == 10 then rot = rot + 90 end c.rotation = rot cont:insert(c) end for i = 1, 10 do local c y = cont.t + (i \* gap) c = display.newImageRect("Textures/rtArrow.png", 8, 8) c.x = x; c.y = y; if i == 10 then rot = rot + 90 end c.rotation = rot cont:insert(c) end for i = 9, 1, -1 do local c x = cont.l + (i \* gap) c = display.newImageRect("Textures/rtArrow.png", 8, 8) c.x = x; c.y = y; if i == 1 then rot = rot + 90 end c.rotation = rot cont:insert(c) end for i = 9, 2, -1 do local c y = cont.t + (i \* gap) c = display.newImageRect("Textures/rtArrow.png", 8, 8) c.x = x; c.y = y; c.rotation = rot cont:insert(c) end cont:insert(cover) cont.x = display.contentCenterX cont.y = display.contentCenterY
hope some of it is helpful to you!
thank you so much , i run your code , jsut tell me please what is the value of MID_W and MID_H?
It’s not my code but I would guess you were looking for the midpoints of the screen height and width to center the green background?
try:
[lua]
local MID_W = display.safeActualContentWidth * 0.5
local MID_H = display.safeActualContentHeight * 0.5
[/lua]
yes, MID_W, MID_H are what I call handles to ‘constant’ values. I uppercase them so I know they are ‘constants’ - that is, they will never be(or should be) changed by any code or function in the app/game.
I use them throughout all the modules of the app/game, so I do not need to constantly re-type the longer display.safeActualContentWidth * 0.5