js画图开发库--mxgraph--[windows-窗口展示.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(container)
{
// 检测浏览器兼容性
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// 在DIV分区中创建带滚动条的图形
var wnd = new mxWindow('可滚动，调整大小，给定高度Scrollable, resizable, given height', container, 50, 50, 220, 224, true, true);
// 创建图形
var graph = new mxGraph(container);
// 创建菜单和按键监控
graph.setTooltips(true);
graph.setPanning(true);
var rubberband = new mxRubberband(graph);
new mxKeyHandler(graph);
mxEvent.disableContextMenu(container);
// IE样式修复
if (mxClient.IS_IE)
{
mxRubberbandMouseMove = mxRubberband.prototype.mouseMove;
mxRubberband.prototype.mouseMove = function(sender, me)
{
mxRubberbandMouseMove.apply(this, arguments);
if (this.div != null && this.div.style.background != 'transparent')
{
container.style.cursor = 'default';
this.div.style.background = 'transparent';
this.div.style.borderStyle = 'dashed';
mxUtils.setOpacity(this.div, 100);
}
}
}
//父母在Firefox中的容器没有Resize事件的解决方法，画布有限的绘图区域需要更新
// Firefox中自适应的解决方法，即：更新画图区域
else
{
wnd.addListener(mxEvent.RESIZE_END, function(evt)
{
graph.sizeDidChange();
});
}
// 创建默认窗体
var parent = graph.getDefaultParent();
// 启动更新事务
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// 结束更新事务
graph.getModel().endUpdate();
}
wnd.setMaximizable(true);
wnd.setResizable(true);
wnd.setVisible(true);
var lorem = 'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ';
var content = document.createElement('div');
mxUtils.write(content, lorem + lorem + lorem);
wnd = new mxWindow('可滚动，调整大小，高度自动Scrollable, resizable, auto height', content, 300, 50, 200, null, true, true);
wnd.setMaximizable(true);
wnd.setScrollable(true);
wnd.setResizable(true);
wnd.setVisible(true);
content = content.cloneNode(true)
content.style.width = '400px';
wnd = new mxWindow('可滚动，调整大小，固定的内容Scrollable, resizable, fixed content', content, 520, 50, 220, 200, true, true);
wnd.setMaximizable(true);
wnd.setScrollable(true);
wnd.setResizable(true);
wnd.setVisible(true);
mxLog.show();
}
};
</script>
</head>
<!-- 页面载入后启动程序. -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- 创建带网格壁纸和曲线的一个容器 -->
<div id="graphContainer"
style="overflow:auto;position:absolute;width:100%;height:100%;background:lightyellow;cursor:default;">
</div>
</body>
</html>
相关推荐
MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..MXGRAPH..
资源：mxGraph；包含ie,Firefox两个版本；版本号都是1.4.0.0；只带了一个Hello World的示例，其他的例子请自己去官网找吧
mxgraph开发包
NULL 博文链接：https://chwshuang.iteye.com/blog/1797168
mxGraph里头包含源码，以及常用的一些实例，相关介绍可以查阅博客：http://www.cnblogs.com/shawWey/p/7115124.html
这个插件支持在HTML页面中插入流程图，画得很漂亮 :-)
带Webpack的typed-mxgraph演示 来自Webpack Typescript入门 如何使用 在本地克隆项目 git clone https://github.com/typed-mxgraph/typed-mxgraph-demo.git 切换到项目目录 cd typed-mxgraph-demo 确保使用节点10...
web开发拓扑图插件 mxGraph - An open source JavaScript diagramming component, started in 2005, that works on all major browsers, including touch devices.
mxGraph1.8.0.3破解版mxclient，分IE ，FF 和chrome三个部分，不同浏览器加载不同的js文件，手动尝试过，1.8.0.5官方的例子都可以正常运行。
mxGraph 简单易用，只需要在HTML文件中加入JavaScript链接，就可立即使用最简洁最强大的基于浏览器自身的绘图工具。 HTML 5和全系列IE支持。 想像一下，整个应用都是基于Web。在浏览器中设计工作流，操纵有背景图...
前段实现mxgraph插件绘制流程图，后台实现保存的xml导出成图片格式，遇到图标没有引用，文字label位置不正确，label换行不识别 标签，linux服务器部署中文字体等问题
mxgraph-svg2shape 一套将SVG文件转换为mxGraph资源的工具。 该存储库基于： SVG to XML mxGraph stencil definition translation tool. ... 添加 ：将XML mxGraph模具定义转换为一组相应JavaScript /
在线画图www.draw.io网站的源码，基于mxGraph开发
mxgraph-demo-源码.rar
mxgraph-1_10_4_0 官方源码+文档+示例
vue配合mxGraph 入门实例项目，
mxGraph1.9.1.1 mxclient.js破解文件下载 1.找到mxclient.js文件中的这句代码 注释 if ((eval('/156/145/167/40/104/141/164/145/50/51/56/147/145/164/124/151/155/145/50/51') / 1000) - 1270532723 >...
十分强大的js绘图工具，适用于设计/编辑 Workflow/BPM 流程图、图表、网络图和普通图形的 Web 应用程序。这是破解过的源js库。
mxgraph\.classpath .......\.project .......\ChangeLog .......\docs .......\....\images .......\....\......\MX_MANUAL_html_1cc55dd3.png .......\....\......\MX_MANUAL_html_ba4bf13.png .......\......
mxgraph.js中文文档是一个官方的api，翻译来源于sunflower(github: https://github.com/SunInfoFE)，提供给更多的开发者参考和共享源码资源！