JointJS中文文档

2024年5月17日 203次阅读来源: Unreal

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)

将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 节点自定义属性转变

    原文作者：Unreal
    原文地址: https://segmentfault.com/a/1190000018080851
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

JointJS中文文档

中间观点

paper和graph

cellView和cell

link和element

source和target

port

坐标体系

The joint namespace

API

Paper option

Paper prototype method

findViewByModel(model)

getContentBBox()

getContentArea()

paperToLocalPoint(point) or (x, y)

paperToLocalRect(rect)

scale(scale) or (sx, sy)

translate(x, y)

Graph prototype method

addCell(cell)

addCells(cells)

getCell(modelId)

getCells()

getElements()

getLinks()

clear()

getNeighbors(element [, opt])

toJSON()

fromJSON(json)

Cell模子

Cell.prototype.define(type [, properties])

markup

attrs

Cell.prototype.attr()

Cell.prototype.prop()

Cell.prototype.isElement()

Cell.prototype.isLink()

Cell.prototype.addTo(graph)

Cell.prototype.remove()

Element

Element模子示例

Geometry 多少属性

Presentation 表面

Nesting 嵌套

Element prototype method

Ports

Port API on joint.dia.Element

Port示例

Port属性

Link

Link示例

Link属性

Link实例要领

事宜

Paper

pointerclick

pointerdown

pointermove

pointerup

link:connect

Graph

add

remove

change

Port API on `joint.dia.Element`