Solve the problem that the position of the overlay icon of mxgraph in a non-IE browser does not change.

First, create a toolbar and define an event for the zoom-in or zoom-out button in the toolbar.

<Div id = "toolbar" style = "float: Left; margin-top: 5px; margin-left: 5px; line-Height: 35px; ">   </div>

VaR canvas = yleditor. ylcanvas; // yleditor. ylcanvas is the global object of an mxgraph instance I have defined. VaR toolbar = ('{toolbar'{}toolbar.find('img'}.css ({'margin-Right': '5px ', 'cursor': 'pointer '}). click (function () {Switch ($ (this ). ATTR ('action') {Case 'zoomin': canvas. zoomin (); break; Case 'zoomout': canvas. zoomout (); break ;}});

The following is a method for creating overlay. In this method, three overlay icons are created for the graph, one in the upper left corner of the graph and two in the upper right corner.

Ylcommon. createoverlay = function (cell) {var canvas = yleditor. ylcanvas; var IMG, point, align = 'left', title; var iconsize = 16; IMG = '.. /.. /images/icon-unlock.png '; Title =' unlocked-click to lock '; point = new mxpoint (cell. geometry. width-15, 10); var overlay = new mxcelloverlay (New mximage (IMG, iconsize, iconsize), title, align, 'top', point, 'pointer '); overlay. addlistener (mxevent. click, function (sender, evt2) {// do something}); canvas. addcelloverlay (cell, overlay); IMG = '.. /.. /images/icon-diagram.png '; Title = 'radiation map'; point = new mxpoint (cell. geometry. width-35, 10); overlay = new mxcelloverlay (New mximage (IMG, iconsize, iconsize), title, align, 'top', point, 'pointer '); overlay. addlistener (mxevent. click, function (sender, evt2) {// do something}); canvas. addcelloverlay (cell, overlay); IMG = 'src/images/properties.gif '; Title = 'properties'; point = new mxpoint (27, 10 ); overlay = new mxcelloverlay (New mximage (IMG, iconsize, iconsize), title, align, 'top', point, 'pointer '); overlay. addlistener (mxevent. click, function (sender, evt2) {// do something}); canvas. addcelloverlay (cell, overlay );}

Run the above Code. The Code is normal in IE, but not displayed in Firefox and Google browsers. The position of the overlay icon is not changed. The main reason is that the ratio of the canvas display changes after the zoomin () and zoomout () methods are called, while the coordinates of overlay are fixed. So as long as the overlay coordinates are created based on the ratio, will the problem be solved? Okay. Next we will rebuild the overlay creation method.

Ylcommon. createoverlay = function (cell) {var canvas = yleditor. ylcanvas; var IMG, point, align = 'left', title; var iconsize = 16; var scale = canvas. getview (). getscale (); // get the display ratio of the current canvas. Multiply the X and Y coordinates by the ratio IMG = '.. /.. /images/icon-unlock.png '; Title =' unlocked-click to lock '; point = new mxpoint (cell. geometry. width-15) * scale, 10 * scale); var overlay = new mxcelloverlay (New mximage (IMG, iconsize, iconsize), title, align, 'top', point, 'pointer '); overlay. addlistener (mxevent. click, function (sender, evt2) {// do something}); canvas. addcelloverlay (cell, overlay); IMG = '.. /.. /images/icon-diagram.png '; Title = 'radiation map'; point = new mxpoint (cell. geometry. width-35) * scale, 10 * scale); overlay = new mxcelloverlay (New mximage (IMG, iconsize, iconsize), title, align, 'top', point, 'pointer '); overlay. addlistener (mxevent. click, function (sender, evt2) {// do something}); canvas. addcelloverlay (cell, overlay); IMG = 'src/images/properties.gif '; Title = 'properties'; point = new mxpoint (27 * scale, 10 * scale ); overlay = new mxcelloverlay (New mximage (IMG, iconsize, iconsize), title, align, 'top', point, 'pointer '); overlay. addlistener (mxevent. click, function (sender, evt2) {// do something}); canvas. addcelloverlay (cell, overlay );}

After the transformation is completed, is the problem solved? After verification, it is not resolved. Why? It may be because this method takes effect only when overlay is created. When the overlay is scaled in or out, the overlay is not re-created. I think mxgraph will re-render overlay based on this ratio. Okay, so I will try to zoom in and out and recreate overlay.

Define a method for recreating overlay.

Ylcommon. resetoverlay = function () {var scale = yleditor. ylcanvas. getview (). getscale (); var oldselectcells = yleditor. ylcanvas. getselectioncells (); // obtain the currently selected image if (! Mxclient. is_ie) {yleditor. ylcanvas. selectall (); var cells = yleditor. ylcanvas. getselectioncells (); yleditor. ylcanvas. clearselection (); yleditor. ylcanvas. setselectioncells (oldselectcells); // reselect yleditor. ylmodel. beginupdate (); For (VAR I = 0; I <cells. length; I ++) {yleditor. ylcanvas. clearcelloverlays (cells [I]); // remove overlay ylcommon. createoverlay (cells [I]); // recreate overlay} yleditor. ylmodel. endupdate ();}}

Call this method when you click zoom in or zoom out.

toolbar.find('img').css( {    'margin-right' : '5px',    'cursor' : 'pointer'}).click(function() {    switch ($(this).attr('action')) {        case 'zoomIn':            canvas.zoomIn();            ylCommon.resetOverlay();            break;        case 'zoomOut':            canvas.zoomOut();            ylCommon.resetOverlay();            break;    }});

Now, the problem is finally solved.