共计 6262 个字符，预计需要花费 16 分钟才能阅读完成。
JointJS 中文文档
JointJS 是一款功能强大的图形可视化交互工具，可用来开发流程图，思维导图等复杂图形交互应用
核心概念
paper 和 graph
paper 即画布，图形将在 paper 上绘制 graph 即图形数据，可与 paper 进行绑定，对 graph 的修改会即时反映到 paper 上一个 graph 可与多个 paper 绑定
cellView 和 cell
cellView: 视图元素，是 paper 的基本元素，用来处理 UI 交互 cell: 图形元素，是 graph 的基本元素，用来存储图形元素数据 cellView 可以通过.model 属性获取它的 cellgraph 其实就是 cell 的集合
link 和 element
cell 有两种类型，link 是连线，element 是节点他们的视图元素对应为 linkView 和 elementView
source 和 target
即连线的起点和终点
port
端口，依附于图形节点，可以被连线连接
坐标系统
client – 相对于浏览器窗口 page – 相对于 bodylocal – 图形绝对坐标 paper – 图形画布坐标 (画布是可以移动的，当画布移动时 paper 坐标会改变，而 local 坐标不会改变)
The joint namespace
joint.dia 模型 (类) 库，包含: Paper Graph Cell CellView Element Link 等等
joint.shapes 图形元素样式库，包含多个分组 (basic standard custom …) 以 basic 为例，其下有 Circle Ellipse Rect Text 等多个图形元素
API
Paper option
实例化参数 new joint.dia.Paper(option)
el: 图形容器
model: 图形数据，此处可绑定 graph
width: 图形宽度
height: 图形高度
drawGrid: 栅格参考线
gridSize: 参考线密度
background: 背景
defaultLink: 默认连线样式
interactive: 控制元素的交互属性（例如是否可以移动）
Paper prototype method
paper 实例方法
findViewByModel(model)
通过 model(即 cell)寻找到对应的 cellView
getContentBBox()
获取 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 method
graph 实例方法
addCell(cell)
添加一个元素
addCells(cells)
添加一组元素
getCell(modelId)
获取指定 id 的元素
getCells()
获取所有元素
getElements()
获取所有节点
getLinks()
获取所有连线
clear()
清空所有元素
getNeighbors(element [, opt])
获取与某节点相连的所有连线
toJSON()
导出 JSON
fromJSON(json)
导入 JSON
Cell 模型
Cell.prototype.define(type [, properties])
定义一个新的图形元素，或继承一个已有的元素
// Define a new Ellipse class in `joint.shapes.examples` namespace
// Inherits from generic Element class
var 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 element
var ellipse = (new Ellipse()).position(100, 100).size(120, 50).addTo(graph);
// Define a new ColoredEllipse class
// Inherits from Ellipse
var 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 element
var coloredEllipse = ColoredEllipse.createRandom().position(300, 100).size(120, 50).addTo(graph);
markup
markup(标签)是用来生成 svg 元素的模板，可以接收 XML 标签或 JSON 对象
markup: ‘<rect class=”rectangle”/>’
markup: [{
tagName: ‘rect’,
selector: ‘body’
}]
attrs
attrs(属性)用来定义 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)
添加到 graph
Cell.prototype.remove()
移除元素
Element
图形节点模型，继承自 Cell
Element 模型示例
{
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 子节点 ids
parent 父节点 id
Element prototype method
getBBox() 获取节点的 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 / hasPorts
addPort / addPorts
removePort / removePorts
getPort / getPorts
portProp
getPortPositions
Port 示例
// Single port definition
var 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 API
rect.addPort(port);
Port 属性
group 类似于 css 的 class，定义一组 port 的属性
args 布局参数
label 文字
Link
图形连线模型，继承自 Cell
Link 示例
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() 设置折点
事件
Paper
pointerclick
点击事件可以添加前缀，以区分不同的点击区域(blank 是空白区域)：cell:pointerdblclick link:pointerdblclick element:pointerdblclick blank:pointerdblclick
pointerdown
鼠标按下
pointermove
鼠标拖拽
pointerup
鼠标松开
link:connect
连线连接时触发
Graph
add
新建图形
remove
移除图形
change
图形属性改变 change 可以添加后缀，以区分不同的属性改变：change:position 节点位置改变 change:vertices 连线折点改变 change:custom 节点自定义属性改变
