首先要创建一个工具栏。并为工具栏中的放大、缩小button定义事件。

<div id="toolbar" style="float:left;margin-top:5px;margin-left: 5px;line-height: 35px;">
<img src="src/images/zoomin.gif" action="zoomIn" title="放大" width="16" height="16" />
<img src="src/images/zoomout.gif" action="zoomOut" title="缩小" width="16" height="16" />
</div>

var canvas=ylEditor.ylCanvas;//ylEditor.ylCanvas是我定义的一个mxGraph实例的全局对象。
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;
}
});

以下是一个创建overlay的方法,这种方法中为图形创建了3个overlay图标,在图形的左上角一个。右上角两个。

ylCommon.createOverlay = function (cell) {
var canvas=ylEditor.ylCanvas;
 var img, point, align = 'left', title;
var iconSize = 16; img = '../../images/icon-unlock.png';
title = '已解锁-点击锁定';
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 = '辐射图';
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 = '属性';
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);
}

运行以上代码。在IE下正常,在火狐和谷歌浏览器下显示不正常,overlay图标位置没有发生改变。主要原因是由于调用zoomIn()和zoomOut()方法之后画布显示比例发生了变化,而overlay的坐标是固定的。

那么仅仅要对overlay坐标也依据这个比例来创建是不是就解决这个问题了呢?好,以下就来改造创建overlay的这种方法。

ylCommon.createOverlay = function (cell) {
var canvas=ylEditor.ylCanvas;
 var img, point, align = 'left', title;
var iconSize = 16;
var scale=canvas.getView().getScale();//获取当前画布的显示比例。把坐标的x,y都乘以这个比例
img = '../../images/icon-unlock.png';
title = '已解锁-点击锁定';
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 = '辐射图';
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 = '属性';
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);
}

改造完毕。问题是否攻克了呢?经过验证,并没有解决,这是为什么呢?可能是由于这种方法仅仅是针对创建overlay的时候生效。在运行放大缩小的时候,并不会再又一次创建overlay。我想当然的觉得mxGraph会依据这个比例来又一次渲染overlay。好吧,那我就在运行放大缩小之后。再又一次创建一下overlay的好了。

定义一个又一次创建overlay的方法。

ylCommon.resetOverlay=function(){
var scale=ylEditor.ylCanvas.getView().getScale();
var oldSelectCells=ylEditor.ylCanvas.getSelectionCells();//获取当前选中的图形
if(!mxClient.IS_IE){
ylEditor.ylCanvas.selectAll();
var cells=ylEditor.ylCanvas.getSelectionCells();
ylEditor.ylCanvas.clearSelection();
ylEditor.ylCanvas.setSelectionCells(oldSelectCells);//又一次选中
ylEditor.ylModel.beginUpdate();
for(var i=0;i<cells.length;i++){
ylEditor.ylCanvas.clearCellOverlays(cells[i]);//移除overlay
ylCommon.createOverlay(cells[i]);//又一次创建overlay
}
ylEditor.ylModel.endUpdate();
}
}

然后在点击放大和缩小的时候调用一下这种方法。

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;
}
});

好了。问题最终攻克了。

