js画图开发库--mxgraph--[dynamictoolbar-工具栏.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">
// // 程序在此方法中启动
function main()
{
// 检查浏览器支持
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
//定义创建新连接的图标。这将自动禁用高亮显示的元素。
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
// 创建带工具栏的容器
var tbContainer = document.createElement('div');
tbContainer.style.position = 'absolute';
tbContainer.style.overflow = 'hidden';
tbContainer.style.padding = '2px';
tbContainer.style.left = '0px';
tbContainer.style.top = '0px';
tbContainer.style.width = '24px';
tbContainer.style.bottom = '0px';
document.body.appendChild(tbContainer);
// 创建一个没有事件今天的工具栏
var toolbar = new mxToolbar(tbContainer);
toolbar.enabled = false
// 创建图形编辑器的容器
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.overflow = 'hidden';
container.style.left = '24px';
container.style.top = '0px';
container.style.right = '0px';
container.style.bottom = '0px';
container.style.background = 'url("editors/images/grid.gif")';
document.body.appendChild(container);
// Internet Explorer的解决方法:忽略了某些样式
if (mxClient.IS_QUIRKS)
{
document.body.style.overflow = 'hidden';
new mxDivResizer(tbContainer);
new mxDivResizer(container);
}
// 创建的模型和容器内的图形图，在浏览器上使用可用的最快渲染
var model = new mxGraphModel();
var graph = new mxGraph(container, model);
// 在图中，启用新的连接
graph.setConnectable(true);
graph.setMultigraph(false);
// 拖入控件或释放按键时工具栏停止编辑
var keyHandler = new mxKeyHandler(graph);
var rubberband = new mxRubberband(graph);
var addVertex = function(icon, w, h, style)
{
var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(true);
var img = addToolbarItem(graph, toolbar, vertex, icon);
img.enabled = true;
graph.getSelectionModel().addListener(mxEvent.CHANGE, function()
{
var tmp = graph.isSelectionEmpty();
mxUtils.setOpacity(img, (tmp) ? 100 : 20);
img.enabled = tmp;
});
};
addVertex('editors/images/rectangle.gif', 100, 40, '');
addVertex('editors/images/rounded.gif', 100, 40, 'shape=rounded');
addVertex('editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
addVertex('editors/images/rhombus.gif', 40, 40, 'shape=rhombus');
addVertex('editors/images/triangle.gif', 40, 40, 'shape=triangle');
addVertex('editors/images/cylinder.gif', 40, 40, 'shape=cylinder');
addVertex('editors/images/actor.gif', 30, 40, 'shape=actor');
}
}
function addToolbarItem(graph, toolbar, prototype, image)
{
// 当工具栏图标被拖动后执行此方法。
// 如果鼠标点击连接图标并移动到另外一个元素时，就建立两个图标的连接
var funct = function(graph, evt, cell, x, y)
{
graph.stopEditing(false);
var vertex = graph.getModel().cloneCell(prototype);
vertex.geometry.x = x;
vertex.geometry.y = y;
graph.addCell(vertex);
graph.setSelectionCell(vertex);
}
// 创建拖动时的预览图标
var img = toolbar.addMode(null, image, function(evt, cell)
{
var pt = this.graph.getPointForEvent(evt);
funct(graph, evt, cell, pt.x, pt.y);
});
// 如果元素被禁用时禁用拖动，IE会最后调用此监听器
mxEvent.addListener(img, 'mousedown', function(evt)
{
// do nothing
});
// 总是在所有的浏览器中的任何其他侦听器之前，首先调用此侦听器。
mxEvent.addListener(img, 'mousedown', function(evt)
{
if (img.enabled == false)
{
mxEvent.consume(evt);
}
});
// 使图标可以拖动
mxUtils.makeDraggable(img, graph, funct);
return img;
}
</script>
</head>
<!-- 在页面加载后调用此方法。body内的容器是动态创建的。 -->
<body onload="main();">
</body>
</html>