|
|
Rank: Advanced Member
Groups: Administration
, Member
Joined: 1/31/2005
Posts: 386
Points: 403
|
Hi everybody, There was a question from one of our customers - how to create "overview" window for AJAX BitmapViewer control - something like "Navigator" control in Photoshop but simpler, just to indicate which part of large image is currently displayed in the viewer. Maybe it will be interesting for somebody else, so I posted the answer here. The idea is very simple - place small thumbnail on the same page and handle all zoom & scroll events of the BitmapViewer to reflect viewport changes. You can find the sample project in the attachment. It was created with VS2005 and you will need to set references to GraphicsMill and AjaxControls DLLs (they were excluded from the archive to decrease its size). Few words about implementation: in server-side code we load bitmap into the BitmapViewer control and also we create small thumbnail and put it into the AJAX controls public cache. Later it will be linked with a simple "Image" element on the page. The frame on the thumbnail is just a transparent "div" element with visible border. So all other manipulations are performed on client. As usual - any feedback is greatly appreciated, so feel free to comment this post ;) File Attachment(s):
 ImageZooming.zip (211kb) downloaded 5 time(s).
Alex Kon attached the following image(s):
Best wishes, Alex.
|
|
Rank: Advanced Member
Groups: Administration
, Member
Joined: 1/31/2005
Posts: 386
Points: 403
|
Hi everybody, And here is second version of the same sample. Now it not only displays current position in overview window, but also allows user to change it by dragging frame. And we added slider-bar which changes BitmapVievew zoom, so it now looks like Photoshops's Navigator pane. This sample uses slider-bar from AJAX controls toolkit which can be found on official Microsoft ASP.NET site. File Attachment(s):
ImageZooming_v2.zip (213kb) downloaded 5 time(s).
Alex Kon attached the following image(s):
Best wishes, Alex.
|
|
Rank: Newbie
Groups: Member
Joined: 2/7/2008
Posts: 4
Points: 12
|
hi Alex,
1) How can i disable right click on the bitmapviewer control. i want to prevent the users right clicking on the bitmapviewer and click 'save picutre as' and get the visible portion of image.
2)Mouse drag on the overview window in firefox doesn't work. If you have any known browser issues please let me know.
Thanks
Praveen
|
|
Rank: Advanced Member
Groups: Administration
, Member
Joined: 7/28/2003
Posts: 1,207
Points: -292
Location: WA, US
|
Quote:1) How can i disable right click on the bitmapviewer control. i want to prevent the users right clicking on the bitmapviewer and click 'save picutre as' and get the visible portion of image. You should modify _addTiles method of BitmapViewer class ( BitmapViewer.js): Code:
_addTiles : function(s) {
for (var z = 0; z < s.tiles.length; z++) {
var t = s.tiles[z];
var cl = new GraphicsMill.Rectangle(t.x, t.y, t.w, t.h);
var wl = this.workspaceToControlRectangle(cl).round();
wl = this.controlToContentRectangle(wl);
var url = String.format(s.baseName, z);
var i = this._doc.createElement("img");
i.galleryImg = "no";
i.width = wl.width;
i.height = wl.height;
i.style.position = "absolute";
i.style.left = wl.x + "px";
i.style.top = wl.y + "px";
i.display = "none";
i.ondrag = function() {
return false
};
i.oncontextmenu = function() {
return false
};
this._tilesCtx.appendChild(i);
this._tiles.push({location : cl, zoom : s.zoom, url : url, img : i});
}
},
Best regards, Fedor Skvortsov
|
|
Rank: Advanced Member
Groups: Administration
, Member
Joined: 8/3/2003
Posts: 471
Points: 243
|
Hello, To get rid of the problem with drag operation on overview window in Firefox3 you need to disable selection for frame1 element (rectangle in the overview window). Here is the code that you need to append to initialize: function() method in OverviewWindow.js: Code:
var r = this.get_frame();
r.unselectable = "on";
r.style.MozUserSelect = "none";
r.style.cursor = "default";
I have attached the modified project to this post. File Attachment(s):
ImageZooming_v3.zip (214kb) downloaded 1 time(s).
Sincerely yours, Dmitry Sevostjanov.
|
|
|
Guest |