解决mxGraph放大/缩小在非IE浏览器下overlay图标位置不变化的问题
首先要创建一个工具栏。并为工具栏中的放大、缩小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图标位置不变化的问题的更多相关文章
- (转)如何让ActiveXObject( "Microsoft.XmlDom ")对象在非IE浏览器下显示数据?firefox(火狐)
如何让ActiveXObject( "Microsoft.XmlDom ")对象在非IE浏览器下显示数据?firefox(火狐) 2013-09-10 16:01 2152人阅读 ...
- ASP.NET MVC 使用Jquery Uploadify 在非IE浏览器下Http Error的解决方案
解决Uploadify上传控件在非IE浏览器中不工作,需要做如下2步修改: 1.Global.asax文件中,实现Application_BeginRequest函数: void Applicatio ...
- VS2010在非IE浏览器下调试Silverlight程序
以Chrome为例: 第一步:在程序中设置断点. 第二步:右键点击web应用程序的起始页(.html或.aspx文件),选择"浏览方式",选中Chrome或其它非IE浏览器,点&q ...
- 解决百度上传WebUploader在IE浏览器下点击无反应的问题
原因1:IE浏览器不支持H5方式上传,需要使用flash的方式上传 解决方法:在页面head标签添加<meta http-equiv="X-UA-Compatible" co ...
- 解决opacity属性在低版本IE浏览器下失效的方法
以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的op ...
- 规定CSS的属性仅在IE下生效 在非IE浏览器下不生效
css中判断IE版本的语句<!--[if gte IE 6]> Only IE 6/+ <![endif]-->: 1. <!--[if !IE]> 除IE外都可识 ...
- 非ie浏览器必备函数常识
场景描述: 我们都知道IE浏览器和非IE浏览器都有很多功能一样但写法不同,或者各自都有一些自己独特的方法,那么为了保持兼容性和便于编写,我们可以通过这两个方法给非IE浏览器的对象增加自己没有,但IE有 ...
- 用CSS来定义<p>标签,要求实现以下效果:字体颜色再IE6下为黑色,IE7下为红色,IE8下为绿色,其他浏览器下为黄色。
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...
- javascript仿新浪微博图片放大缩小及旋转效果
javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...
随机推荐
- RABBITMQ 协议 AMQP协议
https://baike.baidu.com/item/rabbitmq/9372144?fr=aladdin https://github.com/CopernicaMarketingSoftwa ...
- Kubernetes部署DNS
前言 阅读地址 http://thoreauz.com/2017/04/16/docker/Kubernetes%E9%83%A8%E7%BD%B2DNS%E5%92%8CDashboard/ Kub ...
- nginx安装配置目录
1.nginx日志轮转,用于lograte服务的日志切割. /etc/logrotate.d/nginx 2.cgi配置相关 /etc/nginx/fastcgi_params /etc/nginx/ ...
- [python 学习] random
1.random() 生成一个随机浮点数 import random # x 属于 [0,1) x = random.random() print x 2.uniform() 生成制定范围内的随机浮点 ...
- 在子组件中触发事件,传值给父组件-vue
1.通过$emit触发事件 在子组件<x-test>中触发事件: <button @click="toSearchProduct()">搜索</but ...
- 034:DTL常用过滤器(3)
default过滤器: 如果值被评估为 False .比如 [] , "" , None , {} 等这些在 if 判断中为 False 的值,都会使用 default 过滤器提供 ...
- 碎片记录——JMeter之 http post json对象与参数化调用,以及beanshell 引用Java源码
参考文档 http://jmeter.apache.org/usermanual/component_reference.html#samplers https://blog.csdn.net/qq_ ...
- 对vue的api的研究
Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列属性: silent 类型:boolean 默认值:false 用法: Vue.config.silent = t ...
- orm中 如何模糊匹配某一年的用户和某一事时间段的用户
导入Q查询
- vscode中执行gulp task的简便方法
本文重点是gulp在vscode中执行task任务的方法 如何像webstorm那样简便操作gulp 的task 第1步:安装node.下载地址:https://nodejs.org/zh-cn/ 检 ...