Text support under TODO

[OriBibi]

Hello. I saw that you entered the text support under TODO and also downloaded the "loadFontFromFile" function for loading text. Do you know when the text support is expected to return. And will the support include the "font-family" attribute?

[sammycage]

Do you know when the text support is expected to return.

With limited time and resources, I don't think it will be available anytime soon.

And will the support include the "font-family" attribute?

The following text attributes will be added :

• x, y, dx, dy, rotate, text-anchor, textLength, word-spacing, letter-spacing, font-size, font-family, font-weight, font-style

[sammycage]

60% to completion

[asmwarrior]

Is there way to loop all the elements of the svg file, and get all the text components.

I mean, currently, I can use the lunasvg to generate a background image(this image dose not have text information shown), than I will use some native API to draw text on the image.

More details, in my wxWidgets application, I'd like to first draw the svg image without any text labels on the canvas, than use wxWidgets' native DrawText API to draw text on the canvas?

I would like to do this because some of my text labels need to be changed from time to time, so maybe this is the correct way to do this?

Any ideas?

Thanks.

[sammycage]

60% to completion

My major drawback is font handling... Oddly enough, I don't even know what happened to the code.

[sammycage]

...I will use some native API to draw text on the image.

...You need coordinates, this is where the problem is.

[sammycage]

More details, in my wxWidgets application, I'd like to first draw the svg image without any text labels on the canvas, than use wxWidgets' native DrawText API to draw text on the canvas?

I would like to do this because some of my text labels need to be changed from time to time, so maybe this is the correct way to do this?

All you need is an XML library to manipulation the document tree.

Example :

XMLDocument xmldocument; // create XML document
xmldocument.load("<Your SVG Data here>");
auto textElement = xmldocument.getElementById("<The id of text element you want to change>");
textElement->setInnerText("<Your constantly changing text here>");

auto svgdocument = lunasvg::Document::loadFromFile(xmldocument.toString());
auto bitmap = svgdocument->renderToBitmap();

// Do something useful with the bitmap here

[asmwarrior]

Hi, @sammycage thanks for the quick response.

What I would like to do is something slightly different.

For example, I have such image shown in a dialog

Then under this dialog, I have three text field (under wxWidgets, it could be three wxTextCtrl), when user click on the control, it can enter some text.

The method you mentioned above:

XMLDocument xmldocument; // create XML document
xmldocument.load("<Your SVG Data here>");
auto textElement = xmldocument.getElementById("<The id of text element you want to change>");
textElement->setInnerText("<Your constantly changing text here>");

auto svgdocument = lunasvg::Document::loadFromFile(xmldocument.toString());
auto bitmap = svgdocument->renderToBitmap();

// Do something useful with the bitmap here

has some issue. I mean if the user changes the Text filed "Up Chirp" with some text like "50ms", I would like it take effect immediately. So, what I'd expect to do is:

1, draw an SVG image with three Text components
2, use the lunasvg library to parse the SVG file, and I got the coordinates of the three Text components.
3, use the lunasvg library to render a bitmap, and paint the bitmap on some canvas
4, use the Text components information extracted by the lunasvg to construct three wxTextCtrl component above the bitmap
5, when the whole window need to refreshed, I only need to repaint the image and 3 Text Ctrl.

Normally, I don't need to call renderToBitmap several times, only if the canvas get resized. At this time, a new size bitmap should be generated, and I have to manually calculated the new coordinates of the wxTextCtrl, and move those 3 components to the correct place.

In you suggested method, you first changed the SVG xml file, and later render to bitmap, that means if I changes the text values of the svg, I have to re-render to bitmap again.

My question is, is there any way to loop the components of the svgdocument? such as:

auto svgdocument = lunasvg::Document::loadFromFile(xmldocument.toString());

for (component : svgdocument->AllComponents)
{
    if(component->type == Text)
        do some thing;
}


auto bitmap = svgdocument->renderToBitmap();

[sammycage]

Is the SVG file complex? If the answer is NO.. You can wxGraphicsContext to draw the SVG file and do your thing. You can send me the SVG file lemme me see how I can help you.

[asmwarrior]

Is the SVG file complex? If the answer is NO.. You can wxGraphicsContext to draw the SVG file and do your thing. You can send me the SVG file lemme me see how I can help you.

It is quite simple. I create those a simple SVG file by inkscape, such a circuit or similar things, and leave the "resistor" value as user input.

Are there any reference on how to draw/show them by the wxGraphicsContext, I guess the basice wxDC is enough?

[asmwarrior]

Here is the demo svg file for testing.
The text t1 and h1 will be replace by 2 wxTextCtrl in the future.
Thanks.

[sammycage]

Are there any reference on how to draw/show them by the wxGraphicsContext, I guess the basice wxDC is enough?

Lemme add makeshift Text support first and I will tell you what to do next. TGIF

[asmwarrior]

Are there any reference on how to draw/show them by the wxGraphicsContext, I guess the basice wxDC is enough?

Lemme add makeshift Text support first and I will tell you what to do next. TGIF

What do you mean by "makeshift"?

