摘要：中文文檔是一款功能強(qiáng)大的圖形可視化交互工具，可用來(lái)開(kāi)發(fā)流程圖，思維導(dǎo)圖等復(fù)雜圖形交互應(yīng)用核心概念和即畫(huà)布，圖形將在上繪制即圖形數(shù)據(jù)，可與進(jìn)行綁定，對(duì)的修改會(huì)即時(shí)反映到上一個(gè)可與多個(gè)綁定和視圖元素，是的基本元素，用來(lái)處理交互圖形元素，是的基本

JointJS是一款功能強(qiáng)大的圖形可視化交互工具，可用來(lái)開(kāi)發(fā)流程圖，思維導(dǎo)圖等復(fù)雜圖形交互應(yīng)用

paper和graph

paper即畫(huà)布，圖形將在paper上繪制
graph即圖形數(shù)據(jù)，可與paper進(jìn)行綁定，對(duì)graph的修改會(huì)即時(shí)反映到paper上
一個(gè)graph可與多個(gè)paper綁定

cellView和cell

cellView: 視圖元素，是paper的基本元素，用來(lái)處理UI交互
cell: 圖形元素，是graph的基本元素，用來(lái)存儲(chǔ)圖形元素?cái)?shù)據(jù)
cellView可以通過(guò).model屬性獲取它的cell
graph其實(shí)就是cell的集合

link和element

cell有兩種類型，link是連線，element是節(jié)點(diǎn)
他們的視圖元素對(duì)應(yīng)為linkView和elementView

source和target

即連線的起點(diǎn)和終點(diǎn)

port

端口，依附于圖形節(jié)點(diǎn)，可以被連線連接

坐標(biāo)系統(tǒng)

client - 相對(duì)于瀏覽器窗口
page - 相對(duì)于body
local - 圖形絕對(duì)坐標(biāo)
paper - 圖形畫(huà)布坐標(biāo) (畫(huà)布是可以移動(dòng)的，當(dāng)畫(huà)布移動(dòng)時(shí)paper坐標(biāo)會(huì)改變，而local坐標(biāo)不會(huì)改變)

joint.dia
模型(類)庫(kù)，包含: Paper Graph Cell CellView Element Link 等等

joint.shapes
圖形元素樣式庫(kù)，包含多個(gè)分組(basic standard custom ...)
以basic為例，其下有Circle Ellipse Rect Text等多個(gè)圖形元素

實(shí)例化參數(shù) new joint.dia.Paper(option)

el: 圖形容器
model: 圖形數(shù)據(jù)，此處可綁定graph
width: 圖形寬度
height: 圖形高度
drawGrid: 柵格參考線
gridSize: 參考線密度
background: 背景
defaultLink: 默認(rèn)連線樣式
interactive: 控制元素的交互屬性（例如是否可以移動(dòng)）

paper實(shí)例方法

findViewByModel(model)

通過(guò)model(即cell)尋找到對(duì)應(yīng)的cellView

getContentBBox()

獲取paper內(nèi)圖形實(shí)體(不包含空白)的邊界(client坐標(biāo))

getContentArea()

獲取paper內(nèi)圖形實(shí)體(不包含空白)的邊界(local坐標(biāo))

paperToLocalPoint(point) or (x, y)

將paper坐標(biāo)的point轉(zhuǎn)換成local坐標(biāo)
類似的轉(zhuǎn)換: `localToPaperPoint` `pageToLocalPoint` 等等

paperToLocalRect(rect)

將paper坐標(biāo)的rect轉(zhuǎn)換成local坐標(biāo)
類似的: `localToPaperRect` `pageToLocalRect` 等等

scale(scale) or (sx, sy)

將paper縮放至指定倍數(shù)
如果參數(shù)為空，將返回paper當(dāng)前的縮放倍數(shù)

translate(x, y)

將paper原點(diǎn)移動(dòng)到指定坐標(biāo)(原點(diǎn)在左上角)
如果參數(shù)為空，將返回paper當(dāng)前的位移

graph實(shí)例方法

addCell(cell)

添加一個(gè)元素

addCells(cells)

添加一組元素

getCell(modelId)

獲取指定id的元素

getCells()

獲取所有元素

getElements()

獲取所有節(jié)點(diǎn)

