Adding a gradient fill to a circular object.

Solar2D General Questions/Discussion
#1

I have a plain white circular image and I was looking to add a gradient fill over it. But when using GradientPaint I was getting a square.

local circle = display.newImageRect(
‘circle.png’,
200, 200
);

circle.x = display.contentCenterX;
circle.y = display.contentCenterY;

local paint = {
type = “gradient”,
color1 = { 17 / 255, 159 / 255, 255 / 255 },
color2 = { 126 / 255, 203 / 255, 255 / 255 },
direction = “down”
};

circle.fill = paint;
`
Is there anyway to add a gradient fill to the circular image?

#2

Working with image fills can be tricky because the image file is a square. Try using a display circle instead of an image file

local circle = display.newCircle( 0, 0, 100 )
circle.x = display.contentCenterX;
circle.y = display.contentCenterY;

local paint = {
    type = "gradient",
    color1 = { 17 / 255, 159 / 255, 255 / 255 },
    color2 = { 126 / 255, 203 / 255, 255 / 255 },
    direction = "down"
}

circle.fill = paint

You can use composite paint to achieve some image-shape specific effects as long as the loaded image has transparent pixels in the areas you don’t want to paint.

#3

Oh yes, you make sense!

I was hesitant to create a circle because of anti-aliasing problems. But I guess, it’s not that bad after inserting the circle to a snapshot and adjusting its scale.

Thanks a lot :slight_smile: