WIN32 tutorial for vector graphics

Question

3.04/5 (4 votes)

See more:

INTRODUCTION AND RELEVANT INFORMATION ABOUT THE QUESTION:

I have a bitmap that I need to scale.

Bitmap can be minimized and maximized, and is a background of a dialog box.

I have tried using GDI, but to no avail, picture gets blurred.

In order to get sharper image, I would like to try vector graphics.

I have posted here a few questions that will try to solve my problem using GDI, but while I am trying to fix my problem that way, I would like to try to solve it this way as well, because I fear that I will not make any progress using GDI.

I would work on Windows XP, using Visual Studio C++ 2008.

Ask for additional information, and I will provide them.

QUESTION:

Can anyone recommend an online tutorial for vector graphics in pure WIN32, using C or C++?

Code examples/books are welcome too.

MY EFFORTS:

I have found online converter from bitmap to vector.

I have tried to find code examples on MSDN, but have failed.

Same goes for browsing StackOverflow archive, and I have found nothing on CodeProject nor on CodeGuru.

I have found this book on Amazon:

Introduction to Graphics Programming for Windows 95: Vector Graphics Using C++,by Michael J. Young but I just do not know if it will help me.

Also, some say that metafiles can be used here too.

If so, can you please provide links to tutorials/books/code examples, that show how to use metafile to scale images?

I sincerely apologize for asking the question in such broad and general manner, but I am a beginner, and just do not know how to phrase it well, maybe that is also the reason why I have failed with Google search for this topic.

If there is a way to rephrase this question, leave a comment, and I will act accordingly.

I just need some material on this to start with, I hope I am not asking too much.

Thank you.

I will continue to search online, maybe my luck changes, and I find something that may help me.

Regards.

Posted 23-Sep-13 10:53am

AlwaysLearningNewStuff

Add a Solution

Comments

Sergey Alexandrovich Kryukov 23-Sep-13 18:22pm

Pretty good question, come to think about. I voted 4.
—SA

AlwaysLearningNewStuff 23-Sep-13 18:56pm

Thank you, Mr. Kryukov.

Regards.

RedDk 24-Sep-13 1:31am

http://inkscape.org/download/?lang=en ... begin by knowing what an .svg becomes. Best way to know how it might be used. Plus fills in the gaps of misunderstanding when one goes to ask more questions.

AlwaysLearningNewStuff 24-Sep-13 10:53am

Thank you for your suggestion, I highly appreciate it.

I will give it a try, and report my results.

Regards.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ron Beyer · Accepted Answer · 2013-09-23T11:15:00

Solution 1

There is no way to scale a bitmap up without losing quality.

Bitmaps and Vector graphics are two separate concepts. Bitmaps are pictures compromised of pixels. Making a pixel bigger means that it changes the image.

Vector graphics however are different, they are not collections of pixels but lines, circles, and other graphics primitives that make up a picture. You then draw these graphics on a canvas which can be scaled without losing quality. Unfortunately you can't do this with pictures since they are pixel collections.

You can use GDI to draw vector graphics, and you can use it to draw bitmaps. Metafiles (which is what old clipart is in) are vector graphics format. Look up metafile formats or SVG formats if you want to learn how to draw vector graphics.

Posted 23-Sep-13 11:15am

Ron Beyer

Comments

Sergey Alexandrovich Kryukov 23-Sep-13 17:31pm

Of course (5ed), but it is not the main question. Also, I would add that there is no "conversion" from bitmap to vector, if you are not counting image recognition (which is not conversion). This is not a well-defined problem, by reasons close to those you just explained.

Please see my answer where I overview some variants.

—SA

Ron Beyer 23-Sep-13 17:44pm

I 5'd yours, as always a good expansion on what I tried to say. I didn't mean to imply that there was a conversion from one to the other, in fact I was trying (perhaps poorly) to say that vector graphics and bitmap graphics are two different concepts.

Sergey Alexandrovich Kryukov 23-Sep-13 18:21pm

I referred not to your answer and possible implied thought, but replied to OP who mentioned such "conversion". However, I think OP understands the problem well enough.
—SA

AlwaysLearningNewStuff 23-Sep-13 18:07pm

Thank you for you solution.

The problem is that I have a bitmap with edges, and when I use GDI, I get blurred image.

While I am trying to solve problem using GDI, I thought that maybe, I could fix scaling problems with vector graphics.

