分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
简介
这个js类库被分成了8个包。 最上层的mxClient类包括或者动态导入了其他的包。当前的版本存储在maxClient.VERSION中。
editor包提供了图表编辑器相关的类实现。入口函数式mxEditor。
view和model包实现了图表组件。他引用的mxGraphModel包含了mxCells和缓存了mxGraphView中的cells的状态。mxCellRender基于mxStylesheet中的定义来渲染cells的外观。mxUndoManager实现了撤销历史功能。如果要在graph中显示一个图标,可以使用mxCellOverlay。mxUtilplicity定义了校验规则。
handler,layout和shape包分别包含了事件处理,布局运算,以及形状。graph的事件监听包括mxRubberhand(rubberhand选定)、工具提示mxTooltipHandler和基本cell修改处理mxGraphHandler。mxCompactTreeLayout实现了树布局运算、shape包提供了大量的形状,他们都是mxShape的子类。
util包提供了很多有用的类,包括:实现复制粘贴的mxClipboard,拖拽的mxDatatransfer,键值对的样式表mxConstants,mxEvent和mxUtils实现了跨浏览器的事件处理和生成目标函数,mxResources实现了国际化(语言),mxLog实现了控制台打印输出。
io包实现了一个通用的mxObjctCodec 将js对象转换成MXL。入口函数是mxCodec。mxCodecRegistry是一个客户代码的全局注册表。
事件
有三类不同类型的事件,也即是本地DOM事件,mxEventObjects在mxEventSource中触发;mxMouseEvents在mxGraph中触发。
mxEvent提供了一些有用的方法来处理本地事件。他负责解决Dom节点和js事件处理循环引用的问题,这样的问题会导致IE6内存泄露。
在mxGraph中绝大多数定制事件都是用mxEventSource来实现的。他的监听是一个发送函数和mxEventObject。此外,maGraph类通过触发特别的mxMouseEvents来处理鼠标事件。监听通过mxEventSource.addListener和mxEventSource.removeListener来添加和移除监听。mxMouseEvents在mxGraph中通过使用mxGraph.firemouseEvent来触发。监听分别用mxGraph.addmouseListener和mxGraph.removeMouseListener来添加和移除。
按键绑定
下面的鼠标绑定事件是为跨浏览器和平台定义的:
- Control-Drag:复制选定的cells
- 右键:显示右键菜单
- 左键:实现选定框
- 选择:选定和取消选定的状态
- Shift-Drag:约束偏移量
- Shift-Control-Drag:同上
配置
下面的全局变量可能会在客户端加载前定义。包括语言或者基础路径。
- mxBasePath: 指定 mxClient.basePath 的路径。
- mxImageBasePath: 指定图片路径 mxClient.imageBasePath.
- mxLanguage: 指定语言文件路径 mxClient.language.
- mxDefaultLanguage: 指定默认语言 mxClient.defaultLanguage.
- mxLoadResources: 指定应该被加载的资源. 默认是true.
- mxLoadStylesheets: 指定应该被加载的样式表. 默认 true.
保留字
在mxGraph中mx前缀被用在所有的和对象上。mx前缀可以看做是一个所有js代码的全局命名空间。下面的名字不能用作对象。
- mxObjectId: 用作唯一标示一个对象。
- as: 如果一个对象有含有其他对象的引用
- id: 当做主键
- mxListenerList: 当使用mxEvent的时候会添加到DOM节点上。
- window._mxDynamicCode: 在 Safari and Chrome 浏览器东临时用来加载代码 (参考 mxClient.include).
- _mxJavaScriptExpression: 全局变量,用来临时执行代码在Safari, Opera, Firefox 3 and IE (参考 mxUtils.eval).
文件
这个类库包括三个相关的文件名。所有的文件名都相对于mxClient.basePath
图片引用
所有的图片都从mxClient.imageBasePath中加载,你也可以根据环境需要进行修改。图片变量也可以单独修改。
- mxGraph.prototype.collapsedImage
- mxGraph.prototype.expandedImage
- mxGraph.prototype.warningImage
- mxWindow.prototype.closeImage
- mxWindow.prototype.minimizeImage
- mxWindow.prototype.normalizeImage
- mxWindow.prototype.maximizeImage
- mxWindow.prototype.resizeImage
- mxPopupMenu.prototype.submenuImage
- mxUtils.errorImage
- mxConstraintHandler.prototype.pointImage
警告图片mxGraph.setCellWarning 被定义在 mxGraph.warningImage中。
资源
mxEditor和mxGraph类在加载时会把线面的资源添加到mxResources上:
resources/editor*.properties
resources/graph*.properties
resources/graph*.properties
英语和德语的资源文件。
图片
推荐使用图片。使用256色GIF在HTML组件中(例如工具栏和菜单),24bit的PNG图片用在图像组件的内部。
注意:PNG图片在HTML对象中,IE下会忽略透明;GIF图片在graph内部,在苹果系统的火狐浏览器上会出现奇怪的颜色。更有甚者,只有第一个图片的GIF动画会显示在苹果系统上。
在应用运行期间为了更快的渲染图片,可以采用预读取的方式,如下:
var image = new Image(); image.src = url_to_image;
开发
开发时页面通过使用下面标签来引用mxGraph:
<script type="text/javascript" src="js/mxClient.js"></script>
源码
花钱买了,才会给你source.zip。如果想修改或者使用源码调试就把引用地址指向源码包。
类
有两种,一种是单例的(只创建一个)。单例会映射到全局对象上,变量名字和类名相同。例如mxConstants是一个存放常量的。普通类会映射到构造函数以及原型上包括属性和方法。例如mxEditor是一个函数,maEditor.protype是这个对象创建的原型。mx前缀被用在所有类的前缀上,避免和其他全局变量冲突。
子类
所有的子类必须提供构造函数,或者没有参数,或者处理没有参数的引用。进一步说,指定构造函数必须定义在扩展原型对象上。例如mxEditor的子类mxEventSource。首先在js中子类会继承父类的所有属性和方法,通过原型类指定父类。mxEditor.prototype=new mxEventSource()渲染构造函数使用mxEditor.prototype.contructor=mxEditor。可以使用名字来检索一个对象,通过mxUtils.getFunctionName(obj.constructor)。
类
给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/2e19ffb3303a490d20ea5d00dd397156.gif)