解决mxGraph放大/缩小在非IE浏览器下overlay图标位置不变化的问题的更多相关文章

  1. (转)如何让ActiveXObject( "Microsoft.XmlDom ")对象在非IE浏览器下显示数据?firefox(火狐)

    如何让ActiveXObject( "Microsoft.XmlDom ")对象在非IE浏览器下显示数据?firefox(火狐) 2013-09-10 16:01 2152人阅读 ...

  2. ASP.NET MVC 使用Jquery Uploadify 在非IE浏览器下Http Error的解决方案

    解决Uploadify上传控件在非IE浏览器中不工作,需要做如下2步修改: 1.Global.asax文件中,实现Application_BeginRequest函数: void Applicatio ...

  3. VS2010在非IE浏览器下调试Silverlight程序

    以Chrome为例: 第一步:在程序中设置断点. 第二步:右键点击web应用程序的起始页(.html或.aspx文件),选择"浏览方式",选中Chrome或其它非IE浏览器,点&q ...

  4. 解决百度上传WebUploader在IE浏览器下点击无反应的问题

    原因1:IE浏览器不支持H5方式上传,需要使用flash的方式上传 解决方法:在页面head标签添加<meta http-equiv="X-UA-Compatible" co ...

  5. 解决opacity属性在低版本IE浏览器下失效的方法

    以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的op ...

  6. 规定CSS的属性仅在IE下生效 在非IE浏览器下不生效

    css中判断IE版本的语句<!--[if gte IE 6]> Only IE 6/+ <![endif]-->: 1. <!--[if !IE]> 除IE外都可识 ...

  7. 非ie浏览器必备函数常识

    场景描述: 我们都知道IE浏览器和非IE浏览器都有很多功能一样但写法不同,或者各自都有一些自己独特的方法,那么为了保持兼容性和便于编写,我们可以通过这两个方法给非IE浏览器的对象增加自己没有,但IE有 ...

  8. 用CSS来定义<p>标签,要求实现以下效果:字体颜色再IE6下为黑色,IE7下为红色,IE8下为绿色,其他浏览器下为黄色。

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  9. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

随机推荐

  1. JSP学习(2)

    JSP学习(2) JSP简介 Java Server Page,其根本是一个简单Servlet设计. 常用的动态网站开发技术 JSP:安全性高,适合开发大型的,企业级或分布式的Web应用程序. Asp ...

  2. 通过busybox制作根文件系统

    通过busybox制作根文件系统可以自定义选项,在制作的根文件系统中添加需要的命令,指定生成的根文件系统到相应的目录下. 一. 根文件系统的获取方式--->官网: https://busybox ...

  3. [python 学习] requests 库的使用

    1.get请求 # -*- coding: utf-8 -*- import requests URL_IP = "http://b.com/index.php" pyload = ...

  4. [洛谷P1095]NOIP2007 普及组T3 守望者的逃离

    问题描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上.为了杀死守望者,尤迪安开始对这个荒岛施咒,这座岛很快就会 ...

  5. hdu 6134: Battlestation Operational (2017 多校第八场 1002)【莫比乌斯】

    题目链接 比赛时没抓住重点,对那个受限制的“分数求和”太过关心了..其实如果先利用莫比乌斯函数的一个性质把后面那个[gcd(i,j)=1]去掉,那么问题就可以简化很多.公式如下 这和之前做过的一道题很 ...

  6. 01-跨域-jsonp原理

    jsonp能跨域,并不是因为它发送了ajax请求,而是利用动态创建的script标签. script标签没有收到浏览器同源策略的限制,是可以跨域访问的. 创建的script标签,把其src指向请求的服 ...

  7. libopencv_imgcodecs3.so.3.3.1: undefined reference to `TIFFReadDirectory@LIBTIFF_4.0

    ubundu 编译 C++工程时遇到的: 解决方案: https://blog.csdn.net/qq_29572513/article/details/88742652

  8. 基于 Flink 的实时数仓生产实践

    数据仓库的建设是“数据智能”必不可少的一环,也是大规模数据应用中必然面临的挑战.在智能商业中,数据的结果代表了用户反馈.获取数据的及时性尤为重要.快速获取数据反馈能够帮助公司更快地做出决策,更好地进行 ...

  9. Axios 安卓4.4不兼容的问题

    问题:Vue在使用Axios做接口请求时,如果是安卓4.4系统会发生报错,原因是安卓4.4不支持ES6的Promise语法 解决方案: 1.安装: npm install babel-polyfill ...

  10. Nginx的启动、停止与重启---linux

    一.选定安装文件目录 可以选择任何目录 cd /usr/local/src 二.安装PCRE库 ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcr ...