JointJS中文文档

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(scale) or (sx, sy)