Drawing a custom shape on a Picturebox

Question

2.00/5 (1 vote)

See more:

I am trying to draw a specific shape and I am finding it mind boggling.

I managed to get a triangle going because I understood the maths behind it... sort off at least. But I don't like the triangle shape for what I want to use it for - placing a marker on an image as a ROI (Region Of Interest)

VB

'Traingle points - no need to change unless to increase / decrease size of Traingle
            Points(0) = New Point(StartX, StartY)                   
            Points(1) = New Point(StartX - 20, StartY - 12)         
            Points(2) = New Point(StartX - 12, StartY - 20)

What I want is something more like this (forgive me for my primitive ascii artistic skills)

     ____
    /
o---

The shape consists of (1) a circle filled with a specific colour, (2) a line intersecting with the circle (middle of), (3) a 45 degree line intersecting with the bottom and (4) top line.

Help and guidance will be appreciated.

T

Posted 15-Jul-14 11:35am

Tino Fourie

Updated 15-Jul-14 12:07pm

v2

Add a Solution

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)

Sergey Alexandrovich Kryukov · Answer 1 · 2014-07-15T12:41:00

Solution 1

You of course can do it, but then it makes no sense to use PictureBox at all; this control is purely, redundant designed to simplify some simplest images chores, basically, showing some static image. If you try to do anything more, anything dynamic, animated or interactive, this class won't help you, will only force you in wasting additional development time and some resources, giving nothing in return. Please see my past answers:
Append a picture within picturebox[^],
draw a rectangle in C#[^],
How do I clear a panel from old drawing[^].

What to do instead? This is pretty easy in your case. You can render graphics on some other control: a custom control or even, say, Panel. Please see my past answers for further detail:
What kind of playful method is Paint? (DataGridViewImageCell.Paint(...))[^],
capture the drawing on a panel[^],
Drawing Lines between mdi child forms[^].

[EDIT]

See also another answer:
Zoom image in C# .net mouse wheel[^].

—SA

Posted 15-Jul-14 12:41pm

Sergey Alexandrovich Kryukov

Updated 15-Jul-14 17:16pm

v2

Comments

Tino Fourie 15-Jul-14 18:51pm

SA, thank you for your reply and your efforts of posting the links, much appreciated. In my scenario I have to use a picturebox because the image I load (no animation involved here) needs to be zoomed and panned. For this I use a Panel control and place a picbox inside the panel with its size greater than that of the parent Panel control. This will allow me to pan the image inside the panel control.

Also I need to "zoom" the image up to 200x its original size. All this is working perfectly and when I add a marker (a triangle) it works really great. The problem I have it to keep the triangle at the same location when I start to zoom in or out (this is something I will worry about later)

However, I will look into your links and mine whatever I can from it.

Thanks again for your efforts and reply.

Sergey Alexandrovich Kryukov 15-Jul-14 23:15pm

Zoomed and panned? This is even stronger argument against using PictureBox. Isn't it obvious? This control is just the redundant middleman between image and the screen.
I'll add one more link...
—SA

Tino Fourie 16-Jul-14 13:25pm

Alright!! You have me almost convinced ;)
You make a strong argument but what about aspect ration of an image when displayed in either a Picturebox, Panel or Form... without resizing the control itself.

If I remember correctly, Picturebox maintains aspect ration depending on how the Picturebox should display the image.

I am actually going out on a limb here to be honest. I am really eager to hear your reply because I have reason to convert from a Picturebox to say a Panel because of another function I want to implement with Bitblt and the function can only be used on the parent form.

Nonetheless, I really look forward to the education when it comes to graphics / images and the link you've provided is a valuable resources indeed. Thanks again SA, it is greatly appreciated.

Sergey Alexandrovich Kryukov 16-Jul-14 14:28pm

The zooming factor should be a part of your data model, and the aspect ratio is easy to calculate on the fly: you have property Width and Height, and, say, either zoom factor, zoomed width or zoomed height. From this data, you calculate new Width and Height for rendering, keeping aspect ratio.
Panel will be fine.

Did I answer your questions? Any other follow-up questions? Will you accept the answer formally now (green "Aspect" ratio).

—SA

Tino Fourie 17-Jul-14 6:11am

SA, most of our conversation was really about the usability of a Picturebox compared to other controls with similar capabilities.

I have given you a +5 for the guidance and opening my mind to other possibilities and not be constraint to what MS let us to believe about controls. They do not necessarily allow us to open our minds to other possibilities.

The research I have done so far has revealed more than what I have gathered from your past posts. For example, having a line drawn at a certain angle I need to look into Radiants (whatever it is called).

Although you have given me much to think about, there are still things I am not entirely sure about. I know how to draw a circle and plot a line, the problem I have (because I don't understand it yet) is how to intersect the line with the circle at a certain point on the circle. So at this stage I still have a lot of self study to do as I have not yet found all the information that will help me with what I need to achieve.

Sergey Alexandrovich Kryukov 17-Jul-14 13:04pm

I just gave you practical advise. Not following would give you no benefits, that's all.

You are correct about "radiants", but no, you don't really have to look into them (I think they are called quadrant). This is already done for you. You should use Math.Atan2.

Thank you.
—SA

Tino Fourie 21-Jul-14 11:40am

Sa, thanks for the update and my humble apologies for the late reply. I just got bogged down with work and did not have much time to invest into playing around with your suggestions.

As soon as I get a chance I will try it out and ofc if it work I will gladly accept your solution as the working one ;)

Sergey Alexandrovich Kryukov 21-Jul-14 11:52am

Late reply is not an issue at all; if anything is ever time critical, it can be only of your side.
Good luck,
—SA

Sergey Alexandrovich Kryukov · Answer 2 · 2014-07-17T07:10:00

Tino Fourie wrote:
For example, having a line drawn at a certain angle I need to look into Radiants (whatever it is called).

You are right and wrong at the same time. If you ignore quadrants (I think this is a correct name for what you called "radiants"), you will get loss of precision or NaN (not a number) if infinite values. But do you actually need to consider those quadrants yourself?

I also though I have to look at quadrants, before I realized that I would only needed that if I uses sine and cosine functions. But the function which already takes this issue into account already exists: System.Math.Atan2:
http://msdn.microsoft.com/en-us/library/system.math.atan2%28v=vs.110%29.aspx[^].

Look at the notes to this function on the MSDN help page referenced above; and you will see how the quadrants are internally used.

—SA