Paint Routine Rounded Image

[Casmat]

Hey!

I was wondering how I could put an image inside a rounded panel and the image be in the confines of that rounding? I know that fillRoundedRectangle() only draws another rounded rectangle within the parent panel and doesnt round the parent panel, but even if I'm increasing the border radius on the parent panel via the property editor, it still wont work and even with a child panel..

HiseSnippet 890.3ocsV0taSCCE0taAVKeHPhGfn8qfT0TaYrgDBArtUTErQ0Jf3eH2X2DqkXGY6rsBh2Jj30h2.353zlT1XLpD8GS49kumq8wGuQJYHSqkJDt46lkwP3a6MdlvD2OlvEng6iv206Ph1vT9NW6MKin0LJBiW6UVG3lqiJ98imuGIgHBYUtPnOH4gr2vS4lJuidwq4IICHT163o0xd6WLLTJ5KSj4.dVyqCJiDdBIhcDwlVCOD9FGP4FoZrgXXZHm8jzYiikmIb4+AtlOIgYM5hFCKjyMpeLOgNZ9rpQH75ipl70bS9C7NjS4K7WsCbuh.9UUTeO.23pfT2+AHgqAo0cP59diCU7LSUDKdtk2PAbfLk.a00ghKWTica30WBYHLakRNgMPAFKpHXmNcZ6C+4gOsUKX6Va7Okn7y7el+7hhXl9xzLo.LB1bDQvR5tIjdsr68GSuDvKJpUVusRjD5vT3fLXSdZzVYhH+HIS6GyTrMa6ac5RcKMCJkKLGKyMbAKXZtHzvkhfnG15KsZZ6MAZsIlqs88MxPRxdxbAUGXGnlQ1UvwfB5b9fAur2S1Y2scQlBjtis4xnGyBMDQTBKfz1uWQks9ZIXuFPXxU.AamnJxYUyKLgSZ6Ca51vPWluf9RwQRC6shfhEt0Wa4+6glN8RiY24UxjDl5RCauUotpBCD4oSXp1vYYRNaQh.saYt7Mtdb4PGQnVhRwPA271LVo8.YB0xQseeQlOpjIAe89g6SLD6kgRePdYLkgagCde1ofZh6pQSu8Y5SLxrhbKoeH7Flhn2wqFODwgVugmiShNGg8veG50L6G.dPmwolXqw2.iXFOJ1XsZiQnIREkoNlP4455BUN+i4edIwtkPxM+SH4t08TfmpUXVciE3htDtrVYDEzj5y87wCcQUDP+RRySHlkE0rp2kA.1wRJIV0BglalUWc+ePoqyUpzccg388FwMgwWNFabIXDNA9efwx2Gti2ASmBBGU.bcuAebUeL3uzdm5SzgDihaYrGkmNFD0BYP2EvAs1xDZXu63r6Xss6.iYBZgwOgekA6ZswkA6NOHJkDpjeJzoIXeAZiBO.lDEO31Dd4Gr86hJzIpuOmBOH9ovvkWpKTXuUsvGspEt8pV3iW0B2YUKb2Usvm72Kz9+q7xbiL0csAgNbzAEBqX7ABBv.KXqneAD7GBSA

Thanks!

[d.healey]

If you search the forum you'll find an old post from me asking the same thing. Basically it's not possible without hacking around a lot. There is a way to do it in JUCE though so it would be nice if Christoph could implement this.

What I ended up doing was exporting my pngs with the rounding applied to them and a transparent background.

[Casmat]

@d-healey Yeah saw that post, was hoping there'd be a simpler way by now.. @Christoph-Hart ?

[ustk]

@d-healey @Casmat You can use a mask with any shape:

Engine.loadAudioFilesIntoPool();
const var mask = Content.createPath();
const var Panel1 = Content.getComponent("Panel1");
Panel1.loadImage("{PROJECT_FOLDER}img.jpg", "img");
Panel1.data.upt = 0.0;

// PAINT ROUTINE
Panel1.setPaintRoutine(function(g)
{
	g.beginLayer(false);
	g.drawImage("img", this.getLocalBounds(0.0), 0, 0);
	
	mask.clear();
	mask.addRoundedRectangle(this.getLocalBounds(0.0), this.getWidth()/4.0 + this.getWidth()/4.0 * Math.sin(this.data.upt));
	g.applyMask(mask, this.getLocalBounds(0.0), false);
	
	g.endLayer();
});



// TIMER
reg upt = 0.0;

Panel1.setTimerCallback(function()
{
	this.data.upt = (this.data.upt > 2*Math.PI) ? 0.0 : this.data.upt+0.05;
	this.repaint();
});


Panel1.startTimer(30);

[d.healey]

@ustk Ooooh nice! I will use this, thanks.

[ulrik]

@ustk beautiful!

[Casmat]

@ustk This is sweeet!! Thanks a lot!