Draw panel / fade edges to alpha?

[Dan Korneff]

How would you draw a circle on a panel and fade the edges to alpha?

[ustk]

@Dan-Korneff
Not at my computer but

• begin a layer
• fill an ellipse
• add a gaussian blur
• end the layer

[clevername27]

This post is deleted!

[Dan Korneff]

@ustk I'm seeing a faint outline of the panel when I use blur on top of a gradient filled panel
Here's what my code looks like.

	g.beginLayer(true);
	g.setColour(Colours.black);
	g.fillEllipse([30,30,this.getWidth()-60,this.getHeight()-60]);
	g.gaussianBlur(30);
	g.endLayer();

And the image looks like this:

It might be hard to see, but there is a slight square outline at the bounds of the panel containing the circle.
this does not happen if the background panel is painted in a solid color.

[ustk]

@Dan-Korneff yeah I can see it
Have you tried a lesser blur amount ?
Or a box blur ?
Might also be a good idea to paint it directly on the lower background panel if the design allows this

[Dan Korneff]

@ustk said in Draw panel / fade edges to alpha?:

paint it directly on the lower background panel if the design allows this

This does look better, but only because the darkness has now been pushed to the outmost boundaries of the panel. I'm going to try box blur next.

[Christoph Hart]

I find myself using layers less and less because of subtle glitches like this - after all it has to rasterize the graphics context to an image and we're back in pixel land.

A non layer approach would use g.drawDropShadowFromPath() with a circle path:

const var Panel1 = Content.getComponent("Panel1");

// that's a poor circle, but the blur will save us...
var circlePath = Content.createPath();
circlePath.startNewSubPath(0.5, 0);
circlePath.quadraticTo(1.0, 0.0, 1.0, 0.5);
circlePath.quadraticTo(1.0, 1.0, 0.5, 1.0);
circlePath.quadraticTo(0.0, 1.0, 0.0, 0.5);
circlePath.quadraticTo(0.0, 0.0, 0.5, 0.0);

Panel1.set("width", Panel1.get("height"));

Panel1.setPaintRoutine(function(g)
{
	g.drawDropShadowFromPath(circlePath, this.getLocalBounds(50), Colours.black, 50, [0, 0]);
});