js画图开发库--mxgraph--[swimlanes-泳道图.html]
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>泳道图</title>
<!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- 引入支持库文件 -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- 示例代码 -->
<script type="text/javascript">
// 定义创建新的连接的图标。
// 这将自动禁用高亮显示。
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
// 程序在此方法中启动
function main(container)
{
// 检查浏览器支持
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// 去锯齿效果
mxSwimlane.prototype.crisp = true;
// 根据给定的xml文件在容器中创建图形编辑器
var config = mxUtils.load(
'editors/config/keyhandler-commons.xml').
getDocumentElement();
var editor = new mxEditor(config);
editor.setGraphContainer(container);
var graph = editor.graph;
var model = graph.getModel();
//自动调整大小的容器
graph.border = 80;
graph.getView().translate = new mxPoint(graph.border/2, graph.border/2);
graph.setResizeContainer(true);
graph.graphHandler.setRemoveCellsFromParent(false);
// 改变默认样式
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
style[mxConstants.STYLE_FONTSIZE] = 11;
style[mxConstants.STYLE_STARTSIZE] = 22;
style[mxConstants.STYLE_HORIZONTAL] = false;
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_STROKECOLOR] = 'black';
delete style[mxConstants.STYLE_FILLCOLOR];
style = mxUtils.clone(style);
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_FONTSIZE] = 10;
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_HORIZONTAL] = true;
style[mxConstants.STYLE_VERTICAL_ALI