Click here to Skip to main content
15,314,186 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Hello, I'm trying to create a user-control that you can select any organ from picture(s) that contains organ draws. I already split them into one by one to place them next to next each other. I use picturebox to place them closely but each ones areas overlapping with others and also empty areas causes problems.

So How can i draw each picture with only clickable on picture boundrys.

Pictures are opaque and visually I don't have any problem, Problem is functional.

Thank you

Edit: To make question clear.

[^]Here is what I'm dealing with[^]

As you can see in the picture, there are 8 different parts (assuming the right and left sides are combined). As you can see, they are close to each other, and some of them are even fit in the empty space between others.

My goal is, for example, if I clicked on Pectorals (red zone in the figure), it will change to the colored version of it, and a bunch of other code will run.

The problem is, by default when we add any Picture with a PictureBox, it will create a rectangle around that picture starting from the boundaries of it. So if I place two pictures (as in the figure) close together, one's empty zone prevents me from clicking the other's.

Also it raises the wrong Object's ClickEvent because of this problem.

I'm trying to set "Raise Event Region" that I assume we called it Graphic Region just where the picture exists. I can collect positions of pixels with a loop which determines which coordinates of that picture has "Color" (meaning it is part of the picture, the area that I want clickable) but I can't limit that area with that data.

An example of what I'm trying to achieve: https://www.youtube.com/watch?v=K_JzL4kzCoE

It doesn't matter which control will be used for solve the issue wheter custom control or another control's rewritten form.
Posted
Updated 8-May-15 19:06pm
v3
Comments
BillWoodruff 10-May-15 2:31am
   
See if my revised solution helps.

To construct a PictureBox Control with an irregular shape that is clickable and that does not obscure other Controls "behind" it:

1. you need to have a cleaned-up bitmap (best is a 24 bit .png file with transparency) where there is a clear area around the outline of the shape.

2. you can then create a GraphicPath from this bitmap; there's an example of code showing how to do that here on CP: [^].

3. using the linked to code above, you then set the Region of the PictureBox based on the graphics path, like this:
C#
GraphicsPath g1 = CalculateControlGraphicsPath(pbLung.Image as Bitmap);
GraphicsPath g2 = CalculateControlGraphicsPath(pbClavicle.Image as Bitmap);

pbLung.Region = new Region(g1);
pbClavicle.Region = new Region(g2);
However, if you are talking about producing user-controls whose shapes follow the visible outline of an area of content in a bitmap, you are going to struggle to get quality results unless the area you want to define the shape in the bitmap has a very clear distinction between the outline and the area that surrounds it.

In most cases the visual results of creating Control/Form shapes from bitmaps are not satisfying.

Best results will occur when the shape required is defined without curves, arcs, etc.
   
v2
Comments
İsmail Barış Bozkuş 8-May-15 13:56pm
   
Actually as I say, I don't have any problem with visually transprency , problem is transperent areas should unclickable(in most basic expression) this is my problem.
BillWoodruff 8-May-15 21:28pm
   
Defining an irregularly shaped Control and having areas of transparency in a PictureBox are two very different issues. If you define an irregularly shaped Control, it will receive Clicks only within its (visible) region.
İsmail Barış Bozkuş 9-May-15 1:02am
   
I'm going to improve my question
İsmail Barış Bozkuş 12-May-15 3:44am
   
I see edited version just now, I'll check , you got my point by the way
"To construct a PictureBox Control with an irregular shape that is clickable and that does not obscure other Controls "behind" it:"
İsmail Barış Bozkuş 12-May-15 3:47am
   
I haven't try the code yet but probably will solve my problem. Thank you so much, I was write a kinda algorithm but can't turn it to code because I wasn't know how to use these things. Now I know. Thank you again.
BillWoodruff 12-May-15 4:07am
   
I always test code in any articles I link to; I tested two two PictureBox Controls in which I put 24 bit .png images saved with transparency from PhotoShop CS6 with image content similar to two of the "organs" that you are dealing with.

Then I ran the code from the linked-to article to generate GraphicPaths.

The two GraphicPaths generated had 300+ and 400+ elements in them !

Placed next to each each other, the mouse-click behavior on the two PictureBoxes with modified Regions did not overlap, just as you wish to implement.

The "big win" here would be to have a simple editor that would generate GraphicPaths that include curves and arcs as well as line-segments in a form you could use and easily export result to WinForms. I think it possible that Blend does this, but I am not sure; I've never used it.

cheers, Bill

cheers, Bill
İsmail Barış Bozkuş 12-May-15 15:56pm
   
Additional information for whose need this solution, put purple (ff00ff) background on your picture to mask it.
Answers from here[^] might help you.
   
Comments
BillWoodruff 10-May-15 8:14am
   
My vote of #1. Your brief answer contains nothing that would assist the OP. If you examine the content of the CP answer you referred to and its links you would see that one reply cites a YouTube video already cited by the OP, by someone whose web-site is no longer on-line. And, the reply by Hillier which is also irrelevant to the OP's question cites another off-line site.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900