I am a beginner, my ignorance is obvious just by reading through my question, and have never thought that I will need vector graphics for such a simple thing as scaling a bitmap, but I am stuck, so I have posted this question out of despair.
Thank you for your answer, you have 5 from me.

Regards.

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-09-23T11:29:00

Solution 2

There is no such thing as converted from bitmap graphics to vector, because this is something which does not have strict sense. It could be some kind of image recognition and can be performed just out of despair. I don't know why would you want it, so don't want to discuss it at this time. In normal business, you would operate with vector graphic in first place and save graphics in bitmaps of required size when needed, which is actually called rendering.

For Windows, the problem of vector graphics is actually reduced to creation of some model of vector graphics and rendering this model on screen (or other media, such as print page), which is all boiled down to either handling of the WM_PAINT event or rendering graphics on some bitmap on the fly. Please see:
http://msdn.microsoft.com/en-us/library/windows/desktop/dd145213%28v=vs.85%29.aspx[^].

The model can be anything; you can defined your own and implement all the operations you need. This is not actually too hard to do, but requires some architectural skills.

Windows metafiles are rudimentary, old, ugly and awkward to use. However, Windows API provides all one needs to support metafiles or enhance metafiles: http://en.wikipedia.org/wiki/Windows_Metafile[^],
http://msdn.microsoft.com/en-us/library/cc215212.aspx[^],
http://msdn.microsoft.com/en-us/library/dd145051%28v=VS.85%29.aspx[^].

You can look at look at available vector graphics standard, in particular on these two, XML-based:
http://en.wikipedia.org/wiki/SVG[^],
http://www.w3.org/Graphics/SVG[^],
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html[^];
http://www.svgelves.com/[^],
http://en.wikipedia.org/wiki/Vector_Markup_Language[^].

I would say, the only widely used, strict and based on the open standards is the SVG. One important thing is it its use in the Web is standardized in HTML5: http://en.wikipedia.org/wiki/HTML5[^].

Its use is really supported by most Web browsers, directly of via plug-ins: http://en.wikipedia.org/wiki/SVG#Support_for_SVG_in_web_browsers[^].

SVG can also be hardware-accelerated, based on OpenVG: http://en.wikipedia.org/wiki/OpenVG[^].

You can do SVG programming using the open-source and cross-platform librsvg C library:
http://en.wikipedia.org/wiki/Librsvg[^],
https://wiki.gnome.org/LibRsvg[^].

See also this one: http://libboard.sourceforge.net/[^].

You can find some more: http://bit.ly/15n39ui[^].

—SA

Posted 23-Sep-13 11:29am

Sergey Alexandrovich Kryukov

Comments

AlwaysLearningNewStuff 23-Sep-13 18:07pm

Thank you for you solution.

The problem is that I have a bitmap with edges, and when I use GDI, I get blurred image.

While I am trying to solve problem using GDI, I thought that maybe, I could fix scaling problems with vector graphics.

I am a beginner, my ignorance is obvious just by reading through my question, and have never thought that I will need vector graphics for such a simple thing as scaling a bitmap, but I am stuck, so I have posted this question out of despair.
Thank you for your answer, you have 5 from me.

Regards.

Sergey Alexandrovich Kryukov 23-Sep-13 18:19pm

You are very welcome.

You are quite right. In all cases when you have scaling (and if images are not photographs), the best approach is to use vector graphics.

Good luck, call again.

—SA

AlwaysLearningNewStuff 23-Sep-13 18:53pm

Thank you Mr. Kryukov, that means a lot to me.

I have never expected to come this far, the original project I work on was simple, but was altered recently, since new research and analysis have expanded my employers needs.

Being a beginner, I am terrified just thinking about using vector graphics, as I do not find it easy topic for a beginner.

Since the product is commercial, I must ask you if those libraries you have mentioned, are free to use for commercial use.

Again, thank you Mr.Kryukov, I will report my results soon ( I am sure that I will encounter some problems on this thorny path).

Regards.

Sergey Alexandrovich Kryukov 23-Sep-13 20:33pm

It's all open-source. I try not to promote anything proprietary. You can also use XML parsers available in .NET FCL (there are at least tree: XmlReader/XmlWriter, XmlDocument (implementing DOM) and XDocument).
—SA

AlwaysLearningNewStuff 24-Sep-13 11:02am

Thank you, Mr. Kryukov.

I had to check about libraries license, just in case.

I think that my employers can give me the picture in .EMF format ( that would be the ENHANCED META FILE right? ).

That way, the only thing I would need is to learn how to use metafile to scale that image on a dialog box background.

