首先要创建一个工具栏。并为工具栏中的放大、缩小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. HashMap、Hashtable和ConcurrentHashMap的区别

    HashTable 底层数组+链表实现,无论key还是value都不能为null,线程安全,实现线程安全的方式是在修改数据时锁住整个HashTable,效率低,ConcurrentHashMap做了相 ...

  2. Rsync+inotify 数据同步应用指南

    Rsync+Inotify-tools (1):Inotify-tools 只能记录下被监听的目录发生了变化(包括增加.删除.修改),并没有 把具体是哪个文件或者哪个目录发生了变化记录下来: (2): ...

  3. Tomcat部署虚拟主机

    使用Tomcat部署加密虚拟主机,实现: a.使用www.a.com域名访问的页面根路径为/usr/local/tomcat/a/base b.使用www.b.com域名访问的页面根路径为/usr/l ...

  4. readlink 查看符号链接的文件的内容

    1. 命令功能 readlink 查看软链接文件里的真实内容. 2. 语法格式 readlink [option]  file 参数 参数说明 -f 后跟软链接文件 3. 使用范例 范例1 查看文件链 ...

  5. [题目] 4座塔的Hanoi

    题目地址 经典递推题. 解出 n (1<=n<=12) 个盘子 \(4\) 座塔的Hanoi(汉诺塔)问题最少需多少步?(1到12每个答案分别占一行) 题解 在原Hanoi问题中 \(d[ ...

  6. Thinkphp 请求和响应

    一. Request对象获取方法 1. request() 助手函数获取 2. think\Request 类获取 3.利用框架注入Request对象  Request方法时单利方法 在think框架 ...

  7. python高级:垃圾回收机制

    ---恢复内容开始--- 垃圾回收机制 1.计数引用机制 就是一个变量.数据结构.对象当没有人引用时,python的会启用垃圾回收机制,将其从内存中删除. 怎么看引用的次数呢?sys模块提供的sys. ...

  8. 033:DTL常用过滤器(2)

    date过滤器: date过滤器:将一个日期按照指定的格式,格式化成字符串.示例代码如下: views.py: from datetime import datetime def cur_date(r ...

  9. ubuntu + JetSonNano+OpenCV3.4.8

    首先强调一点,如果要配置darknet环境,不建议安装该版本!!! 安装opencv前,建议先检测自己的系统是否已经装过其他版本, 检查方式: (1)查看是否安装opencv库: pkg-config ...

  10. 阿里云祝顺民(江鹤):云原生SDWAN加速企业上云 引领未来智能网络

    第二届中国SD-WAN峰会于11月16日在北京盛大开幕,阿里云以黄金赞助商之名隆重参与.作为全球前三,亚太第一的云计算厂商,阿里云一直引领云网技术的演进及应用落地.过去一年,阿里云发布以云为中心的云原 ...