JointJS中文文档
JointJS是一款功能强大的图形可视化交互工具,可用来开发流程图,思维导图等复杂图形交互应用
核心概念
-
paper和graph
paper即画布,图形将在paper上绘制
graph即图形数据,可与paper进行绑定,对graph的修改会即时反映到paper上
一个graph可与多个paper绑定 -
cellView和cell
cellView: 视图元素,是paper的基本元素,用来处理UI交互
cell: 图形元素,是graph的基本元素,用来存储图形元素数据
cellView可以通过.model
属性获取它的cell
graph其实就是cell的集合 -
link和element
cell有两种类型,link是连线,element是节点
他们的视图元素对应为linkView和elementView -
source和target
即连线的起点和终点
-
port
端口,依附于图形节点,可以被连线连接
-
坐标系统
client - 相对于浏览器窗口
page - 相对于body
local - 图形绝对坐标
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(scal