Creating vector graphics in JUCE

[gbevin]

Hi everyone,

Is there a way to use existing component paint calls to create vector graphics instead of raster graphics? I couldn’t find anything and it doesn’t seem to be possible, but I thought I’d ask anyway.

Thanks!

Geert

[ijijn]

Hi Geert,

What sort of vector graphics did you have in mind? JUCE has considerable support in this area; I only use vector graphics for my GUIs.

You can certainly draw simple shapes in paint() using the built-in graphics calls, such as g.drawEllipse or g.fillRoundedRectangle. The next level up is using Path objects to combine various shapes into one and/or draw polygons with an arbitrary number of vertices, which also works really well. For anything particularly elaborate I tend to use SVG assets (typically as BinaryData), loading and positioning them as desired. There are a few threads about tips and tricks for doing this kind of thing on the forum; here is one such example:

How to scale a Drawable when it's added as child component?

Let’s say a Drawable, d, is created from an SVG image, and is to be painted inside a parent component such that it is scaled to a specific area. I can draw it like this without any problems: //in paint(Graphics &g) d->drawWithin(g, Rectangle<float>(x, y, w, h), RectanglePlacement::centred, 1.0f); But I’d prefer to add the drawable as a child component instead. What would be the equivalent way of setting its bounds and transforms etc such that it produces similar results as the drawWithi…

I hope I’ve understood your request. If not, please could you clarify what you’re trying to do a little more?

[gbevin]

I might not have been clear. Yes, I use the graphics drawing calls to create all the JUCE graphics in a vector way. However, these seem to be always rendered in a pixel format and if I want to write them out to a file, my only choices seem to be raster file formats (PNG, …). I was wondering if, given that the originating drawing calls are vector-based, if it was possible to write out SVG, EPS, PDF, … so that generated files are scalable and resolution independent.

[ijijn]

@gbevin

graphics drawing calls to create all the JUCE graphics in a vector way. However, these seem to be always rendered in a pixel format and if I want to write them out to a file, my only choices seem to be raster file formats (PNG, …). I was wondering if, given that the originating drawing calls are vector-based, if it was possibl

Haha right, I did wonder about whether you meant something along those lines.

Sorry, I’m probably not going to be any help but here are my thoughts anyway. I don’t know of any vector format output facilities inside JUCE per se, but I haven’t investigated that so there could be something tucked away.

SVG is XML-based so there would be some built-in JUCE support for this, at least indirectly, and I would start looking there. Mapping your vector structures neatly to SVG elements would be my focus: if you’re using Paths, the job feels a lot like reversing the process of createFromSVG or parseSVGPath.

Good luck!

[jules]

Have a look at this old (mostly abandoned) class:
https://www.juce.com/doc/classLowLevelGraphicsPostScriptRenderer

It does this kind of thing for postscript, so yes, could certainly be done… I think a LowLevelGraphics class that renders to SVG would be a really interesting thing to build.

[gbevin]

Thanks a lot Jules! That does work technically, but due to the abandoned nature I guess, the rendering is quite off. I’ll investigate if creating an SVG version might be something that I can get the time and resources for.

[lassandroan]

Hey @gbevin, you may be interested in this SVG context I started recently:

lassandroan/juce_vector

It’s pretty new so it could definitely still use some work (i.e. some child component rendering issues when using paintEntireComponent()) but it gets most of the job done!