getLinks()

獲取所有連線

clear()

清空所有元素

getNeighbors(element [, opt])

獲取與某節(jié)點(diǎn)相連的所有連線

toJSON()

導(dǎo)出JSON

fromJSON(json)

導(dǎo)入JSON

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

定義一個(gè)新的圖形元素，或繼承一個(gè)已有的元素

// 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(標(biāo)簽)是用來(lái)生成svg元素的模板，可以接收XML標(biāo)簽或JSON對(duì)象

markup: ""
markup: [{
  tagName: "rect",
  selector: "body"
}]

attrs

attrs(屬性)用來(lái)定義svg元素的樣式，通過(guò)selector或標(biāo)簽名查找對(duì)應(yīng)的元素

attrs: {
  ellipse: {
    fill: "lightgray"
  },
  body: {
    fill: "white"
  }
}

Cell.prototype.attr()

設(shè)置cell的attrs屬性

Cell.prototype.prop()

設(shè)置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()

判斷元素是否是節(jié)點(diǎn)

Cell.prototype.isLink()

判斷元素是否是連線

Cell.prototype.addTo(graph)

添加到graph

Cell.prototype.remove()

移除元素

圖形節(jié)點(diǎn)模型，繼承自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 坐標(biāo)，可通過(guò).position()方法設(shè)置

angle 旋轉(zhuǎn)，可通過(guò).rotate()方法設(shè)置

size 尺寸，可通過(guò).resize()方法設(shè)置

Presentation 外觀

attrs 同Cell，通過(guò).attr()方法設(shè)置

z 層級(jí)

Nesting 嵌套

embeds 子節(jié)點(diǎn)ids

parent 父節(jié)點(diǎn)id

Element prototype method

getBBox() 獲取節(jié)點(diǎn)的bounding box(邊界，rect)

portProp(portId, path, [value]) 設(shè)置端口屬性

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" }

端口，依附于圖形節(jié)點(diǎn)，可以被連線連接

Port API on joint.dia.Element

以下是與port相關(guān)的Element的實(shí)例方法

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: ""
    },
    attrs: { text: { text: "port1" } },
    markup: ""
};

// 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 布局參數(shù)

label 文字

圖形連線模型，繼承自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 錨點(diǎn)，link與element的連接點(diǎn)

connectionPoint 視圖鄰接點(diǎn)
例如，當(dāng)anchor在節(jié)點(diǎn)元素中心時(shí)，我們并不需要把連線真的畫(huà)到中心，而只要連到節(jié)點(diǎn)的邊界上即可

vertices 連線上的折點(diǎn)

connector 線型

"normal" - 普通
"jumpover" - 連線交叉時(shí)顯示一個(gè)bridge
"rounded" - 轉(zhuǎn)折處顯示為圓角
"smooth" - 貝塞爾曲線

router 路徑，設(shè)置router之后連線不再呈直線連接，而是通過(guò)一條設(shè)定的路線

"normal" - 普通線
"orthogonal" - 基礎(chǔ)版的正交折線
"manhattan" - 優(yōu)化版的正交折線
"metro" - 另一種正交折線
"oneSide" - 單側(cè)正交折線

Link實(shí)例方法

source(source [, opt]) 設(shè)置起點(diǎn)

target(target [, opt]) 設(shè)置終點(diǎn)

// opt示例
link.source({ id: sourceId }, {anchor})

connector() 設(shè)置線型

router() 設(shè)置路徑

vertices() 設(shè)置折點(diǎn)

pointerclick

點(diǎn)擊事件
可以添加前綴，以區(qū)分不同的點(diǎn)擊區(qū)域(blank是空白區(qū)域)：
cell:pointerdblclick link:pointerdblclick element:pointerdblclick blank:pointerdblclick

pointerdown

鼠標(biāo)按下

pointermove

鼠標(biāo)拖拽

pointerup

鼠標(biāo)松開(kāi)

link:connect

連線連接時(shí)觸發(fā)

add

新建圖形

remove

移除圖形

change

圖形屬性改變
change可以添加后綴，以區(qū)分不同的屬性改變：
change:position 節(jié)點(diǎn)位置改變
change:vertices 連線折點(diǎn)改變
change:custom 節(jié)點(diǎn)自定義屬性改變