Creating a layer containing polygons on top of an image.

Question

0.00/5 (No votes)

See more:

I will explain what i want to do and I am looking for suggestions/ideas for the best way to do it.
I am using ASP.NET/C#

I have an image and I want to highlight certain part of it depending on user input.

The best way I found, is to put another transparent layer on top of it containing predefined polygons for each region I want to highlight. This way I highlight the polygons depending on the input.

My question is what is the best way to create that layer on top of the image?

Also if anyone got other ideas please let me know.

Thanks a lot for any help

Posted 19-Aug-11 3:22am

Youssef_Keyrouz

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)

TheyCallMeMrJames · Answer 1 · 2011-08-19T05:24:00

You can use any one of the widely available drawing libraries.

jsDraw2D[^] has some samples at that link and it's fairly easy to use.

If you need to support transparency, I think you need to venture into canvas. Check out gamejs[^] docs and samples here.

EDIT: My apologies...I thought that you were meaning to let the users DRAW polygons on first read. You can still use method #2 above and incorporate CSS to do the highlighting (on hover, for example).

The other approach would be to use PhotoShop (or a similar tool) that can do 'slices' with hover-over scripts. These usually work in all browsers and are relatively easy to do if you've got the source images. You'll create a 'highlight' layer that is revealed with a mouse over. Lots of tutorials out there so Google away!

Cheers.

VallarasuS · Answer 2 · 2011-08-19T06:06:00

Solution 2

Thats exactly what this articles does with the captured image, take a look at the OnPaint implementation of the AdornerWindow.Cs file.

OneNote Style Screen Capture Utility - with Preview and Auto Save options[^]

Hope it helps.

Regards,
Vallarasu S.

Posted 19-Aug-11 6:06am

VallarasuS