I will look for some examples from the book: Programing Windows 5th edition, from Charles Petzold. Perhaps, there is an example of scaling a picture from metafile.

Technically, I think that all the action will take place in the WM_PAINT, I just do not know how the scaling will be done at this moment.

Never mind, I better start learning, there is a lot of work awaiting me.

Hopefully we shall "speak" again, and I will have some good news!

Regards.

Sergey Alexandrovich Kryukov 24-Sep-13 11:13am

First of all, I would highly recommend to skip Metafiles, not to torture yourself. I used them successfully, but still won't recommend. I would advise to work with either SVG (if you have complex graphic functionality) or your own model (especially if you graphics functionality is simple).

In both cases, scaling is not a problem at all. For your own model, it would be just scaling in the model, not in Windows API. Imaging that in your mathematical model you have one more parameters, "scaleFactor", so you do all calculations with it. Got the hint? And, with SVG, scaling is defined by the sizes of the canvas, so you won't need to worry much about it...

—SA

AlwaysLearningNewStuff 24-Sep-13 19:52pm

My employers can provide me with SVG file, instead of BMP, so I would stick to your advice to use SVG.

I have read Petzold's book, Programing Windows ( 5th edition ) , but I haven't found anything there regarding SVG files.

I have tried MSDN but failed there too.

My problem is that I do not know how to use SVG, as I have said, I have read Petzold's legendary book Programing Windows( 5th edition ), and there are only metafiles described.

I just need a simple code example in Win32, and preferably C or C++, that scales SVG image in a window background.

I believe that this is basic stuff I ask for, but just can't find an example that would kick start me.

Hopefully you can direct me, if you would be willing of course( I don't want to pressure you ) , since you are more experienced and way better developer than I am.

Thank you for your suggestion.

Regards.

Sergey Alexandrovich Kryukov 24-Sep-13 20:11pm

Actually, you can use SVGs created by 3rd party and even convert them, say, to XAML, which is a wonderful opportunity to work with WPF, should you ever get there.
There is a wonderful, amazing vector application: Inkscape (also open-source):
http://en.wikipedia.org/wiki/Inkscape
http://inkscape.org.

Among many other great things and amazing speed, it has one great feature: ability to work in raw XML, and not at the whole XML but possibly just at, say, the selected object. Using this feature, you can really lean how the whole structure works in all the detail. I, by the way, I did not touch it much; to me, it was enough to import SVG during runtime or embed in the project, to later render it, with scaling. But I was very pleased with a work of my job candidate: I sent him a vector picture, just to explain the requirements for his test project, and asked to simulate robot operation scenarios. This person, instead of doing it all from scratch, took my image, exposed separate parts of the picture of the robot machinery to the API and embedded it all in his demo application. The parts I drew schematically started to move and rotate (you cannot apply transformations to separate objects). Even though this guy did not meet my requirements, we gave him the position, because this kind of creative laziness is useful and should be encouraged. Could you bit that? He achieved it in a very short time.

Now, I did not use the C++ http://libboard.sourceforge.net/ library I recommended (I always worked with .NET), but you should better look at it. It should work for you. I don't mind to help where I can, but it needs to be driven by you. Just start with something; I don't foresee much problems.

—SA

AlwaysLearningNewStuff 24-Sep-13 21:15pm

I just do not want to use libraries.

I have always enjoyed doing things myself.

That is why I am astonished that there is not a single code example of using SVG in Win32 and C++.

It really shocks me that everybody use libraries.Is it possible that loading, scaling and then pasting SVG as the window background is such a hard task so nobody is able to make a small tutorial or provide code example?

I really tried searching through Internet, but haven't found a single example of doing the above in C++, not even in MFC.

I just want to do it myself without use of libraries, if possible.

It would be a real pleasure to achieve such a result.

That was one of the motives I chose this profession at the first place-the ability to make something wonderful from scratch.

If library is the only way to go, then so be it, but can you please tell me if there is an example of using SVG files without any library in C/C++/MFC ?

I would really really appreciate it.

Thank you again for useful suggestions!

Regards.

Sergey Alexandrovich Kryukov 24-Sep-13 21:37pm

My respect. Even though many would blame you for the waste of your (working) time, your attitude has a lot of great benefits.
One of them is the ability to use zero third-party products in the build, which makes the maitenance really reliable. Still, you should better use XML parser/generator, but it could be Microsoft's.

But you cannot say there are no SVG tutorials. First, this is an open W3 standard. This is the ultimate source of everything related to it:
http://www.w3.org/Graphics/SVG. See also links from the Wikipedia article on SVG. Also, you will find great tutorial in Inkscape. Do you think this is not enough?

And, if you don't want the libraries, be prepared to get information by yourself. First, you don't really need C++ samples for SVG creation. Why? Because SVG is XML, so search the manuals on XML (I hope you know enough to work with XML). Rendering? Use documentation on SVG where th semantics of constructs is explained. Then, for rendering of it, learn raw Windows GDI+ or DirectX (which is actually much wider than Windows because it can use hardware acceleration). On every of the topics, you will find plenty of code samples. This is called "separation of concerns".

—SA

AlwaysLearningNewStuff 25-Sep-13 9:57am

Thank you so much Mr.Kryukov!

Things finally start to get some sense!

Let me just confirm if I have understood it right:

First, I must learn to use XML with C++, right?

I guess that is the part I was missing all the time.

If I can use XML and C++, then using SVG files should be easy, since the documentation in the links provided above is really good.

I have just had wrong perspective, I guess, thank you so much for your corrections!

Regards.

Sergey Alexandrovich Kryukov 25-Sep-13 10:22am

You are welcome.

Yes, you need, if you haven't done this before.

SVG files... yes, pretty easy, but do you understand the volume? It supports the graph of any number of individual object, with parent-child relationships between them and grouping (when they pass all transforms as a whole entity), so it also transformations. Each object (Bezier curver, primitives, set-theory operations on other objects and those groups) has good number of line, fill, and other properties, including gradients and -- attention! -- fuzziness. People create real paintings using this standards, lurk the Web. A lot of work...

—SA

AlwaysLearningNewStuff 25-Sep-13 11:11am

I have gotten used to learn a lot, since my employers always keep adding new demands and features, so there is little choice left for me.

I will have to manage this somehow. :)

