Image viewer with a twist

[Guest]

Hi all,
Im a little new to ASP.NET.

I'm looking to create an image viewer that zooms in, pretty common. But I
need to draw a box on the 1:1 scale image and 'zoom in' on another picture
box. The box outlining the zoom area would change in size according to the
level of zoom of course.

The help I need is how to get the target box to appear over the 1:1 scale
image. I want it to be able to be dragged to a new location in the full
scale image so I'm thinking it will need to be a control.

Thx in advance for any hints/links
troy

 

[Lucas Tam]

Hi all,
Im a little new to ASP.NET.

I'm looking to create an image viewer that zooms in, pretty common.
But I need to draw a box on the 1:1 scale image and 'zoom in' on
another picture box. The box outlining the zoom area would change in
size according to the level of zoom of course.

The help I need is how to get the target box to appear over the 1:1
scale image. I want it to be able to be dragged to a new location in
the full scale image so I'm thinking it will need to be a control.

Would this work?

Zoom Factor * Width of Zoomed Image = Original Width
Zoom Factor * Length of Zomed Image = Original Length

Then you can easily draw a box of Original Width * Original Length.

To center the box, just take 1/2 Original Width and 1/2 Original Length.

If you want the box draggable, you'll have to do some javascript/dhtml
wizardry : )

 

[Kevin Spencer]

Okay, we're talking about a client-server app using HTML as an interface.
So, on the client, we're restricted to what HTML can do, which isn't much.
Dragging and dropping are not difficult, and can be done with JavaScript.
But the rest of it sounds like an ActiveX control or Java applet in the
browser.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Neither a follower nor a lender be.

 

[Guest]

Thx guys, thats what i was thinking too.

 

[Brian Lowe]

Why do you need ASP.Net to do this? Isn't it all client-side and JavaScript
anyway? (It was when I did it 3 years ago.)

In my totally client side page I had a thumbnail, say 200px*200px with an
overlaid gif that was transparent except for a 1px border. The gif was
40px*40px.

I had another image on the page whose source was maybe 2000px*2000px,
displayed in a div/layer limited to 200px*200px and with overflow set to
hidden.

At startup the page displayed with the gif starting at 1px & 1px over the
thumbnail and the large image positioned at 1px & 1px in the clipping
container.

I had javascript attached to the overlay gif to catch any drag event. The
movement was limited so that the rectangle stayed within the bounds of the
thumbnail and when the rectangle was moved the large image was shifted by a
corresponding amount beeath the clipping layer, giving the illusion of a
viewscreen magnifying that portion of the thumbnail under the rectangle.

Addition of some simple math is needed to give the adjustable zoom level you
mention.

Brian Lowe
---------@