Hello,

I've been trying to find examples or documentation regarding zoom for web diagram view.
However, I can't find anything.

Just calling Zoom on my Nevron.Diagram.WebForm.NDrawingView does not seem do have any effect.

Can anybody post a sample or maybe a pointer to the KB article?

Hi,

Please, visit the Nevron Diagram Web Examples and take a look at the Maps examples. They demonstrate how to zoom in and out a diagram in web forms environment.

Best Regards,
Nevron Support Team

another method used on web pages is to change the width and height properties of the image in the web page. This works with the imagemap as well so hotspots can be scaled. Here are examples, albeit using some specific items for my project (anything prefixed with DataStar_ is our own Javascript namespace.). The slider used to set the zoom factor on the UI is YUI's.



function AnalysisResults_SetZoom(newZoom, imgId) {
var txt="", txt1="", n1=-1, w=0, h=0, i=0, imgw=0, imgh=0, scale=0;
try {
if (newZoom==null || typeof(newZoom)=='undefined') return;
if (imgId!="") imgId=imgId.toLowerCase();
if (imgId=="sliderzoom") {
scale = 4* parseInt(newZoom); //400% max
DataStar_UILogic.setDivProp("div_table_diagram_lbl_zoom","innerhtml",scale.toString() + "%");
scale /= 100.0;
txt=DataStar_UILogic.getDivProp("div_table_diagram_image", "src");
if (txt!="") txt=txt.toLowerCase();
n1=-1;
if (txt.indexOf("datastar/download/")>-1) {
txt=txt.substr(txt.indexOf("datastar/download/"));
txt=txt.replace(/%20/g, " ");
for (i=0; i txt1= images[i].url;
if (txt1!="") txt1=txt1.toLowerCase();
if (txt.indexOf(txt1)>-1) {
n1=i;
break;
}
}
}
if (n1>-1) {
imgw= Math.round(images[n1].width * scale);
imgh= Math.round(images[n1].height * scale);
txt=DataStar_UILogic.getDivProp("div_table_diagram_container", "width");
if (txt.indexOf("px")>-1) txt=txt.substr(0, txt.indexOf("px"));
if (DataStar_function.IsNumber("integer", txt)) w=parseInt(txt)-10;
txt=DataStar_UILogic.getDivProp("div_table_diagram_container", "height");
if (txt.indexOf("px")>-1) txt=txt.substr(0, txt.indexOf("px"));
if (DataStar_function.IsNumber("integer", txt)) h=parseInt(txt)-10;
//set container scroll if pic size is larger
if (w< imgw || h< imgh) {txt1="scroll";}
else {txt1="hidden";}
DataStar_UILogic.setDivProp("div_table_diagram_container", "overflow", txt1);
DataStar_UILogic.setDivProp("div_table_diagram_image", "width", imgw.toString() + "px");
DataStar_UILogic.setDivProp("div_table_diagram_image", "height", imgh.toString() + "px");
if (imgw < w) {txt1= parseInt((w-imgw)/2).toString();}
else {txt1="0";}
txt1 += "px";
DataStar_UILogic.setDivProp("div_table_diagram_image", "marginleft", txt1);
AnalysisResults_SetImageMap(n1, scale);
}
}
}
catch (ex) {if (debugmodejs) alert("Error AnalysisResults_SetZoom:" + ex.message);}
} //end AnalysisResults_SetZoom




function AnalysisResults_SetImageMap(nimg, scale) {
var obj=null, txt="", txt1="", txt2="", w=0, h=0, i=0, x=0, y=0, flag=false;
try {
if (scale==null || typeof(scale)=='undefined') scale=1.0;
//clear imagemap
if (document.all.div_table_diagram_imagemap!=null && typeof(document.all.div_table_diagram_imagemap)!='undefined') {
for (i=document.all.div_table_diagram_imagemap.areas.length-1; i>=0; i--) {
document.all.div_table_diagram_imagemap.areas.remove(i);
}
}
for (i=0; i< images[nimg].imagepos.length; i++) {
txt= images[nimg].imagepos[i];
if (txt!="") txt=txt.toLowerCase();
if (txt.indexOf("(")>-1) {
txt1=txt.substr(txt.lastIndexOf("(")+1);
if (txt1.indexOf(")")>-1) txt1=txt1.substr(0, txt1.indexOf(")"));
txt=txt.substr(0, txt.lastIndexOf("("));
x=0; y=0; w=0; h=0;
flag=true;
if (txt1.indexOf(",")>-1) {
txt2=txt1.substr(0, txt1.indexOf(","));
txt1= txt1.substr(txt1.indexOf(",")+1);
if (DataStar_function.IsNumber("real", txt2)) x=parseInt(txt2);
else flag=false;
}
if (flag && txt1.indexOf(",")>-1) {
txt2=txt1.substr(0, txt1.indexOf(","));
txt1= txt1.substr(txt1.indexOf(",")+1);
if (DataStar_function.IsNumber("real", txt2)) y=parseInt(txt2);
else flag=false;
}
if (flag && txt1.indexOf(",")>-1) {
txt2=txt1.substr(0, txt1.indexOf(","));
txt1= txt1.substr(txt1.indexOf(",")+1);
if (DataStar_function.IsNumber("real", txt2)) w=parseInt(txt2);
else flag=false;
}
if (flag && txt1!="") {
txt2=txt1;
if (DataStar_function.IsNumber("real", txt2)) h=parseInt(txt2);
else flag=false;
}
if (flag) {
if (scale!=1.0) {
x = Math.round(x*scale);
y = Math.round(y*scale);
w = Math.round(w*scale);
h = Math.round(h*scale);
}
obj= document.createElement("area");
obj.coords = x.toString() + "," + y.toString() + "," + w.toString() + "," + h.toString(); //top-left, bot-rt
obj.shape="rect";
obj.id= "imagemap_area_" + txt;
document.all.div_table_diagram_imagemap.areas.add(obj);
}
}
}
}
catch (ex) {if (debugmodejs) alert("Error AnalysisResults_SetImageMap:" + ex.message);}
obj=null;
} //end AnalysisResults_SetImageMap