mxGraph实现节点尺寸适应内容尺寸

mxGraph实现节点尺寸适应内容尺寸


默认label插入后节点不会随文字长度改变
默认Label插入后节点不会随文字长度改变
修改后节点会随字体长度、高度改变
在这里插入图片描述

                               if (cell.vertex!=1){
                                    return ;
                                }
                                var table = document.createElement('table');
                                //存储最长的一个td
                                let fontLength =0;
                                let tdCount = 0;
                                let re = /[\u4E00-\u9FA5]/g; //测试中文字符的正则

                                var body = document.createElement('tbody');
                                var tr1 = document.createElement('tr');
                                var td1 = document.createElement('td');
                                td1.id = cell.id;
                                td1.style.textAlign = 'center';
                                if (cell.value != undefined && cell.value != "" && JSON.parse(cell.value).first != undefined) {
                                    mxUtils.write(td1, JSON.parse(cell.value).first);
                                    tr1.appendChild(td1);
                                    body.appendChild(tr1);
                                    tdCount+=1;
                                    //计算中文的个数,中文最宽,按两倍宽度数量计算
                                    var leng = td1.innerHTML.match(re)==null?0:td1.innerHTML.match(re).length;
                                    fontLength = td1.innerHTML.length+leng;
                                }

                                var tr2 = document.createElement('tr');
                                var td2 = document.createElement('td');
                                td2.style.textAlign = 'center';
                                if (cell.value != undefined && cell.value != "" && JSON.parse(cell.value).second != undefined) {
                                    mxUtils.write(td2, JSON.parse(cell.value).second);
                                    tr2.appendChild(td2);
                                    body.appendChild(tr2);
                                    tdCount+=1;
                                    var leng = td2.innerHTML.match(re)==null?0:td2.innerHTML.match(re).length;
                                    if (fontLength<td2.innerHTML.length+leng){
                                        fontLength = td2.innerHTML.length+leng;
                                    }
                                }

                                var tr3 = document.createElement('tr');
                                var td3 = document.createElement('td');
                                td3.style.textAlign = 'center';
                                if (cell.value != undefined && cell.value != "" && JSON.parse(cell.value).three != undefined) {
                                    mxUtils.write(td3, JSON.parse(cell.value).three);
                                    tr3.appendChild(td3);
                                    body.appendChild(tr3);
                                    tdCount+=1;
                                    var leng = td3.innerHTML.match(re)==null?0:td3.innerHTML.match(re).length;
                                    if (fontLength<td3.innerHTML.length+leng){
                                        fontLength = td3.innerHTML.length+leng;
                                    }
                                }

                                //计算字体宽度高度
                                var geo = graph.getCellGeometry(cell);
                                geo = geo.clone();
                                let cellStyle = graph.getCellStyle(cell);
                                let fontSize = cellStyle.fontSize==undefined?11:cellStyle.fontSize
                                //mxgraph默认字体大小为11
                                //宽度*6 高度*20是经验值  根据实际需要
                                if(geo.width<fontLength*6*(fontSize/11)){
                                    geo.width =fontLength*6*(fontSize/11);
                                }
                                if(geo.height<(fontSize/11)*20*tdCount){
                                    geo.height =(fontSize/11)*20*tdCount;
                                }
                                graph.getModel().setGeometry(cell, geo);

                                table.appendChild(body);
                                return table;

方法会将有关vertex长宽的style写入属性

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值