js画图开发库--mxgraph--[grid-网格.html]

js画图开发库--mxgraph--[grid-网格.html]

点击图形下方按钮：网格根据图形大小变化：

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><title>Grid example for mxGraph</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{mxEvent.disableContextMenu(document.body);//去锯齿效果mxRectangleShape.prototype.crisp = true;// 在容器中创建图形var graph = new mxGraph(container);graph.graphHandler.scaleGrid = true;graph.setPanning(true);// 默认右键下拉列表new mxRubberband(graph);// 动态地创建网格（需要画布）(function(){try{var canvas = document.createElement('canvas');canvas.style.position = 'absolute';canvas.style.top = '0px';canvas.style.left = '0px';canvas.style.zIndex = -1;graph.container.appendChild(canvas);var ctx = canvas.getContext('2d');// 过滤画布事件，修改画布作为容器 mxGraphViewIsContainerEvent = mxGraphView.prototype.isContainerEvent;mxGraphView.prototype.isContainerEvent = function(evt){return mxGraphViewIsContainerEvent.apply(this, arguments) ||mxEvent.getSource(evt) == canvas;};var s = 0;var gs = 0;var tr = new mxPoint();var w = 0;var h = 0;function repaintGrid(){if (ctx != null){var bounds = graph.getGraphBounds();var width = Math.max(bounds.x + bounds.width, graph.container.clientWidth);var height = Math.max(bounds.y + bounds.height, graph.container.clientHeight);var sizeChanged = width != w || height != h;if (graph.view.scale != s || graph.view.translate.x != tr.x || graph.view.translate.y != tr.y ||gs != graph.gridSize || sizeChanged){tr = graph.view.translate.clone();s = graph.view.scale;gs = graph.gridSize;w = width;h = height;// 根据需要清除背景if (!sizeChanged){ctx.clearRect(0, 0, w, h);}else{canvas.setAttribute('width', w);canvas.setAttribute('height', h);}var tx = tr.x * s;var ty = tr.y * s;// 设定网格线的距离（以像素为单位）var minStepping = graph.gridSize;var stepping = minStepping * s;if (stepping < minStepping){var count = Math.round(Math.ceil(minStepping / stepping) / 2) * 2;stepping = count * stepping;}var xs = Math.floor((0 - tx) / stepping) * stepping + tx;var xe = Math.ceil(w / stepping) * stepping;var ys = Math.floor((0 - ty) / stepping) * stepping + ty;var ye = Math.ceil(h / stepping) * stepping;xe += Math.ceil(stepping);ye += Math.ceil(stepping);var ixs = Math.round(xs);var ixe = Math.round(xe);var iys = Math.round(ys);var iye = Math.round(ye);// 绘制网格ctx.strokeStyle = '#f6f6f6';ctx.beginPath();for (var x = xs; x <= xe; x += stepping){x = Math.round((x - tx) / stepping) * stepping + tx;var ix = Math.round(x);ctx.moveTo(ix + 0.5, iys + 0.5);ctx.lineTo(ix + 0.5, iye + 0.5);}for (var y = ys; y <= ye; y += stepping){y = Math.round((y - ty) / stepping) * stepping + ty;var iy = Math.round(y);ctx.moveTo(ixs + 0.5, iy + 0.5);ctx.lineTo(ixe + 0.5, iy + 0.5);}ctx.closePath();ctx.stroke();}}};}catch (e){mxLog.show();mxLog.debug('Using background image');container.style.backgroundImage = 'url(\'editors/images/grid.gif\')';}mxGraphViewValidateBackground = mxGraphView.prototype.validateBackground;mxGraphView.prototype.validateBackground = function(){mxGraphViewValidateBackground.apply(this, arguments);repaintGrid();};})();// 创建默认窗体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();}graph.centerZoom = false;//创建一个放大按钮document.body.appendChild(mxUtils.button('+', function(){graph.zoomIn();}));//创建一个缩小按钮document.body.appendChild(mxUtils.button('-', function(){graph.zoomOut();}));}};</script>
</head><!-- 页面载入时启动程序 -->
<body οnlοad="main(document.getElementById('graphContainer'))"><!-- 创建带网格壁纸和曲线的一个容器  --><div id="graphContainer"style="overflow:hidden;width:821px;height:641px;cursor:default;"></div>
</body>
</html>

js画图开发库--mxgraph--[grid-网格.html]相关推荐

js画图开发库--mxgraph--[wires-电路图.html]
js画图开发库--mxgraph--[wires-电路图.html] <!Doctype html> <html xmlns=http://www.w3.org/1999/xht ...
从零开始编写一个微信小程序（微信开发者工具+JS+WuxUI组件库+云开发）万字整理，建议收藏！
微信小程序-魔镜笔记&源码(微信开发者工具+JS+UI组件库+云开发) 效果展示视频演示经历了一次升级之后,我的小程序怎么样了? 文章目录微信小程序-魔镜笔记&源码(微信开发 ...
可爱的python测试开发库及项目(python测试开发工具库汇总)
转载: https://www.jianshu.com/p/ea6f7fb69501 可爱的python测试开发库及项目(python测试开发工具库汇总) github地址相关书籍下载 Python ...
Python超简单容易上手的画图工具库
今天,在网上发现一款很棒的python画图工具库.很简单的api调用就能生成漂亮的图表.并且可以进行一些互动. pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开 ...
不是python中用于开发用户界面的第三方库-python界面 | Tkinter图形界面开发库
0 写在前面未经允许,不得转载,谢谢~~ 毕设要在现有的基础上做一个可视化的界面,所以趁机也学习一波如何用python实现图形界面的开发. 本文主要学习并整理了: 简要介绍用于python图形界面开 ...
Extjs 强大的WEB窗体开发库
原文:Extjs 强大的WEB窗体开发库作为一个javascript程序员,必须时刻关注JS的最新发展,想了解JS最新动态,可以关注我们的 Javascript教程网. 最近几年比较火的前端js框架 ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
命令行蓝牙_Noble - Window平台NodeJs蓝牙BLE开发库
背景我和我的团队曾经开发过一款基于蓝牙连接的智能家居产品,但由于市场的原因,这个产品和项目已经停止了.最近,想用手上剩下的存货做一些使用电脑与硬件连接应用实验. 然后发现在电脑平台下进行蓝牙开发,远 ...
CSS Grid网格布局全攻略
CSS Grid网格布局全攻略所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

js画图开发库--mxgraph--[grid-网格.html]

js画图开发库--mxgraph--[grid-网格.html]相关推荐

最新文章

热门文章