Hi,
I would like to create out of a circle and a rectangle a new shape that I will then fill with a gradient.
I don’t want to use an image but create it directly in Corona.
The final shape looks like this:
Is there a way to create - like in Illustrator - a combination of vector shape that can then be treated as one object?
Thanks and cheers,
Chris
display.newPolygon()
You will have to generate the outline yourself, but the hardest part of that is working out the points of the curved segment, so it’s really just a good learning exercise.
You could render the two objects in a display group and save them as a bitmap, but you then lose the fill operations you’re looking for.
But then I guess I will still have some hard edges for the curved part if I use display.newPolygon().
Maybe saving the shape as an svg and then importing and setting the gradient might work?
What about a snapshot?
Or display.save?
This seems like a use for a display.newSnapshot(): https://docs.coronalabs.com/api/library/display/newSnapshot.html
Draw your circle & rectangle, make a snapShot and use our fill features to color it.: https://docs.coronalabs.com/guide/graphics/path.html
Rob
Thanks - I’ll give it a try 
Tried it, but filling the snapshot doesn’t work; is there anything I’m missing?
Here’s the code:
local color1 = {0.17,0.1,0.24} local color2 = {0.57,0.5,0.54} local gradient = { type="gradient", color1=color1, color2=color2, direction="up"} local snapshot = display.newSnapshot( 100,200 ) local circle = display.newCircle (0, 0, 50) local rectangle = display.newRect (0, 0, 100,100) rectangle.anchorX = 0.5 rectangle.anchorY = 0 snapshot.group:insert( circle ) snapshot.group:insert( rectangle ) snapshot:setFillColor(gradient) snapshot:invalidate() snapshot:translate( display.contentCenterX, display.contentCenterY )I don’t think that’s how you fill an object - you need to call snapshot.fill = gradient.
I tried both… unfortunately still not working. Weird thing is that setting the alpha value (e.g. snapshot.alpha = 0.5) works fine, but setting the fill-color doesn’t.
Yeah, I can confirm that calling snapshot.fill doesn’t seem to do anything, even after calling :invalidate().
Could you use display.capture instead, this should return a normal display object unlike snapshot which seemingly has different behaviour?
Just tried it as well - doesn’t work either; only the rectangle gets filled then… 
Is that creating a display group, insert the rectangle and circle to that, and then using display.capture on the group?
Exactly - here’s the code:
local color1 = {0.17,0.1,0.24} local color2 = {0.57,0.5,0.54} local gradient = { type="gradient", color1=color1, color2=color2, direction="up"} local group = display.newGroup() local circle = display.newCircle (0, 0, 50) local rectangle = display.newRect (0, 0, 100,100) rectangle.anchorX = 0.5 rectangle.anchorY = 0 group:insert(rectangle) group:insert(circle) local capture = display.capture( group, { saveToPhotoLibrary=false, captureOffscreenArea=false } ) capture.fill = gradient capture:translate( display.contentCenterX, display.contentCenterY )I’m stumped then, my last suggestion is display.save, then use that to create a display.newImageRect, but really the above two approaches *should* work :huh:
I’ve now downloaded the latest build and tried again. Still not working…
Filling the snapshot with a solid color works now, but using a gradient still doesn’t.
Looks like I have to look for a completely different solution (like e.g. using a picture).
But thanks for all your help, nick_sherman, rob, roaminggamer & horacebury!
I would say the best solution is still the new polygon() route - there’s no limit on how many points you can specify so the resulting top bit could certainly be modelled accurately with a bit of math.
Well, it might be a little late, but if anyone comes across the same problem:
----------------------------------------------------------------------------------------- -- -- main.lua -- -- Example on how to fill combined objects using snapshots -- 2017-08-27 -- ----------------------------------------------------------------------------------------- local color1 = {0.17,0.1,0.24} local color2 = {0.57,0.5,0.54} local gradient = { type="gradient", color1=color1, color2=color2, direction="up"} -- create a background local bg = display.newRect( display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight ) bg.fill = { 0.5, 0.7, 0.9, 1} -- create empty snapshot local snap = display.newSnapshot(40,100) -- create objects local filler = display.newRect(0,30,40,100) -- set this to the size of your snapshot to cover all objects. filler.fill = gradient filler.alpha = 0 -- this is for the tint() function. set to 1 under normal conditions filler.blendMode = "srcIn" -- this is way to drop a texture (gradient here) on multiple objects local circle = display.newCircle ( 0, 0, 20 ) circle.fill={1,0,0,1} local rectangle = display.newRect ( 0, 40, 40, 80 ) rectangle.fill = {0,1,0,1} snap.group:insert(rectangle) snap.group:insert(circle) snap.group:insert(filler) -- last in to be top-most -- just for fun. tinting and transitioning is not required for the gradient effect function tint() filler.alpha = 1 snap:invalidate() end transition.to(snap,{time=1500, alpha=1, x=display.contentCenterX, y=display.contentCenterY, onComplete=tint})I think chris used a simple example to describe his needs. Of course, such a simple object can be created from a polygon, with some minor flaws and lots of work. But try to poly this:
display.newPolygon()
You will have to generate the outline yourself, but the hardest part of that is working out the points of the curved segment, so it’s really just a good learning exercise.
You could render the two objects in a display group and save them as a bitmap, but you then lose the fill operations you’re looking for.
But then I guess I will still have some hard edges for the curved part if I use display.newPolygon().
Maybe saving the shape as an svg and then importing and setting the gradient might work?