JointJS中文文档

JointJS中文文档JointJS是一款功能强大的图形可视化交互工具，可用来开发流程图，思维导图等复杂图形交互应用核心概念paper和graphpaper即画布，图形将在paper上绘制 graph即图形数据，可与paper进行绑定，对graph的修改会即时反映到paper上一个graph可与多个paper绑定cellView和cellcellView: 视图元素，是paper的基本元素，用来处理UI交互cell: 图形元素，是graph的基本元素，用来存储图形元素数据cellView可以通过.model属性获取它的cellgraph其实就是cell的集合link和elementcell有两种类型，link是连线，element是节点他们的视图元素对应为linkView和elementViewsource和target即连线的起点和终点port端口，依附于图形节点，可以被连线连接坐标系统client - 相对于浏览器窗口page - 相对于bodylocal - 图形绝对坐标paper - 图形画布坐标 (画布是可以移动的，当画布移动时paper坐标会改变，而local坐标不会改变)The joint namespacejoint.dia模型(类)库，包含: Paper Graph Cell CellView Element Link 等等joint.shapes图形元素样式库，包含多个分组(basic standard custom …)以basic为例，其下有Circle Ellipse Rect Text等多个图形元素APIPaper option实例化参数 new joint.dia.Paper(option)el: 图形容器model: 图形数据，此处可绑定graphwidth: 图形宽度height: 图形高度drawGrid: 栅格参考线gridSize: 参考线密度background: 背景defaultLink: 默认连线样式interactive: 控制元素的交互属性（例如是否可以移动）Paper prototype methodpaper实例方法findViewByModel(model)通过model(即cell)寻找到对应的cellViewgetContentBBox()获取paper内图形实体(不包含空白)的边界(client坐标)getContentArea()获取paper内图形实体(不包含空白)的边界(local坐标)paperToLocalPoint(point) or (x, y)将paper坐标的point转换成local坐标类似的转换: localToPaperPoint pageToLocalPoint 等等paperToLocalRect(rect)将paper坐标的rect转换成local坐标类似的: localToPaperRect pageToLocalRect 等等scale(scale) or (sx, sy)将paper缩放至指定倍数如果参数为空，将返回paper当前的缩放倍数translate(x, y)将paper原点移动到指定坐标(原点在左上角)如果参数为空，将返回paper当前的位移Graph prototype methodgraph实例方法addCell(cell)添加一个元素addCells(cells)添加一组元素getCell(modelId)获取指定id的元素getCells()获取所有元素getElements()获取所有节点getLinks()获取所有连线clear()清空所有元素getNeighbors(element [, opt])获取与某节点相连的所有连线toJSON()导出JSONfromJSON(json)导入JSONCell模型Cell.prototype.define(type [, properties])定义一个新的图形元素，或继承一个已有的元素// Define a new Ellipse class in joint.shapes.examples namespace// Inherits from generic Element classvar Ellipse = joint.dia.Element.define(’examples.Ellipse’, { // default attributes markup: [{ tagName: ’ellipse’, selector: ’ellipse’ // not necessary but faster ], attrs: { ellipse: { fill: ‘white’, stroke: ‘black’, strokeWidth: 4, refRx: .5, refRy: .5, refCx: .5, refCy: .5 } }});// Instantiate an elementvar ellipse = (new Ellipse()).position(100, 100).size(120, 50).addTo(graph);// Define a new ColoredEllipse class// Inherits from Ellipsevar ColoredEllipse = Ellipse.define(’examples.ColoredEllipse’, { // overridden Ellipse default attributes // other Ellipse attributes preserved attrs: { ellipse: { fill: ’lightgray’ } }}, { // prototype properties // accessible on this.(...) - as well as, more precisely, this.prototype.(...) // useful for custom methods that need access to this instance // shared by all instances of the class randomizeStrokeColor: function() { var randomColor = ‘#’ + (‘000000’ + Math.floor(Math.random() * 16777215).toString(16)).slice(-6); return this.attr(’ellipse/stroke’, randomColor); }}, { // static properties // accessible on this.constructor.(...) // useful for custom methods and constants that do not need an instance to operate // however, a new set of static properties is generated every time the constructor is called // (try to only use static properties if absolutely necessary) createRandom: function() { return (new ColoredEllipse()).randomizeStrokeColor(); }});// Instantiate an elementvar coloredEllipse = ColoredEllipse.createRandom().position(300, 100).size(120, 50).addTo(graph);markupmarkup(标签)是用来生成svg元素的模板，可以接收XML标签或JSON对象markup: ‘<rect class=“rectangle”/>‘markup: [{ tagName: ‘rect’, selector: ‘body’}]attrsattrs(属性)用来定义svg元素的样式，通过selector或标签名查找对应的元素attrs: { ellipse: { fill: ’lightgray’ }, body: { fill: ‘white’ }}Cell.prototype.attr()设置cell的attrs属性Cell.prototype.prop()设置cell的属性，包括自定义属性cell.attr(‘body/fill’, ‘black’)cell.prop(‘attrs/body/fill’, ‘black’)cell.prop(‘attrs’, {body: {fill: ‘black’}})cell.prop(‘custom’, ‘data’)Cell.prototype.isElement()判断元素是否是节点Cell.prototype.isLink()判断元素是否是连线Cell.prototype.addTo(graph)添加到graphCell.prototype.remove()移除元素Element图形节点模型，继承自CellElement模型示例{ id: ‘3d90f661-fe5f-45dc-a938-bca137691eeb’,// Some randomly generated UUID. type: ‘basic.Rect’, attrs: { ‘stroke’: ‘#000’ }, position: { x: 0, y: 50 }, angle: 90, size: { width: 100, height: 50 }, z: 2, embeds: [ ‘0c6bf4f1-d5db-4058-9e85-f2d6c74a7a30’, ‘cdbfe073-b160-4e8f-a9a0-22853f29cc06’ ], parent: ‘31f348fe-f5c6-4438-964e-9fc9273c02cb’ // … and some other, maybe custom, data properties}Geometry 几何属性position 坐标，可通过.position()方法设置angle 旋转，可通过.rotate()方法设置size 尺寸，可通过.resize()方法设置Presentation 外观attrs 同Cell，通过.attr()方法设置z 层级Nesting 嵌套embeds 子节点idsparent 父节点idElement prototype methodgetBBox() 获取节点的bounding box(边界，rect)portProp(portId, path, [value]) 设置端口属性element.portProp(‘port-id’, ‘attrs/circle/fill’, ‘red’);element.portProp(‘port-id’, ‘attrs/circle/fill’); // ‘red’element.portProp(‘port-id’, ‘attrs/circle’, { r: 10, stroke: ‘green’ });element.portProp(‘port-id’, ‘attrs/circle’); // { r: 10, stroke: ‘green’, fill: ‘red’ }Ports端口，依附于图形节点，可以被连线连接Port API on joint.dia.Element以下是与port相关的Element的实例方法hasPort / hasPortsaddPort / addPortsremovePort / removePortsgetPort / getPortsportPropgetPortPositionsPort示例// Single port definitionvar port = { // id: ‘abc’, // generated if id value is not present group: ‘a’, args: {}, // extra arguments for the port layout function, see layout.Port section label: { position: { name: ‘right’, args: { y: 6 } // extra arguments for the label layout function, see layout.PortLabel section }, markup: ‘<text class=“label-text” fill=“blue”/>’ }, attrs: { text: { text: ‘port1’ } }, markup: ‘<rect width=“16” height=“16” x="-8" strokegit =“red” fill=“gray”/>’};// a.) add a port in constructor.var rect = new joint.shapes.standard.Rectangle({ position: { x: 50, y: 50 }, size: { width: 90, height: 90 }, ports: { groups: { ‘a’: {} }, items: [port] }});// b.) or add a single port using APIrect.addPort(port);Port属性group 类似于css的class，定义一组port的属性args 布局参数label 文字Link图形连线模型，继承自CellLink示例var link = new joint.dia.Link();link.source({ id: sourceId }, { anchor: defaultAnchor });link.target({ id: targetId, port: portId });link.addTo(graph)Link属性anchor 锚点，link与element的连接点connectionPoint 视图邻接点例如，当anchor在节点元素中心时，我们并不需要把连线真的画到中心，而只要连到节点的边界上即可vertices 连线上的折点connector 线型’normal’ - 普通’jumpover’ - 连线交叉时显示一个bridge’rounded’ - 转折处显示为圆角’smooth’ - 贝塞尔曲线router 路径，设置router之后连线不再呈直线连接，而是通过一条设定的路线’normal’ - 普通线’orthogonal’ - 基础版的正交折线’manhattan’ - 优化版的正交折线’metro’ - 另一种正交折线’oneSide’ - 单侧正交折线Link实例方法source(source [, opt]) 设置起点target(target [, opt]) 设置终点// opt示例link.source({ id: sourceId }, {anchor})connector() 设置线型router() 设置路径vertices() 设置折点事件Paperpointerclick点击事件可以添加前缀，以区分不同的点击区域(blank是空白区域)：cell:pointerdblclick link:pointerdblclick element:pointerdblclick blank:pointerdblclickpointerdown鼠标按下pointermove鼠标拖拽pointerup鼠标松开link:connect连线连接时触发Graphadd新建图形remove移除图形change图形属性改变change可以添加后缀，以区分不同的属性改变：change:position 节点位置改变change:vertices 连线折点改变change:custom 节点自定义属性改变