mxgraph 之 自定义双边框长方形(即:doubleRectangle)
程序员文章站
2022-07-10 22:35:29
...
1、写在前面:关于双边框形状,在mxgraph中有双边框椭圆形(doubleEllipse),我的双边框长方形就是据此拓展的。
2、该形状的用途:这个图形也是很有必要的,它可用在BPMN中的事务子流程。
3、关键拓展代码:
extension.js
4、应用方法:
应用新的样式时可以在default-style.xml中写该样式:
这就是BPMN中事务子流程的样式定义。
然后,在graph的js中:
这样就可以用这个样式啦啦~~
*************************格叽格叽**************************
终于写完了 lysh miss wanan~
2、该形状的用途:这个图形也是很有必要的,它可用在BPMN中的事务子流程。
3、关键拓展代码:
extension.js
/** * 新增表单样式doubleRectangle * **/ function mxDoubleRectangle(bounds, fill, stroke, strokewidth){ this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = (strokewidth != null) ? strokewidth: 1; } mxDoubleRectangle.prototype = new mxShape(); mxDoubleRectangle.prototype.constructor = mxDoubleRectangle; mxDoubleRectangle.prototype.createVml = function() { this.node = document.createElement('v:group'); var name = (this.isRounded) ? 'v:roundrect': 'v:rect'; this.background = document.createElement(name); this.configureVmlShape(this.background); this.node.appendChild(this.background); // this.label = this.background; this.isShadow = false; this.fill = null; this.foreground = document.createElement(name); this.configureVmlShape(this.foreground); this.node.appendChild(this.foreground); this.stroke = null; this.configureVmlShape(this.node); return this.node; }; mxDoubleRectangle.prototype.createSvg = function() { var g = this.createSvgGroup('rect'); this.foreground = document.createElementNS(mxConstants.NS_SVG, 'rect'); this.foreground.setAttribute('shape-rendering', 'optimizeSpeed'); this.foreground.setAttribute('fill', 'none'); g.appendChild(this.foreground); return g; }; mxDoubleRectangle.prototype.redrawSvg = function(node) { if (this.innerNode != null) { this.updateSvgShape(this.innerNode); if (this.shadowNode != null) { this.updateSvgShape(this.shadowNode); } } else { this.updateSvgShape(this.node); } this.updateSvgGlassPane(); this.updateSvgNode(this.foreground, 8); }; mxDoubleRectangle.prototype.redrawVml = function() { this.node.style.visibility = 'hidden'; this.updateVmlShape(this.node); this.updateVmlGlassPane(); this.node.style.visibility = 'hidden'; this.background.style.visibility = 'hidden'; this.updateVmlShape(this.background); this.updateVmlGlassPane(); this.background.style.visibility = 'visible'; this.foreground.style.visibility = 'hidden'; this.updateVmlShape(this.foreground); this.updateVmlGlassPane(); this.foreground.style.visibility = 'visible'; var inset = 8; var w = Math.floor(this.bounds.width); var h = Math.floor(this.bounds.height); var x = Math.floor(this.bounds.x); var y = Math.floor(this.bounds.y); this.background.style.top = inset/2 + 'px'; this.background.style.left = inset/2 + 'px'; this.background.style.width = Math.max(0, w - inset) + 'px'; this.background.style.height = Math.max(0, h - inset) + 'px'; }; mxDoubleRectangle.prototype.updateSvgNode = function(node, inset) { inset = (inset != null) ? inset: 0; if (node != null) { var strokeWidth = Math.max(1, this.strokewidth * this.scale); if (this.crisp) { node.setAttribute('shape-rendering', 'crispEdges'); } else { node.removeAttribute('shape-rendering'); } if (this.style != null && this.style[mxConstants.STYLE_SMOOTH]) { var pts = this.points; var n = pts.length; if (n > 3) { var points = 'M ' + pts[0].x + ' ' + pts[0].y + ' '; points += ' Q ' + pts[1].x + ' ' + pts[1].y + ' ' + ' ' + pts[2].x + ' ' + pts[2].y; for (var i = 3; i < n; i++) { points += ' T ' + pts[i].x + ' ' + pts[i].y; } node.setAttribute('d', points); } } if (this.isDashed) { var phase = Math.max(1, Math.floor(3 * this.scale)); node.setAttribute('stroke-dasharray', phase + ',' + phase); } if (this.isRounded) { var w = this.bounds.width-inset; var h = this.bounds.height-inset; var r = Math.min(w * mxConstants.RECTANGLE_ROUNDING_FACTOR, h * mxConstants.RECTANGLE_ROUNDING_FACTOR); node.setAttribute('rx', r); node.setAttribute('ry', r); } node.setAttribute('stroke',this.stroke); node.setAttribute('stroke-width', strokeWidth); node.setAttribute('x', this.bounds.x +inset/2); node.setAttribute('y', this.bounds.y +inset/2); node.setAttribute('width', Math.max(0, this.bounds.width - inset)); node.setAttribute('height', Math.max(0, this.bounds.height - inset)); } }; mxDoubleRectangle.prototype.configureVmlShape = function(node) { node.style.position = 'absolute'; var color = this.stroke; if (color != null && color != mxConstants.NONE) { node.setAttribute('stroked', 'true'); node.setAttribute('strokecolor', color); } else { node.setAttribute('stroked', 'false'); } color = this.fill; node.style.background = ''; if (color != null && color != mxConstants.NONE) { if (this.fillNode == null) { this.fillNode = document.createElement('v:fill'); node.appendChild(this.fillNode); } this.updateVmlFill(this.fillNode, color, this.gradient, this.gradientDirection, this.opacity); } else { node.setAttribute('filled', 'false'); if (this.points == null) { this.configureTransparentBackground(node); } } if ((this.isDashed || this.opacity != null) && this.strokeNode == null) { this.strokeNode = document.createElement('v:stroke'); node.appendChild(this.strokeNode); } if (this.strokeNode != null) { if (this.strokeNode != null) { if (this.isDashed) { var phase = Math.max(1, Math.floor(3 * this.scale)); var pat = phase + ' ' + phase; if (this.strokeNode.getAttribute('dashstyle') != pat) { this.strokeNode.setAttribute('dashstyle', pat); } } else if (this.strokeNode.getAttribute('dashstyle') != 'solid') { this.strokeNode.setAttribute('dashstyle', 'solid'); } } if (this.opacity != null) { this.strokeNode.setAttribute('opacity', this.opacity + '%'); } } if (this.isShadow && this.fill != null) { if (this.shadowNode == null) { this.shadowNode = document.createElement('v:shadow'); this.shadowNode.setAttribute('on', 'true'); this.shadowNode.setAttribute('color', mxConstants.SHADOWCOLOR); node.appendChild(this.shadowNode); } } if (node.nodeName == 'roundrect') { try { node.setAttribute('arcsize', String(mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) + '%'); } catch(e) {} } this.strokeNode = null; }; /** *拓展该形状输出img的绘制方法 **/ mxImageExport.prototype.initShapes = function() { this.shapes = []; //其他形状的绘制也在此定义,就是源码中的,在此只写了新增的代码 this.shapes['doubleRectangle'] = { drawShape: function(canvas, state, bounds, background) { if (background) { if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) { var size = Math.max(bounds.width / 10, bounds.height / 10); canvas.roundrect(bounds.x, bounds.y, bounds.width, bounds.height, size, size); } else { canvas.rect(bounds.x, bounds.y, bounds.width, bounds.height); } return true; } else { canvas.fillAndStroke(); var inset = 8; var x = bounds.x; var y = bounds.y; var w = bounds.width; var h = bounds.height; x += inset/2; y += inset/2; w -= inset; h -= inset; if (w > 0 && h > 0) { if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) { var size = Math.max(w / 10, h / 10); canvas.rect(x, y, w,h,size,size); }else { canvas.rect(x,y,w,h); } } canvas.stroke(); } } }; };
4、应用方法:
应用新的样式时可以在default-style.xml中写该样式:
<add as="transaction" > <add as="shape" value="doubleRectangle"/> <add as="strokeColor" value="black"/> <add as="fillColor" value="#F2F2F2"/> <add as="gradientColor" value="#F2F2F2"/> <add as="verticalAlign" value="top"/> <add as="rounded" value="0"/> </add>
这就是BPMN中事务子流程的样式定义。
然后,在graph的js中:
graph.cellRenderer.registerShape('doubleRectangle', mxDoubleRectangle); var style = graph.getStylesheet().getDefaultVertexStyle(); style[mxConstants.STYLE_SHAPE] = 'doubleRectangle';
这样就可以用这个样式啦啦~~
*************************格叽格叽**************************
终于写完了 lysh miss wanan~