BTW: if lunasvg can natively parse the text field, I think It will be easier to do the next steps. Thanks.

[asmwarrior]

It looks like the text rendering is partially working?

I mean I see this ticket:
render TEXT element · Issue #8 · sammycage/lunasvg — #8

And I see you have example code there in that issue. The first thing is loading the font file.

Also, it looks like someone has similar feature request like me:
He used the SVG gilr as a template, and replace the text element when needed, see:
Fix handling of KTagPCData tags in SVGParser to allow inserting of te… by mxdamien · Pull Request #33 · sammycage/lunasvg — #33

[asmwarrior]

It looks like the text rendering is partially working?

I mean I see this ticket: render TEXT element · Issue #8 · sammycage/lunasvg — #8

And I see you have example code there in that issue. The first thing is loading the font file.

Also, it looks like someone has similar feature request like me: He used the SVG gilr as a template, and replace the text element when needed, see: Fix handling of KTagPCData tags in SVGParser to allow inserting of te… by mxdamien · Pull Request #33 · sammycage/lunasvg — #33

Oh, it looks like some code feature of render TEXT element is removed from the master. I can't find the function loadFontFromFile right now.

EDIT:
It looks like in the release 2.0.0, you have removed the whole TEXT element support, I'm not sure why.
Release v2.0.0 · sammycage/lunasvg@44aff9d

[asmwarrior]

Hi, I did some trick on another svg library called nanosvg, and let its parser to extract the text fields. Then I use the wxWidgets' DrawText function to draw the text.

See the discussion here: Adds basic text parsing by jamislike · Pull Request #94 · memononen/nanosvg

And the result is shown below. I hope lunasvg can also have a way to do like this. Thanks.

[sammycage]

Nice one....

I hope lunasvg can also have a way to do like this. Thanks.

Things are different and complex here, I'm glad you found a solution to your problem.

[asmwarrior]

Compared with lunasvg and nanosvg, I noticed that lunasvg support more features than nanosvg, such as the marker feature. When I draw a line with a marker in the Inkscape tool, the result svg file has a marker attribute, but this marker does not shown on nanosvg. All I have to do is to first translate the line with marker with the "Menu -> Path > Stroke to Path". So, if lunasvg's parser can extract the Text elements, I will certainly give it a try. (I mean I can draw text by myself, and all the other stuffs with lunasvg's native rasterizer)

Thanks.

[sammycage]

So, if lunasvg's parser can extract the Text elements, I will certainly give it a try. (I mean I can draw text by myself, and all the other stuffs with lunasvg's native rasterizer)

I don't want to expose lunasvg internal structure.

What do you mean by "makeshift"?

I wanted to make one that perfectly matches what you are trying to do. It is makeshift because I will drop the zipped source code here.

I hope lunasvg can also have a way to do like this.

I'm currently implementing things like this in plutosvg but much better... Stay tight

https://github.com/sammycage/plutosvg

[asmwarrior]

So, if lunasvg's parser can extract the Text elements, I will certainly give it a try. (I mean I can draw text by myself, and all the other stuffs with lunasvg's native rasterizer)

I hope lunasvg can also have a way to do like this.

I'm currently implementing things like this in plutosvg but much better... Stay tight

https://github.com/sammycage/plutosvg

I looked at this file: https://github.com/sammycage/plutosvg/blob/master/source/plutosvg.h

It looks like it also does not expose the internal structure. So, maybe, it is not implemented yet. Thanks.

[OriBibi]

60% to completion

Hi, is there anything new? Did you manage to progress a little further?

[sammycage]

60% to completion

Hi, is there anything new? Did you manage to progress a little further?

Engineering is choking... I will drop updates during easter holiday.

[sammycage]

@asmwarrior @OriBibi Hello! I'm happy to share that text and tspan are now fully supported, along with very convenient font loading. Thank you for your patience!

[asmwarrior]

@asmwarrior @OriBibi Hello! I'm happy to share that text and tspan are now fully supported, along with very convenient font loading. Thank you for your patience!

Good news, thanks, I will try this as soon as I can.

[asmwarrior]

Hi, I did a simple test about the lunasvg, and a svg file with some text, and the result is good!

This is what I did for my test(I know nothing about meson build system)

1, I'm using Code::Blocks, and I simply create a console C++ project.
2, I download all the source code of the lunasvg, and drag all the source code(.cpp files) and header files(.h files) to project.
3, I also add the svg2png.cpp file to the project, since it has the main() function.
4, when building, I see it need the plutovg.h, so I download all the source code of plutovg project, and drag all the source code(.c files) and header files(.h files) to the project.
5, The build step need some std_xxx files, so I download the files: stb_image.h stb_image_write.h stb_truetype.h from the github https://github.com/nothings/stb.
6, I see some linker errors, and I found that I need to add PLUTOVG_BUILD_STATIC and LUNASVG_BUILD_STATIC to the build options.
7, now the result executable works fine.

Here is my testing svg file.

Here is the result png file generated from the project.

So, it works fine! Great!

BTW: It looks like the "U" character in the right bottom image has slightly different position between the svg file and the generated png file.