解决mxGraph放大/缩小在非IE浏览器下overlay图标位置不变化的问题_mxgraph执行完事件后图被缩放了

相关文章推荐
仗义的楼房 · 驻塞尔维亚使馆提醒中国公民赴塞旅行安全注意事项· 3 月前 ·
仗义的电脑桌 · varchar类型存储英文和汉字占用的字节和 ...· 4 月前 ·
霸气的充电器 · 阿波罗计划:美国上世纪六七十年代的登月计划· 6 月前 ·
满身肌肉的铁板烧 · 人力资源社会保障部办公厅国务院扶贫办综合司关 ...· 7 月前 ·
酒量小的拐杖 · 和消费观不合的人在一起，到底有多累？_男生· 1 年前 ·
首先要创建一个工具栏，并为工具栏中的放大、缩小按钮定义事件。
<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" />
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;
});好了，问题终于解决了。 
                    首先要创建一个工具栏，并为工具栏中的放大、缩小按钮定义事件。          var canvas=ylEditor.ylCanvas;//ylEditor.ylCanvas是我定义的一个mxGraph实例的全局对象。var toolbar= $('#toolbar');toolbar.find('img').css( {    'margin-right' : '5p
1.1 作用
mxGraph继承自mxEventSource以实现基于Web的图形组件的功能性方面。要激活平移和连接，使用setPanning和setConnectable，对于框线选择，必须创建一个新的mxRubberband实例。默认情况下，以下监听器添加到mouseListeners：
tooltipHandler：显示工具提示的mxTooltipHan...
var graphContainer = document.getElementById('mxGraph');
var graph = new mxGraph(graphContainer);
// 滚轮缩放事件
mxEvent.addMouseWheelListener(function (evt, scrollUp) {
	if (scrollUp) {
  		// 如果是向上滚滚轮，放大
  		graph.zoomIn();
  	} else {
				主要功能介绍
最近需要开发一款营销流程图项目，需要各种节点流程任务的拖拽跑出数据结果，需要用到节点的增删改查，插销删除流程测试执行各种操作，于是发现了mxgraph这款插件。
mxGraph是一款基于web的绘制流程图的javascript库工具
英文官方网站：http://jgraph.github.io/mxgraph/docs/js-api/files/index-txt.html
gitDemo地址：https://github.com/jgraph/mxgraph2
npm可以直接安装
				1、webpack配置文件，增加插件transform-es3-property-literals和transform-es3-member-expression-literals
const webpackdevConfig = {
  entry: entry,
  output: {
    path: path.join(__dirname, 'dist/js'),
    filena
				鱼骨图由日本管理大师石川馨先生所发明，故又名石川图。鱼骨图是一种发现问题“根本原因”的方法，它也可以称之为“Ishikawa”或者“因果图”。其特点是简捷实用，深入直观。它看上去有些象鱼骨，问题或缺陷（即后果）标在"鱼头"外。在鱼骨上长出鱼刺，上面按出现机会多寡列出产生生产问题的可能原因，有助于说明各个原因之间如何相互影响。
       这玩意儿就体现了一个什么5w1h的管理方法，经过我将近4
				父页中的iframe标签。
$('<iframe id="iframes" src="' + url + '" width="100%" height="' + ($.browser.msie ?
document.body.clientHeight - 20 : (document.body.clientHeight - 120)) + '" frameborder="0" marginhe
				要禁止 mxGraph 中的图标放大缩小，可以通过设置 mxImageShape 的固定大小来实现。具体的做法是在创建 mxImageShape 的时候，设置其固定的宽度和高度，即可禁止图标随着图形的放大缩小而改变大小。例如：
var img = new mxImage('/path/to/image.png', width, height);
var shape = new mxImageShape(new mxRectangle(0, 0, width, height), img);
shape.setPreserveImageAspect(false); // 可选，设置图标不保持长宽比
shape.setNonResizeable(true); // 设置图标不可缩放
其中，width 和 height 分别为图标的宽度和高度，setPreserveImageAspect(false) 可选，表示图标不保持长宽比，setNonResizeable(true) 表示图标不可缩放。这样，在 mxGraph 中，无论如何缩放图形，图标的大小都会保持不变。