Regards.

Sergey Alexandrovich Kryukov 25-Sep-13 11:15am

That's great. Would be nice to hear some feedback from you when you make considerable advancement.
Wish you the best of luck.
—SA

AlwaysLearningNewStuff 25-Sep-13 17:16pm

It seems that Microsoft has XMLite and MSXML, so I could follow your advice and just learn to use them.

I would like to use XMLite since it should outperform MSXML, but I work on Windows XP ( x86 ).

It seems that I need to download Vista's SDK, in order to compile the code examples. That might be a problem, so I ask you this short question:

Will users with Windows XP ( x86 ) also have to download Vista's SDK in order to be able to use my application ?

If so, maybe it is better to use MSXML ?

As for feedback on my progress, be sure that I will inform you, that is the least I can do after all the help you provided :)

I think that the hardest thing for me will be just to make the first step, everything else should go easier, since code examples seem to be well written.

Thank you for wishing me luck!

Regards.

Sergey Alexandrovich Kryukov 25-Sep-13 17:58pm

I would first look at MSXML...
—SA

AlwaysLearningNewStuff 30-Sep-13 15:34pm

Mr.Kryukov,

I am able to load and parse successfully SVG file, thanks to the articles I have found here on CodeProject.

I am stuck in finding resources for rendering XML data to bitmap.

I have looked on several web sites, and found nothing.

Gogling failed as well.

As for open source lbraries, well, I am unable to find the relevant source code.

Perhaps you can find some good will to point me in the right direction?

Thank you.

Regards.

Sergey Alexandrovich Kryukov 30-Sep-13 16:36pm

First of all, you don't have to render on bitmap. You need to render on any context, including the screen. And not XML in general but specifically SVG.
You could not easy to find some documentation because you combine two parts. You need to learn SVG semantic separately (for example, Bezier curve) and GDI+ rendering separately (rendering Bezier on GDI+), and so on, all primitives one by one: backgrounds, gradients, thery-set combination of shapes (OR, AND, etc.), . DirectX is alternative to GDI+, faster in many areas...
—SA

AlwaysLearningNewStuff 30-Sep-13 17:34pm

Mr.Kryukov,

If I have understood you correct, I should learn to extract primitive from SVG, and then I should learn to render that primitive using GDI+ or DirectX.

Is that what you are saying?

Thank you for your reply.

Regards.

Sergey Alexandrovich Kryukov 30-Sep-13 17:44pm

Not really "extract", but interpret parsed XML structure as the hierarchy of some semantic graphics primitives, and then render each in some graphical representation. In case of GDI+, one output, it would be a flow of GDI+ method calls.
—SA