1、如果需要将label靠左边对齐，则必须重写底层源码
新增mxText的一个构造器，主要是增加了一个参数：x（代表当前的cell）
1 function mxText(a, b, c, d, e, f, g, h, k, i, l, m, n, o, p, q, t, u, v, w, x) { 2 this.value = a; 3 this.bounds = b; 4 this.color = e != null ? e : "black"; 5 this.align = c != null ? c : ""; 6 this.valign = d != null ? d : ""; 7 this.family = f != null ? f : mxConstants.DEFAULT_FONTFAMILY; 8 this.size = g != null ? g : mxConstants.DEFAULT_FONTSIZE; 9 this.fontStyle = h != null ? h : 0; 10 this.spacing = 0; 11 this.spacingTop = 0; 12 //this.spacingRight = x.cell.geometry.height/2 - (this.size * 1.25 * a.length); 13 this.spacingRight = 0; 14 this.spacingBottom = 0; 15 this.spacingLeft = 0; 16 this.horizontal = true; 17 this.background = p; 18 this.border = q; 19 this.wrap = t != null ? t : false; 20 this.clipped = u != null ? u : false; 21 this.overflow = v != null ? v : "visible"; 22 this.labelPadding = w != null ? w : 0 23 }
重写createTabel方法
1 mxCellRenderer.prototype.createLabel = function(a, b) { 2 var c = a.view.graph; 3 c.getModel().isEdge(a.cell); 4 if (a.style[mxConstants.STYLE_FONTSIZE] > 0 || a.style[mxConstants.STYLE_FONTSIZE] == null) { 5 var d = (c.isHtmlLabel(a.cell) || b != null && mxUtils.isNode(b)) && c.dialect == mxConstants.DIALECT_SVG; 6 //alert(a.cell.value + '-' + b); 7 //dongyj add :其中b=a.cell.value 8 if (!a.cell.id && a.cell.id.indexOf("_swimlane") >= 0 && b) { 9 a.text = new mxText(b, new mxRectangle, a.style[mxConstants.STYLE_ALIGN] || mxConstants.ALIGN_CENTER, c.getVerticalAlign(a), a.style[mxConstants.STYLE_FONTCOLOR], a.style[mxConstants.STYLE_FONTFAMILY], a.style[mxConstants.STYLE_FONTSIZE], 10 a.style[mxConstants.STYLE_FONTSTYLE], a.style[mxConstants.STYLE_SPACING], a.style[mxConstants.STYLE_SPACING_TOP], a.style[mxConstants.STYLE_SPACING_RIGHT], a.style[mxConstants.STYLE_SPACING_BOTTOM], a.style[mxConstants.STYLE_SPACING_LEFT], a.style[mxConstants.STYLE_HORIZONTAL], a.style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR], a.style[mxConstants.STYLE_LABEL_BORDERCOLOR], c.isWrapping(a.cell) && c.isHtmlLabel(a.cell), c.isLabelClipped(a.cell), a.style[mxConstants.STYLE_OVERFLOW], a.style[mxConstants.STYLE_LABEL_PADDING], a); 11 } else { 12 //alert(a.cell.geometry.width); 13 //a.cell.geometry.height; 14 15 a.text = new mxText(b, new mxRectangle, a.style[mxConstants.STYLE_ALIGN] || mxConstants.ALIGN_CENTER, c.getVerticalAlign(a), a.style[mxConstants.STYLE_FONTCOLOR], a.style[mxConstants.STYLE_FONTFAMILY], a.style[mxConstants.STYLE_FONTSIZE], 16 a.style[mxConstants.STYLE_FONTSTYLE], a.style[mxConstants.STYLE_SPACING], a.style[mxConstants.STYLE_SPACING_TOP], a.style[mxConstants.STYLE_SPACING_RIGHT], a.style[mxConstants.STYLE_SPACING_BOTTOM], a.style[mxConstants.STYLE_SPACING_LEFT], a.style[mxConstants.STYLE_HORIZONTAL], a.style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR], a.style[mxConstants.STYLE_LABEL_BORDERCOLOR], c.isWrapping(a.cell) && c.isHtmlLabel(a.cell), c.isLabelClipped(a.cell), a.style[mxConstants.STYLE_OVERFLOW], a.style[mxConstants.STYLE_LABEL_PADDING], a); 17 } 18 a.text.opacity = a.style[mxConstants.STYLE_TEXT_OPACITY]; 19 a.text.dialect = d ? mxConstants.DIALECT_STRICTHTML : a.view.graph.dialect; 20 this.initializeLabel(a); 21 var e = false, 22 f = function(b) { 23 var d = a; 24 if (mxClient.IS_TOUCH || e) { 25 d = mxEvent.getClientX(b); 26 b = mxEvent.getClientY(b); 27 b = mxUtils.convertPoint(c.container, d, b); 28 d = c.view.getState(c.getCellAt(b.x, b.y)) 29 } 30 return d 31 }, 32 d = mxClient.IS_TOUCH ? "touchmove" : "mousemove", 33 g = mxClient.IS_TOUCH ? "touchend" : "mouseup"; 34 mxEvent.addListener(a.text.node, mxClient.IS_TOUCH ? "touchstart" : "mousedown", mxUtils.bind(this, function(b) { 35 if (this.isLabelEvent(a, b)) { 36 c.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(b, a)); 37 e = c.dialect != mxConstants.DIALECT_SVG && mxEvent.getSource(b).nodeName == "IMG" 38 } 39 })); 40 mxEvent.addListener(a.text.node, d, mxUtils.bind(this, function(b) { 41 this.isLabelEvent(a, b) && c.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(b, f(b))) 42 })); 43 mxEvent.addListener(a.text.node, g, mxUtils.bind(this, function(b) { 44 if (this.isLabelEvent(a, b)) { 45 c.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(b, f(b))); 46 e = false 47 } 48 })); 49 mxEvent.addListener(a.text.node, "dblclick", mxUtils.bind(this, function(b) { 50 if (this.isLabelEvent(a, b)) { 51 c.dblClick(b, a.cell); 52 mxEvent.consume(b) 53 } 54 })) 55 } 56 };
如果要求泳道的label居中，则不需要重写底层方法，只需要重写createLabel方法即可
1 mxCellRenderer.prototype.createLabel = function(a, b) { 2 var c = a.view.graph; 3 c.getModel().isEdge(a.cell); 4 if (a.style[mxConstants.STYLE_FONTSIZE] > 0 || a.style[mxConstants.STYLE_FONTSIZE] == null) { 5 var d = (c.isHtmlLabel(a.cell) || b != null && mxUtils.isNode(b)) && c.dialect == mxConstants.DIALECT_SVG; 6 7 /*****************泳道图样式修改start*******************/ 8 9 var tempSwinlaneHorizontal = a.style[mxConstants.STYLE_HORIZONTAL]; 10 if(c.isSwimlane(a.cell)){ 11 tempsHorizontal = true; 12 } 13 14 var tempSwinlaneVertical = c.getVerticalAlign(a); 15 if(c.isSwimlane(a.cell)){ 16 tempSwinlaneVertical = 'middle'; 17 } 18 /*****************泳道图样式修改end*******************/ 19 20 a.text = new mxText(b, new mxRectangle, a.style[mxConstants.STYLE_ALIGN] || mxConstants.ALIGN_CENTER, tempSwinlaneVertical, a.style[mxConstants.STYLE_FONTCOLOR], a.style[mxConstants.STYLE_FONTFAMILY], a.style[mxConstants.STYLE_FONTSIZE], 21 a.style[mxConstants.STYLE_FONTSTYLE], a.style[mxConstants.STYLE_SPACING], a.style[mxConstants.STYLE_SPACING_TOP], a.style[mxConstants.STYLE_SPACING_RIGHT], a.style[mxConstants.STYLE_SPACING_BOTTOM], a.style[mxConstants.STYLE_SPACING_LEFT], tempsHorizontal, a.style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR], a.style[mxConstants.STYLE_LABEL_BORDERCOLOR], c.isWrapping(a.cell) && c.isHtmlLabel(a.cell), c.isLabelClipped(a.cell), a.style[mxConstants.STYLE_OVERFLOW], a.style[mxConstants.STYLE_LABEL_PADDING]); 22 a.text.opacity = a.style[mxConstants.STYLE_TEXT_OPACITY]; 23 a.text.dialect = d ? mxConstants.DIALECT_STRICTHTML : a.view.graph.dialect; 24 this.initializeLabel(a); 25 var e = false, f = function(b) { 26 var d = a; 27 if (mxClient.IS_TOUCH || e) { 28 d = mxEvent.getClientX(b); 29 b = mxEvent.getClientY(b); 30 b = mxUtils.convertPoint(c.container, d, b); 31 d = c.view.getState(c.getCellAt(b.x, b.y)) 32 } 33 return d 34 }, d = mxClient.IS_TOUCH ? "touchmove" : "mousemove", g = mxClient.IS_TOUCH ? "touchend" : "mouseup"; 35 mxEvent.addListener(a.text.node, mxClient.IS_TOUCH ? "touchstart" : "mousedown", mxUtils.bind(this, function(b) { 36 if (this.isLabelEvent(a, b)) { 37 c.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(b, a)); 38 e = c.dialect != mxConstants.DIALECT_SVG && mxEvent.getSource(b).nodeName == "IMG" 39 } 40 })); 41 mxEvent.addListener(a.text.node, d, mxUtils.bind(this, function(b) { 42 this.isLabelEvent(a, b) && c.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(b, f(b))) 43 })); 44 mxEvent.addListener(a.text.node, g, mxUtils.bind(this, function(b) { 45 if (this.isLabelEvent(a, b)) { 46 c.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(b, f(b))); 47 e = false 48 } 49 })); 50 mxEvent.addListener(a.text.node, "dblclick", mxUtils.bind(this, function(b) { 51 if (this.isLabelEvent(a, b)) { 52 c.dblClick(b, a.cell); 53 mxEvent.consume(b) 54 } 55 })) 56 } 57 };