由于JointJs官方API是英文，是以學習過程中對此進行部分(沒有完全)漢化整理，以及一些個人了解。
| 錨點anchor 連結錨是一個連結想要到達的點（這意味着連接配接端點最終未必就落在上面）作為它的端點。 link.source(model, { anchor: { name: 'midSide', args: { rotate: true, padding: 20 } } }); 注意：
|
| 連接配接點connectionPoints 連線連接配接點是連線路由的端點。這一點與連結錨點不同，因為它考慮了結束元素的存在。連接配接點通過連線末端定義中提供的connectionPoint屬性設定(即提供給link.source()和link.target()函數的對象)。 link.source(model, { connectionPoint: { name: 'boundary', args: { sticky: true } } }); 注意：
|
| 連接配接政策connectionStrategies 當使用者修改連結端點的位置時，連接配接政策就會起作用。 兩種情況:
案例： Connecting to Ancestors：如果您的圖表大量使用嵌套元素，那麼始終将連結連接配接到頂級祖先元素 joint.connectionStrategies.topAncestor = function(end, endView) { var ancestors = endView.model.getAncestors(); var numAncestors = ancestors.length; var end = numAncestors ? ancestors[numAncestors - 1] : end; return end; } paper.options.connectionStrategy = joint.connectionStrategies.topAncestor; Connecting to Ports：如果您的圖表使用端口，您通常不希望連結能夠連接配接到其他任何地方。解決方案與上面的類似 joint.connectionStrategies.firstPort = function(end, endView) { var ports = endView.model.getPorts(); var numPorts = ports.length; var end = numPorts ? { id: end.id, port: ports[0].id } : end; return end; } paper.options.connectionStrategy = joint.connectionStrategies.firstPort; 其實總共可以在連接配接政策中可以有四個參數(上述案例都隻用了兩個參數)： endDefinition object 一個對象，它至少包含我們連接配接到的元素的id。這個對象将被這個函數修改，然後作為傳回值發送 endView dia.ElementView 我們連接配接到的ElementView。元素模型可以通路為endView.model;這對于基于元素屬性編寫條件邏輯可能有用。 endMagnet SVGElement 頁面中的SVGElement包含連接配接到的磁鐵(元素/子元素/端口)。 cords g.Point 在調用連接配接政策時記錄使用者指針的x-y坐标的點對象。 |
| Connectors 連接配接器 連接配接器擷取一系列連結路由點并生成SVG路徑指令，以便能夠呈現連結。可以使用link.connector()函數通路連結的連接配接器屬性。 自定義的連接配接器 joint.connectors.wobble = function(sourcePoint, targetPoint, vertices, args) { var SPREAD = args.spread || 20; var points = vertices.concat(targetPoint) var prev = sourcePoint; var path = new g.Path(g.Path.createSegment('M', prev)); var n = points.length; for (var i = 0; i < n; i++) { var next = points[i]; var distance = prev.distance(next); var d = SPREAD; while (d < distance) { var current = prev.clone().move(next, -d); current.offset( Math.floor(7 * Math.random()) - 3, Math.floor(7 * Math.random()) - 3 ); path.appendSegment(g.Path.createSegment('L', current)); d += SPREAD; } path.appendSegment(g.Path.createSegment('L', next)); prev = next; } return path; } var link = new joint.shapes.standard.Link(); link.source(source); link.target(target); link.connector('wobble', { spread: 10 }); 以及三種預設連接配接器：
|
| dia.attributes 屬性 dia.attributes.fill 填充屬性隻有在被定義為對象而不是通常的SVG文法時才會成為一個特殊屬性。 示例如下： element.attr('rect/fill', { type: 'linearGradient', stops: [ { offset: '0%', color: '#E67E22' }, { offset: '20%', color: '#D35400' }, { offset: '40%', color: '#E74C3C' }, { offset: '60%', color: '#C0392B' }, { offset: '80%', color: '#F39C12' } ] }); dia.attributes.filter 陰影：隻有在将filter屬性定義為對象而不是通常的SVG文法時，它才會成為一個特殊的屬性 示例如下： element.attr('rect/filter', { name: 'dropShadow', args: { dx: 2, dy: 2, blur: 3 } }); 當設定為true時，子元素可以在鍊路重連接配接期間成為鍊路的源/目标。 dia.attributes.magnet 當設定為true時，子元素可以在鍊路重連接配接期間成為鍊路的源/目标。對“端口”有用。 如果連結連接配接到一個磁鐵，該磁鐵也定義了端口對象，那麼端口對象的id屬性将複制到連結源/目标的端口屬性。 |
| Graph 圖 joint.dia.Graph 是用于儲存所有圖形單元（包括elemen和link）的模型。 不僅為有向圖提供了有效的存儲，而且為周遊圖提供了有用的算法。 本質就是一個 Backbone model。 圖像上所有的圖形單元存儲在屬性 中。 events事件(顧名思義不做詳解) 例如： graph.on('add', function(cell) { alert('New cell with id ' + cell.id + ' added to the graph.') }) Graphd的JSON格式： { cells: [// Array of cells (ie. links and elements). { 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 } ] } graph.addCell(cell) 向圖中添加一個新單元格，用法簡單 graph.addCells(cells[, opt]) 向圖中添加新單元格數組 graph.addCells(cell, cell, ..[, opt]) graph. bfs (element, iteratee [, opt]) 使用從制定元素開始的寬度優先搜尋算法周遊圖 下圖顯示了元素在圖中周遊的順序： 如果參數 =true，搜尋則遵循連結方向。 如果沒有使用opt.inbound和opt.outbound，或者将這兩個選項都設定為true，那麼将在兩個方向周遊圖。 如果參數deep=true，則會考慮嵌套元素。 graph.clear([options) 從圖中删除所有圖形單元 graph.cloneCells(cells) 從cells數組中克隆所有的cell，并傳回一個對象，該對象将原始cell ID映射到Clone對象 克隆對象格式：{ [original cell ID]: [clone] } graph.cloneSubgraph(cells [, opt]) 克隆整個子圖，包括源/目标在子圖中的所有連接配接連結。 這相當于調用graph.cloneCells(graph.getSubgraph(cells)) 如果參數.deep=true，則考慮子圖單元格的内嵌單元圖形 graph.dfs(element, iteratee [, opt]) 用法類似上面提到的bfs（）方法 graph.disconnectLinks(element) 斷開與元素的所有關聯連結 graph.findModelsFromPoint(point) 查找圖中某一點下的元素(joint.di . element執行個體) point是一個具有x和y屬性的對象。傳回其邊框包含點的元素數組。注意，由于元素可能重疊，是以可以有多個元素 graph.findModelsInArea(rect) 在圖中的某個區域中查找元素(joint.di . element執行個體) rect是一個具有x, y，寬度和高度屬性的對象。傳回一個元素數組，其邊界框左上角坐标落在矩形矩形中。 graph.findModelsUnderElement(element [, opt]) 查找位于元素下面的所有元素(joint.di . element的執行個體) searchby參數可以選擇确定一個元素在另一個元素下面意味着什麼，可能的值是“bbox”(預設值)、“center”、“origin”、“corner”、“topRight”和“bottomLeft” graph.fromJSON(jsonObject, [options]) 從JSON對象加載圖表（不是字元串） 例如： var jsonString = JSON.stringify(graph.toJSON()); // ... send jsonString to the server // store jsonString to localStorage or do whatever you want // later on ... graph.fromJSON(JSON.parse(jsonString)); graph.getBBox(cells[, opt]) 傳回包圍所有給定單元格的包圍框 graph.getCell(id) 從圖中通過其id擷取單元格。 graph.getCells() 擷取圖中的所有元素和連結 graph.getCommonAncestor(cells...) 傳回作為參數傳遞的所有單元格的共同祖先 例如，如果元素B嵌入到元素A中，元素C也嵌入到元素A中，圖形。graph.getCommonAncestor(B, C)将傳回元素a graph.getConnectedLinks(element [, opt]) graph.getElements() graph.getLastCell() 在圖中獲得最後一個單元格(元素或連結)。（最後一個細胞被定義為具有最高z性質的細胞） graph.getLinks() graph.getNeighbors(element [, opt]) 在圖中得到元素的所有鄰居（不是連線是圖形元素）。 如果參數 =true，傳回嵌入到元素中的所有元素的所有鄰居 graph.getPredecessors(element [, opt]) 傳回元素的所有前任元素的數組（預設深度優先算法） 參數 =true，使用第一搜尋算法。 參數deep設定為true，也要考慮到嵌入的元素。 graph.getSinks() 傳回圖中的所有葉子節點的數組 graph.getSources() 傳回圖的所有根節點的數組 graph.getSubgraph(cells [, opt]) 傳回一個單元格數組，該數組是查找與單元格數組中的任何單元格連接配接的元素/連結的結果 graph.getSuccessors(element [, opt]) 傳回元素的所有後續元素的數組 graph.isNeighbor(elementA, elementB [, opt]) 如果elementB是elementA的鄰居，傳回true 同樣有 參數。 graph.isPredecessor(elementA, elementB) 如果elementB是elementA的前身，傳回true。 graph.isSink(element) 如果元素是葉子，傳回true，也就是說，元素中沒有出去的連結 graph.isSource(element) 如果元素是根元素，傳回true，即沒有指向元素的連結。 graph.isSuccessor(elementA, elementB) 如果elementB繼承elementA，傳回true graph.maxZIndex() 得到圖中最大的Z值 graph.minZIndex() graph.removeCells(cells[, opt]) 從圖中删除給定的圖形單元數組 graph.removeCells(cell, cell, ..[, opt]) graph.removeLinks(element) 删除元素的所有關聯連結 graph.resetCells(cells[, opt]) 在圖中重置單元格 graph.resetCells(cell, cell, ..[, opt]) graph.search(element, iteratee [, opt]) 周遊圖，從元素開始，然後是連線 graph.toJSON() 此方法不傳回JSON字元串，而是傳回一個JSON對象 graph.translate(tx, ty [, opt]) 将圖中的所有單元格轉換為tx和ty像素 |
| Paper 畫布 joint.dia.Paper 是 模型的視圖。繼承 Backbone View，在其構造函數中接受具有衆多設定的options對象 示例如下： var graph = new joint.dia.Graph var paper = new joint.dia.Paper({ el: $('#paper'), width: 600, height: 400, gridSize: 10, model: graph }); var rect = new joint.shapes.basic.Rect({ position: { x: 50, y: 70 }, size: { width: 100, height: 40 } }); graph.addCell(rect); |
| dia.Link 連線 圖連線的基本模型。它繼承了joint.dia，具有一些特定于連結的附加屬性和方法。 兩個關鍵屬性： ：提供一個标簽數組，每個都可以指定自己的标記、位置和屬性。 也可以将定制屬性傳遞給連結。 為了實作linkView的互動，這些可能對辨別單個連結模型很有用。例如，隻對link1啟用自定義contextmenu互動，而不啟用link2: var CustomLinkView = joint.dia.LinkView.extend({ contextmenu: function(evt, x, y) { if (this.model.get('customLinkInteractions')) { // only links with `customLinkInteractions: true` this.addLabel(x, y); } } }); var paper = new joint.dia.Paper({ //... linkView: CustomLinkView, interactive: function(cellView) { if (cellView.model.get('customLinkInteractions')) { // only links with `customLinkInteractions: true` return { vertexAdd: false }; } return true; // otherwise } }); var link1 = new joint.dia.Link({ //... customLinkInteractions: true // right-click adds a label }); var link2 = new joint.dia.Link({ //... customLinkInteractions: false // or omit completely }); Custom Link 自定義連線 通過繼承joint.dia.Link，建立自定義連結的連結類。 自定義連結可以覆寫連結屬性來配置設定自己的預設值。 示例如下： var CustomLink = joint.dia.Link.define('examples.CustomLink', { defaultLabel: { markup: [ { tagName: 'circle', selector: 'body' }, { tagName: 'text', selector: 'label' } ], attrs: { label: { text: '%', // default label text fill: '#ff0000', // default text color fontSize: 14, textAnchor: 'middle', yAlignment: 'middle', pointerEvents: 'none' }, body: { ref: 'label', fill: '#ffffff', stroke: '#000000', strokeWidth: 1, refR: 1, refCx: 0, refCy: 0 } }, position: { distance: 0.5, // place label at midpoint by default offset: { y: -20 // offset label by 20px upwards by default }, args: { absoluteOffset: true // keep offset absolute when moving by default } } } }); var link = new CustomLink({ //... }); Builtin Default Attributes 内置預設屬性 為了確定向後相容，接頭。dia。連結類帶有一個私有的内置defaultLabel屬性。 dia.Link.events 連線事件 （簡單，不做詳解） change:smooth：當連結切換插值時觸發 change:manhattan：當連結切換到正交路由時觸發 change:vertices：當連結改變其頂點數組時觸發 change:z：當連結在z級移動時觸發 transition:start：當過渡開始的時候觸發 transition:end：當過渡結束時觸發 dia.Link.labels 标簽 一個連結可以有多個标簽，每個标簽可以有不同的屬性。 JointJS識别的屬性總結如下： { markup?: string | Array<{ tagName: SVGElement, selector?: string }>, attrs?: { [key: selector]: { [key: SVG attribute | JointJS attribute]: any } | null }, position?: number | { distance?: number, offset?: number | { x: number, y: number }, args?: { absoluteDistance?: boolean, reverseDistance?: boolean, absoluteOffset?: boolean } } } Markup 标記屬性指定标簽的标記。它可以作為可解析SVG提供（例如：'<rect /><text />'），或者JSON數組（例如：[{ tagName: 'rect' }, { tagName: 'text' }]）。 如果标簽上沒有提供标記，則标記取自連線的defaultLabel.markup标記屬性。 使用者可以建立自定義連結類型，提供defaultLabel。 如果使用的連結類型不提供defaultLabel标記，則使用内置的預設連結标記（标記定義為帶有“body”的JSON數組）。 Styling attrs屬性是一個對象，其關鍵字是CSS選擇器。 除了要配置設定的值，還應該包含指定本機SVG和/或JointJS特殊屬性的對象。 如果連結類型提供defaultLabel.attrs，這些屬性會和label.attrs合并。這允許您從label.attrs裡的defaultLabel引用選擇器。 （例如：attrs: { body: { stroke: 'black' } }） 如果使用内置預設标記，為了向後相容，應用了幾個内置的預設attrs。它們與defaultLabel.attrs合并，再與label.attrs(如果提供的話)合并。 Position position屬性指定标簽相對于連結的SVG路徑的位置。 它可以定義為一個數字或一個具有距離和可選偏移量和args屬性的對象。 如果沒有提供位置，内置預設值({distance: 0.5})用于保持向後相容。 dia.Link.presentation 一個鍊路的形狀由五個屬性決定： . Source and Target 建立連結時必須提供源和目标屬性。可以提供任何一個元素。 例如： link.source(rect); link.source({ id: rect.id }); link.source(new g.Point(100, 100)); link.source({ x: 100, y: 100 }); Anchor 連結端錨是連結路徑想要連接配接到源/目标端的給定(子)元素中的一個點。 每個連結有兩個錨;一個在源端，一個在目标端。如果連結端(源/目标)被指定為元素，連結端錨的精确位置可以由錨屬性指定（如果連結端指定為一個點，那麼它的坐标将直接用作它的錨）。 源錨和目标錨确定了基本的連結路徑，然後，連接配接點、路由器和連接配接器的工作就是修改路徑，使其看起來更好。 例如： link.source(rect, { anchor: { name: 'bottomLeft', args: { dx: 20, dy: -10 } } }); Connection Point 鍊路連接配接點是鍊路路徑實際結束的點。 連接配接端的連接配接點可以由connectionPoint屬性指定，每個鍊路有兩個連接配接點;一個在源端，一個在目标端。并且連接配接點總是在連結路徑上（将連結錨和頂點按順序連接配接在一起的路徑） 通過考慮連線路徑和終端元素（大多情況下指圖形單元）的期望特性（比如：bounding box, shape boundary, anchor）之間的交叉點來找到連接配接點。 Connection Strategy 連接配接政策指定應該為終端元素配置設定哪個錨點和connectionPoint屬性以響應使用者互動。 注意： 連接配接政策不是按單個連線配置設定的，而是畫布級别的配置。 如下： paper.options.connectionStrategy = joint.connectionStrategies.pinAbsolute; 沒有提供連接配接政策，即joint.connectionStrategies。預設情況下使用joint.connectionStrategies.useDefaults函數 Vertices 頂點數組是一個使用者定義的連結通過的點數組。 在源錨和目标錨基礎上，連結頂點确定基本連結路徑。 可以使用links .vertices()函數和相關函數通路這些頂點。（後面會有詳解） link.vertices(); link.vertices([{ x: 100, y: 120 }, { x: 150, y: 60 }]); Router 路由器接受一個連結頂點數組，并将它們轉換成連結應該經過的路由點數組，然後使用此路由生成連接配接SVG路徑指令。 可以使用link.router()函數通路連結的router屬性。 （路由後續會有詳解，不做展開） Connector 連接配接器擷取一系列連結路由點并生成SVG路徑指令，以便能夠呈現連結。 可以使用link.connector()函數通路連結的連接配接器屬性。 示例如下： link.connector('rounded', { raw: true, radius: 20 }); Styling 連結的樣式包含在attrs屬性中，其結構與元素的attrs屬性完全相同。 link.addTo(graph) link.appendLabel(label [, opt]) 在标簽數組的末尾添加一個新标簽 link.attr(attrs) 例如： link.attr({ '.connection': { stroke: 'blue' }, '.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' }, '.marker-target': { fill: 'yellow', d: 'M 10 0 L 0 5 L 10 10 z' } }); link.attr('.marker-source/fill', 'green'); link.clone() link.connector() 傳回連結的連接配接器屬性的拷貝 link.connector(connector [, opt]) 設定連結的連接配接器 link.connector(connectorName [, connectorArgs, opt]) 将連結的連接配接器設定為值{name: connectorName, args: connectorArgs} link.disconnect() 斷開連結與源和目标元素的連接配接。 link.findView(paper) link.getAncestors() link.getSourceElement() link.getTargetElement() link.getTransitions() 傳回所有活動轉換(它們的路徑)的數組 link.hasLoop([opt]) 如果此連結是循環連結，則傳回true link.insertLabel(index, label [, opt]) 在索引處添加一個新标簽 link.insertVertex(index, vertex [, opt] 在索引處添加一個新頂點。通過索引-1添加頂點數組末尾的頂點。 link.isEmbeddedIn(element [, opt]) 如果連結嵌入到元素元素中，則傳回true link.label(index) 傳回索引處的标簽。 link.labels() 傳回标簽數組的拷貝 link.prop(properties) 在元素模型上設定屬性(可能是嵌套的)。 link.remove() 從圖中删除連結。 link.removeAttr(path [, opt]) 從連結中删除先前的set屬性。 link.removeLabel(index [, opt]) 删除索引處的标簽 link.removeVertex(index [, opt]) 删除頂點在索引 link.reparent() 自動找到并設定連結的最佳父元素，這樣當父元素移動時，連結及其所有頂點也會移動 link.router() 傳回連結的路由器屬性的拷貝 link.router(router [, opt]) 設定連結的路由器 link.router(routerName [, routerArgs, opt]) 将連結的路由器設定為值{name: routerName, args: routerArgs}。 link.scale(sx, sy, origin [, opt]) 根據給定的原點縮放連結的點(頂點) link.source() 傳回連結源屬性的拷貝 link.source(source [, opt]) 設定連結的源。 例如： link.source(rect); link.source({ id: rect.id }); link.source(new g.Point(100, 100)); link.source({ x: 100, y: 100 }); link.source(rect, { selector: 'body', anchor: { name: 'bottomLeft', args: { dx: 20, dy: -10 } } }); link.stopTransitions([path]) 停止所有運作轉換 link.target() 傳回連結的目标屬性的拷貝。 link.target(target [, opt]) 設定連結的目标。 link.target(rect); link.target({ id: rect.id }); link.target(new g.Point(100, 100)); link.target({ x: 100, y: 100 }); link.target(rect, { selector: 'body', anchor: { name: 'bottomLeft', args: { dx: 20, dy: -10 } } }); link.toBack() 移動連結，使其位于所有其他單元格(元素/連結)的後面 link.toFront() 與上相反 link.toJSON() 将連線轉換成json對象 link.transition(path, value [, opt]) 允許在一段時間内逐漸改變連結屬性 例如： //會在100ms内開始改變鍊路目标坐标，在500ms内執行彈跳效果 link.transition('target', { x: 250, y: 250 }, { delay: 100, duration: 500, timingFunction: joint.util.timing.bounce, valueFunction: joint.util.interpolate.object }); link.translate(tx, ty [, opt]) 将連線頂點轉換為x軸上的tx像素和y軸上的ty像素 如果傳遞了opt對象，那麼它可以包含傳遞給連結或圖形上的change事件偵聽器的資料 link.vertex(index) 傳回索引處的頂點 link.vertex(index, vertex [, opt]) 用頂點的值更新索引處的頂點 例如： link.vertex(0, { x: 100, y: 200 }); link.vertices() 傳回頂點數組的拷貝 |
| dia.LinkView 連線視圖的三大作用： 1. 在畫布上渲染和繪制連線； 2. 對連線相關事件進行監聽和處理
在連接配接視圖上添加連線工具 // 1) creating link tools var verticesTool = new joint.linkTools.Vertices(); var segmentsTool = new joint.linkTools.Segments(); var boundaryTool = new joint.linkTools.Boundary(); // 2) creating a tools view var toolsView = new joint.dia.ToolsView({ name: 'basic-tools', tools: [verticesTool, segmentsTool, boundaryTool] }); // 3) attaching to a link view var linkView = link.findView(paper); linkView.addTools(toolsView); linkView.hideTools(); //添加監聽 paper.on('link:mouseenter', function(linkView) { linkView.showTools(); }); paper.on('link:mouseleave', function(linkView) { linkView.hideTools(); }); 關于link和linkview： 互相轉換: Var linkview = link.findView(paper); Var link = linkview.model; Custom LinkView 自定義連線視圖 doubleLinkTools：這個屬性設定為true時就意味着在連線兩端都呈現連線工具 示例： var CustomLinkView = joint.dia.LinkView.extend({ // custom interactions: pointerdblclick: function(evt, x, y) { this.addVertex(x, y); }, contextmenu: function(evt, x, y) { this.addLabel(x, y); }, // custom options: options: joint.util.defaults({ doubleLinkTools: true, }, joint.dia.LinkView.prototype.options) }); var paper = new joint.dia.Paper({ //... linkView: CustomLinkView, interactive: { vertexAdd: false } // disable default vertexAdd interaction }); linkView.addLabel(x, y [, opt]) 在提供的坐标處向連結添加一個新的預設标簽。 例如： var CustomLinkView = joint.dia.LinkView.extend({ contextmenu: function(evt, x, y) { this.addLabel(x, y, { absoluteDistance: true, reverseDistance: true, absoluteOffset: true }); } }); linkView.addTools(toolsView) 添加工具視圖到連線視圖上（上面有執行個體） linkView.addVertex(x, y) 在提供的坐标上向連結添加一個新的預設頂點，并讓linkView自動确定頂點數組中新頂點的索引。 linkView.getBBox() 傳回linkView的綁定框 linkView.getClosestPoint(point) 傳回最接近點的連接配接上的點 linkView.getClosestPointLength(point) 傳回連接配接到最接近點的點的長度 linkView.getClosestPointRatio(point) 傳回連接配接到最近點的比率(标準化長度)。傳回的值位于區間[0,1](包括) linkView.getConnection() 傳回連接配接的幾何表示 linkView.getConnectionLength() 傳回一個緩存的連接配接總長度(以像素為機關) linkView.getConnectionSubdivisions() 傳回連接配接的段細分數組的緩存數組 linkView.getLabelCoordinates(labelPosition) 根據提供的labelPosition對象傳回x和y坐标 linkView.getLabelPosition(x, y [, opt]) 根據提供的x和y坐标傳回标簽位置對象。 linkView.getPointAtLength(length) 傳回從連接配接開始處開始的路徑上的點 linkView.getPointAtRatio(ratio) 傳回路徑上與連接配接開始處的比值(标準化長度)的點 linkView.getSerializedConnection() 傳回連接配接的緩存路徑資料 linkView.getTangentAtLength(length) 傳回一條與路徑相切的直線，該線與連接配接開始處的長度相切 linkView.getTangentAtRatio(ratio) 傳回一條與路徑相切的直線，該直線與連接配接開始處的長度之比(标準化長度)成正比 linkView.getVertexIndex(x, y) 傳回頂點數組索引，在該索引處插入具有所提供的x和y坐标的新頂點 linkView.hasTools() 如果此連結視圖附帶一個工具視圖，則傳回true。 linkView.hasTools(name) 如果該連結視圖具有附加的所提供名稱的工具視圖，則傳回true linkView.hideTools() linkView.removeRedundantLinearVertices([opt]) 從模型的頂點數組中删除任何備援頂點 linkView.removeTools() 删除連接配接到此連結視圖的tools視圖 linkView.sendToken(token [, opt, callback]) 沿着連結發送一個令牌 例如： // Send an SVG circle token along the link. var vCircle = V('circle', { r: 7, fill: 'green' }); link.findView(paper).sendToken(vCircle, { duration: 500, direction: 'reverse' }, function() { console.log('animation end'); }); linkView.showTools() linkView.sourceAnchor 記錄鍊路源錨位置的點 linkView.sourceBBox 記錄源的位置和尺寸 linkView.sourcePoint 記錄鍊路源連接配接點位置的點 linkView.targetAnchor linkView.targetBBox linkView.targetPoint |
linkTools 連線工具 ：在連結頂點上添加句柄 Segments ： 在連結段上添加句柄 SourceArrowhead ： 在連結源上方添加一個句柄 ：在連結源錨上方添加一個句柄 TargetAnchor： 在連結目标錨上方添加一個句柄 Boundary ： 顯示連結bbox ： 添加一個互動式删除按鈕 要建立一個新的連結工具，我們調用它的構造函數 例如： var verticesTool = new joint.linkTools.Vertices({ snapRadius: 10 }); 要建立一個新的連結工具，我們調用它的構造函數 添加可定制的按鈕 例如： var infoTool = new joint.linkTools.Button({ markup: [{ tagName: 'circle', selector: 'button', attributes: { 'r': 7, 'fill': '#001DFF', 'cursor': 'pointer' } }, { tagName: 'path', selector: 'icon', attributes: { 'd': 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4', 'fill': 'none', 'stroke': '#FFFFFF', 'stroke-width': 2, 'pointer-events': 'none' } }], distance: 60, offset: 0, action: function(evt) { alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id); } }); 除了它們自己的參數外，所有内置連結工具都接受以下可選參數： focusOpacity：工具聚焦時的不透明度是多少 例如： var verticesTool = new joint.linkTools.Vertices({ focusOpacity: 0.5 }); linkTools.Boundary 邊界連結工具呈現一個矩形邊框來顯示連結的邊界框。 它接受一個額外的參數，這個參數可以作為對象傳遞給link工具構造函數 padding：這個選項決定邊界區域是否應該在視覺上膨脹，如果是，要膨脹多少。預設是10。 例如： var boundaryTool = new joint.linkTools.Boundary({ focusOpacity: 0.5, padding: 20 }); linkTools.Button 按鈕連結工具允許您在連結的給定位置呈現自定義按鈕。 它接受5個額外的參數，這些參數可以作為對象傳遞給link工具構造函數 Distance：按鈕放置的距離。（接受負數;然後從連杆的末端開始計算距離。預設值為0；也接受百分比的字元串。） Rotate：按鈕是否應該根據連杆在距離指定位置的斜率旋轉?預設的是假的。 Offset： 按鈕與連結的相對偏移量。正數表示按鈕應該偏移到連結的右側(相對于從源到目标的方向);負數意味着按鈕應該偏移到連結的左邊(相對于從源到目标的方向)。預設值為0。 Action：當使用者單擊remove按鈕時，會發生什麼情況?預設值未定義(沒有互動)。 Markup：按鈕的标記，以JointJS JSON格式提供。預設是未定義的(沒有内容) 示例如下： var infoButton = new joint.linkTools.Button({ focusOpacity: 0.5, distance: 60, action: function(evt) { alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id); }, markup: [{ tagName: 'circle', selector: 'button', attributes: { 'r': 7, 'fill': '#001DFF', 'cursor': 'pointer' } }, { tagName: 'path', selector: 'icon', attributes: { 'd': 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4', 'fill': 'none', 'stroke': '#FFFFFF', 'stroke-width': 2, 'pointer-events': 'none' } }] }); linkTools.Button類可以被繼承，在joint.linkTools命名空間後建立可重用的新的按鈕類型。 然後，可以通過調用其構造函數來獲得自定義按鈕類型的新執行個體。 例如： joint.linkTools.InfoButton = joint.linkTools.Button.extend({ name: 'info-button', options: { focusOpacity: 0.5, distance: 60, action: function(evt) { alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id); }, markup: [{ tagName: 'circle', selector: 'button', attributes: { 'r': 7, 'fill': '#001DFF', 'cursor': 'pointer' } }, { tagName: 'path', selector: 'icon', attributes: { 'd': 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4', 'fill': 'none', 'stroke': '#FFFFFF', 'stroke-width': 2, 'pointer-events': 'none' } }] } }); var infoButton = new joint.linkTools.InfoButton(); linkTools.Remove 删除連結工具在連結的給定位置呈現一個删除按鈕。 它接受5個額外的參數，這些參數可以作為對象傳遞給link工具構造函數:和上述linkTools.Button的參數類型和作用一緻。 示例如下： var removeButton = new joint.linkTools.Remove({ focusOpacity: 0.5, rotate: true, distance: -20, offset: 20 }); linkTools.Segments 段連結工具在連結的所有段上呈現句柄。 它接受四個額外的參數，這些參數可以作為對象傳遞給link工具構造函數: redundancyRemoval：如果使用者安排了兩個(或更多)段，使它們位于同一條線上，那麼中間的段是否應該被認為是多餘的并被删除?預設是true删除 segmentLengthThreshold：顯示段句柄(防止句柄溢出其段)的最小段長度。預設是40 snapRadius：當使用者移動段時，為了使自己與另一個段保持一緻，段應該從多遠的地方折斷?預設的是10 snapHandle：如果snapRadius選項被設定為true，當使用者移動段句柄時段段被按下，那麼句柄應該跟着使用者指針走，還是應該和段段一起被按下，直到它取消吸附?預設值為true，這意味着句柄與段相沖突。 示例如下： var segmentsTool = new joint.linkTools.Segments({ focusOpacity: 0.5, redundancyRemoval: false, segmentLengthThreshold: 50, snapHandle: false, snapRadius: 10 }); linkTools.SourceAnchor SourceAnchor link工具在連結的源錨上方呈現一個句柄。 它接受5個額外的參數，這些參數可以作為對象傳遞給link工具構造函數: redundancyRemoval：如果使用者移動錨，使其位于具有兩個(或更多)頂點的單行上，那麼中間的那個(s)應該被認為是多餘的并被删除嗎?預設是正确的 restrictArea：是否隻允許使用者在受限區域(源磁鐵的包圍盒區域)移動錨點?預設是正确的。 areaPadding：如果restrictArea選項設定為true，使用者隻能在限定的區域内移動錨。 snapRadius：當使用者移動錨點時，為了使其與錨點引用保持一緻，段塊應該在離錨點多遠的地方折斷?預設是10。 Snap：當使用者移動錨點時，應該調用的snap函數 回調函數必須以g傳回錨。點并具有簽名function(coords, endView, endMagnet, endType, linkView, toolView) 示例如下： var sourceAnchorTool = new joint.linkTools.SourceAnchor({ focusOpacity: 0.5, redundancyRemoval: false, restrictArea: false, snapRadius: 20 }); 下面提供了一個有用的自定義snap函數示例，它将錨固定在限制區最近一側的中心 var snapAnchor = function(coords, endView, endMagnet) { // remove rotation of the restricted area var bbox = endView.getNodeUnrotatedBBox(endMagnet); var angle = endView.model.angle(); var origin = endView.model.getBBox().center(); coords.rotate(origin, angle); // identify the side nearest to pointer coords var anchor; var side = bbox.sideNearestToPoint(coords); switch (side) { case 'left': anchor = bbox.leftMiddle(); break; case 'right': anchor = bbox.rightMiddle(); break; case 'top': anchor = bbox.topMiddle(); break; case 'bottom': anchor = bbox.bottomMiddle(); break; } // rotate the anchor according to original rotation of restricted area return anchor.rotate(origin, -angle); }; var sourceAnchorTool = new joint.linkTools.SourceAnchor({ snap: snapAnchor; }); linkTools.SourceArrowhead 連結工具在連結的源連接配接點上方呈現一個類似箭頭的句柄。 示例如下： var sourceArrowheadTool = new joint.linkTools.SourceArrowhead({ focusOpacity: 0.5 }); linkTools.TargetAnchor 接工具在連結的目标錨上方呈現一個句柄。 它接受5個額外的參數，這些參數可以作為對象傳遞給link工具構造函數：和linkTools.SourceAnchor的五個參數一樣。 示例如下： var targetAnchorTool = new joint.linkTools.TargetAnchor({ focusOpacity: 0.5, redundancyRemoval: false, restrictArea: false, snapRadius: 20 }); 下面提供了一個有用的自定義snap函數示例。它将錨固定在限制區最近一側的中心： var snapAnchor = function(coords, endView, endMagnet) { // remove rotation of the restricted area var bbox = endView.getNodeUnrotatedBBox(endMagnet); var angle = endView.model.angle(); var origin = endView.model.getBBox().center(); coords.rotate(origin, angle); // identify the side nearest to pointer coords var anchor; var side = bbox.sideNearestToPoint(coords); switch (side) { case 'left': anchor = bbox.leftMiddle(); break; case 'right': anchor = bbox.rightMiddle(); break; case 'top': anchor = bbox.topMiddle(); break; case 'bottom': anchor = bbox.bottomMiddle(); break; } // rotate the anchor according to original rotation of restricted area return anchor.rotate(origin, -angle); }; var targetAnchorTool = new joint.linkTools.TargetAnchor({ snap: snapAnchor; }); linkTools.TargetArrowhead 連結工具在連結的目标連接配接點上方呈現一個類似箭頭的搖桿。 示例如下： var targetArrowheadTool = new joint.linkTools.TargetArrowhead({ focusOpacity: 0.5 }); linkTools.Vertices 頂點連結工具在連結的所有頂點之上呈現句柄。 它接受三個額外的參數，這些參數可以作為對象傳遞給link工具構造函數。 redundancyRemoval：如果使用者排列了三個(或更多)頂點，使它們位于一行上，那麼中間的頂點是否應該被認為是多餘的并被删除了呢?預設是正确的 snapRadius：當使用者移動頂點時，為了使自己垂直于另一個頂點，頂點應該從多遠的地方折斷?預設是20 vertexAdding：使用者可以添加新的頂點(通過單擊連結的一部分)嗎?預設是正确的。 示例如下： var verticesTool = new joint.linkTools.Vertices({ focusOpacity: 0.5, redundancyRemoval: false, snapRadius: 10, vertexAdding: false, }); |
| Routers 路由 路由器接受一個連結頂點數組，并将它們轉換成連結應該經過的路由點數組。 可以使用link.router()函數通路連結的router屬性。 頂點和路由的差別在于，頂點是使用者定義的，而路由是計算出來的。 有五個内置路由器: 'manhattan' 'metro' 'normal' 'orthogonal' 'oneSide' 示例如下： link.router('orthogonal', { elementPadding: 10 }); 預設路由器為'normal';這可以通過defaultRouter 畫布屬性選項進行更改。 示例如下： paper.options.defaultRouter = { name: 'orthogonal', args: { elementPadding: 10 } }); 特性：
小貼士：正交線段就是兩條線夾角成90°。 JointJS的子產品化架構允許根據需要将路由器與連接配接器進行混合和比對。 例如，可以指定一個連線在“manhattan”路由器之上使用“jumpover”連接配接器。 示例如下： var link = new joint.shapes.standard.Link(); link.source(rect); link.target(rect2); link.router('manhattan'); link.connector('jumpover'); routers.custom 自定義路由 方式：在joint.routers的命名空間下定義新路由，或者直接作為連線的路由器屬性傳遞過去。 在任何一種情況下，router函數必須傳回連結應該經過的路由點數組(不包括開始/結束連接配接點)。 函數類型格式如下：function( ) 參數： Vertices：路線的頂點。 Args：當使用者調用路由器方法時，帶有附加可選參數的對象。 linkView：連接配接的LinkView。 在joint.routers命名空間中定義的路由器的例子如下： joint.routers.randomWalk = function(vertices, args, linkView) { var NUM_BOUNCES = args.numBounces || 20; vertices = joint.util.toArray(vertices).map(g.Point); for (var i = 0; i < NUM_BOUNCES; i++) { var sourceCorner = linkView.sourceBBox.center(); var targetCorner = linkView.targetBBox.center(); var randomPoint = g.Point.random(sourceCorner.x, targetCorner.x, sourceCorner.y, targetCorner.y); vertices.push(randomPoint) } return vertices; } var link = new joint.shapes.standard.Link(); link.source(source); link.target(target); link.router('randomWalk', { numBounces: 10 }); 下面提供了一個作為函數傳遞的路由器示例（注意：這種方法不支援傳遞自定義args，也不能使用graph.toJSON()函數對其進行序列化。）： var link = new joint.shapes.standard.Link(); link.source(source); link.target(target); link.router(function(vertices, args, linkView) { var NUM_BOUNCES = 20; vertices = joint.util.toArray(vertices).map(g.Point); for (var i = 0; i < NUM_BOUNCES; i++) { var sourceCorner = linkView.sourceBBox.center(); var targetCorner = linkView.targetBBox.center(); var randomPoint = g.Point.random(sourceCorner.x, targetCorner.x, sourceCorner.y, targetCorner.y); vertices.push(randomPoint) } return vertices; }); routers.manhattan manhattan路由器是“orthogonal路由器的智能版本。 它用正交線段連接配接頂點，必要時插入路線點，同時避開路上的障礙物。 路由器有一些有用的選項來決定算法的行為。這些選項可以作為路由器傳遞，參數： Step：由“曼哈頓”尋路算法控制的虛拟網格大小，也是應用在開始/結束元素的填充大小（數字越小，複雜度越高）。 當與dia.Paper.option.gridSize相等時性能最佳，預設值是10. maximumLoops：尋路循環的最大疊代次數。 如果疊代次數超過這個最大值，就會中止尋路，而使用回退路由器(orthogonal)。更高的數字->更高的複雜性。預設是2000。 maxAllowedDirectionChange：manhattan路由方向的最大變化(以度計)。預設是90。 Perpendicular：linkView.perpendicular是否生效。這就導緻路由器不能精确地連結到終端元素的錨點，而是連接配接到一個離他很近的正交的點。預設true。 excludeEnds：帶有source、target的字元串數組，告訴算法給定的結束元素不應被視為障礙。預設空數組（兩個都被視為障礙） excludeTypes：在計算路由時不應考慮障礙的元素類型數組。預設是['basic.Text'] startDirection：一個數組，指定元素可能的起始方向。預設為['left'， 'right'， 'top'， 'bottom'](允許所有方向) 比如：['bottom']，總是從源元素的底部開始。 endDirection: 指定元素可能的結束方向的數組。 示例如下： link.router('manhattan', { excludeEnds: ['source'], excludeTypes: ['myNamespace.MyCommentElement'], startDirections: ['top'], endDirections: ['bottom'] }); routers.metro metro路由器是對“manhattan”路由器的一種改進，它能産生一個octolinear路徑（由正交和對角線段組成的路線，類似于倫敦地鐵地圖的設計） 它還避免了障礙，并接受四個參數（相對于manhattan路由器有些改變）： maximumLoops：如果在給定的疊代次數中找不到路徑，不要使用orthogonal路由器作為後備，而是使用一個自定義的不能避免障礙的octolinear後備路線。 maxAllowedDirectionChange：預設更改為45。 startDirection，endDirection和manhattan路由一樣。 示例如下： link.router('metro', { excludeEnds: ['source'], excludeTypes: ['myNamespace.MyCommentElement'], startDirections: ['top'], endDirections: ['bottom'] }); routers.normal 這是連結的預設路由器，也是最簡單的路由器。 它沒有任何選擇，也不做任何事情;它傳回傳遞給它的頂點，而不需要修改作為要采取的路由。 示例如下： link.router('normal'); routers.oneSide “oneSide路由器是orthogonal路由器的受限版本。 接受兩個參數： Side：和manhattan一樣。 Padding：連接配接點與第一個/最後一個頂點之間的最小間隙。預設值是40。 示例如下： link.router('oneSide', { side: 'top', padding: 30 }); routers.orthogonal orthogonal路由器傳回具有正交線段的路由。 它産生額外的路線點，以便在路上創造正确的角度。它無法避免障礙。 隻有一個可選參數： elementPadding：第一個/最後一個路徑角可以放置元素的最小距離。預設是20。 示例如下： link.router('orthogonal', { elementPadding: 10 }); 為了向後相容，orthogonal路由也可以通過設定link.manhattan屬性為true實作。 示例如下： // deprecated link.set('manhattan', true); |
ToolsView 連線工具組視圖 類是一組連結工具的容器。當把toolsview添加到linkview時，将把工具以組的形式渲染出來。 兩個屬性： 示例如下： // 1) creating link tools var verticesTool = new joint.linkTools.Vertices(); var segmentsTool = new joint.linkTools.Segments(); var boundaryTool = new joint.linkTools.Boundary(); // 2) creating a tools view var toolsView = new joint.dia.ToolsView({ name: 'basic-tools', tools: [verticesTool, segmentsTool, boundaryTool] }); // 3) attaching to a link view var linkView = link.findView(paper); linkView.addTools(toolsView); toolsView.focusTool(tool) 當工具聚焦時，這個工具視圖中的所有其他工具都會被隐藏，并且根據工具的focus選項改變工具的不透明度。 toolsView.blurTool(tool) 與上相反 toolsView.getName() toolsView.hide() toolsView.show() ToolView 連線工具視圖 其實在toolsview的例子中已經可以看出，一組工具由若幹個獨立的工具組成，這裡的toolsview即為單個工具的視圖。 用法和toolsview類似。 toolView.blur() toolView.focus() toolView.getName() 例如： 建立一個自定義的工具 joint.linkTools.InfoButton = joint.linkTools.Button.extend({ name: 'info-button', options: { markup: [{ tagName: 'circle', selector: 'button', attributes: { 'r': 7, 'fill': '#001DFF', 'cursor': 'pointer' } }, { tagName: 'path', selector: 'icon', attributes: { 'd': 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4', 'fill': 'none', 'stroke': '#FFFFFF', 'stroke-width': 2, 'pointer-events': 'none' } }], distance: 60, offset: 0, action: function(evt) { alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id); } } }); toolView.hide() toolView.show() toolView.isVisible() 如果工具目前可見，傳回true |
| Cell 圖單元格的基本模型。 本質：就是一個帶着一些附加的屬性和方法的backbone的model 另外，每個cell都會有一個唯一的id dia.Cell.define 定義一個新的圖形 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); dia.Cell.markup markup：指定JSON元素數組的XML字元串或JSON标記。用作模闆，在呈現關聯的cellView時動态建構DOM元素 xml字元串： Json資料： cell.getParentCell()：傳回單元格的父單元格，如果沒有則傳回null cell.isElement()：判斷是否是圖形元素（link則傳回false） element.isLink() cell.parent()：傳回單元格的父屬性 |
| CellView 圖形單元視圖 是 joint.dia.Cell model的視圖。 作用： 和linkview相對于link來說是一樣的，有三點：
怎麼找到與特定單元格(模型)關聯的視圖？ 方法：var cellView = paper.findViewByModel(cell); cellView.highlight([el[, options]]) el:如果沒有寫的話，則預設使用cell view的el option: 上述： name:即高亮的名稱 options:該屬性會傳遞給name制定的高亮樣式中 type:高亮的類型（embedding, connecting, magnetAvailability, or elementAvailability） 高亮的樣式也是可以定義的，例如： cellView.highlight(null, { highlighter: { name: 'stroke', options: { width: 3 } } }); cellView.unhighlight([el[, options]]) ： 取消高亮顯示 注意： 如果使用自定義選項突出顯示單元格，則在使用unhighlight方法時必須提供完全相同的選項。 |
| dia.Element 圖形元素 圖形元素的模型：繼承自 joint.dia.Cell ，并且自帶一些特定的屬性和方法 這些特定是性質可以分為三類：
2. Presentation 表現屬性 另一個重要屬性是attrs，它是一個對象，其鍵表示比對子元素的選擇器和将設定在子元素上的SVG屬性值。這些屬性決定最終圖形元素的展示樣式。 不建議直接更改attrs對象，而是使用attr方法。 3. Nesting 嵌套 元素的最後兩個屬性是嵌入和父元素。這兩個屬性與包含或包含在構成層次結構的其他元素中的元素相關。 dia.Element.events 元素事件 例如： // Listening for changes of the position to a single element element1.on('change:position', function(element1, position) { alert('element1 moved to ' + position.x + ',' + position.y); }); // All elements events are also propagated to the graph. graph.on('change:position', function(element, position) { console.log('Element ' + element.id + 'moved to ' + position.x + ',' + position.y); }); // Using the option parameter and a custom attribute graph.on('change:custom', function(element, custom, opt) { if (opt.consoleOutput) { console.log('Custom attribute value changed to "' + custom + '"'); } }); element2.prop('custom', 'myValue', { consoleOutput: true }); dia.Element.ports 端口 定義一個端口，并且給一個圖形元素添加端口 // 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); 定義一組端口 // Define ports and port groups in element constructor. var groupA; var rect = new joint.shapes.basic.Rect({ // ... ports: { groups: { 'group1': groupA, // 'group2': ..., // 'group3': ..., }, items: [] } }); groupA = { position: { name: 'string', // layout name args: {}, // arguments for port layout function, properties depends on type of layout }, label: { // .... }, attrs: {}, markup: '<rect width="10" height="10" stroke="red"/>' }; Custom markup 自定義端口，端口和端口标簽都可以自定義 var rect = new joint.shapes.basic.Rect({ // ... }); rect.addPort({ markup: '<rect width="10" height="10" fill="blue"/>' }) rect.addPort({ markup: '<rect width="15" height="15" fill="red"/>', label: { markup: '<text fill="#000000"/>' }}) 可以将其設定為元素模型上的預設端口标記/端口标簽标記 var rect = new joint.shapes.basic.Rect({ portMarkup: '<rect width="20" height="20" fill="black"/>', portLabelMarkup: '<text fill="yellow"/>', // ... }); element.addPort(port, [opt]) 添加一個端口 element.addPorts(ports, [opt]) 添加一組端口 element.addTo(graph) 向圖中添加元素，相當于調用graph.addCell(元素) element.angle() 傳回元素的旋轉度(0°- 360°) element.attr(attrs) 在元素上設定SVG屬性(和JointJS特殊屬性) 例如： element.attr({ rect: { fill: 'blue' }, text: { fill: 'white', 'font-size': 15 }, '.myrect2': { fill: 'red' } }); 使用字元串路徑 element.attr('text/font-size', 12); element.clone(options) 傳回具有相同屬性的元素的新執行個體 element.embed(cell) 将後者嵌套進前者（即前者是後者的父元素，當一個父元素被移動(翻譯)時，嵌入到該父元素中的所有單元也會移動） element.findView(paper) 在畫布上找到圖形元素的元素視圖 element.fitEmbeds([opt]) 調整元素的大小，使其适合其内部的所有嵌入元素 element.getAncestors() 傳回這個元素的所有祖先的數組，從最直接的父元素一直到最遙遠的祖先。 element.getBBox() 以g.rect對象的形式傳回元素的邊框邊界 例如： element.getEmbeddedCells([opt]) 傳回元素的所有嵌入單元格的數組。 element.getPort(id) 傳回id指定的端口 element.getPortIndex(portId) 傳回端口項數組中的端口索引 element.getPorts() 傳回元素上所有端口的數組。如果沒有端口，則傳回空數組 element.getPortsPositions(groupName) 傳回組中所有端口的位置和角度，相對于元素位置。 element.getTransitions() 傳回所有活動轉換的數組 element.hasPort(id) 檢查元素是否包含id端口 element.hasPorts() 檢查元素是否定義了任何端口。傳回布爾值 element.isEmbeddedIn(element [, opt]) 如果元素嵌入到另一個元素元素中，則傳回true。如果選擇屬性deep=false，隻會檢查直接的親子關系。（Deep屬性預設為true） element.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' } element.position(x, y, [opt]) 設定元素位置為x和y坐标 element.prop(properties) 在元素模型上設定屬性(可能是嵌套的) element.remove(options) 從圖中删除元素 element.removeAttr(path, [options]) 從元素中删除先前的set屬性。 element.removePort(port, [opt]) 從元素中删除端口，其中端口是端口對象或portId element.resize(width, height [, opt]) 調整元素的大小 element.rotate(deg, [absolute, origin, opt]) 每執行一次以10度旋轉一個元件，使其圍繞中心旋轉 element.scale(sx, sy, origin[, opt]) 根據給定的原點縮放元素的位置和大小。 element.stopTransitions([path]) 停止所有運作轉換 element.toBack([opt]) 移動元素，使其位于所有其他單元格(元素/連結)的後面 element.toFront([opt]) 與上相反 element.toJSON() 傳回用于JSON序列化的元素屬性的副本 element.transition(path, value [, opt]) 允許在一段時間内逐漸改變元素的屬性 例如： 1．element.transition('position/x', 250, { delay: 100, duration: 500, timingFunction: function(t) { return t*t; }, valueFunction: function(a, b) { return function(t) { return a + (b - a) * t }} }); // will start changing the element's x-coordinate in 100ms, for period of 500ms. 2. element.transition('attrs/text/font-size', '1em', { valueFunction: joint.util.interpolate.unit, timingFunction: joint.util.timing.bounce }); // will start changing the current font size value to 1em in the bounce fashion. element.translate(tx, [ty], [opt]) element.unembed(cell) 從其父元素釋放嵌入單元格。 |
| dia.ElementView 圖形元素視圖 joint.dia.Element model 的視圖，它繼承了joint.dia.CellView ，其作用：
|
| Shapes Devs devs插件 Devs插件為您提供了具有預定義的輸入和輸出端口組和簡化API的現成形狀。 joint.shapes.devs.Model 模型形狀在JointJS内置端口上實作了簡單的API。它将端口分為兩個語義組(in和out)，并為添加和删除端口添加了友善的方法。 element.addInPort(port, [opt]) 向' inPorts '數組中添加一個端口，其中' port '是端口的名稱 element.addOutPort(port, [opt]) 向“outPorts”數組中添加一個端口，其中“port”是該端口的名稱。 element.changeInGroup(properties, [opt]) 更改輸入端口的設定，其中“properties”是具有組配置的對象。 預設情況下，它使用新配置擴充了以前的設定。通過選擇使以前的設定無效來傳遞{rewrite: true}。 element.changeOutGroup(properties, [opt]) 類似上一個方法，隻不過是對輸出端口進行操作 element.removeInPort(port, [opt]) 從“inPorts”數組的元素中删除一個端口，其中“port”是該端口的名稱 element.removeOutPort(port, [opt]) 從“outPorts”數組的元素中删除一個端口，其中“port”是該端口的名稱。 joint.shapes.devs.Link devs.Link繼承了joint.dia.Link，更改連結外觀。 示例如下： var shape = new joint.shapes.devs.Model({ position: { x: 100, y: 100 }, inPorts: ['in1', 'in2'], outPorts: ['out1', 'out2'] }); shape.addTo(graph); // adding/removing ports dynamically shape.addInPort('in3'); shape.removeOutPort('out1').addOutPort('out3'); var link = new joint.shapes.devs.Link({ source: { id: shape.id, port: 'out3' }, target: { x: 200, y: 300 } }); link.addTo(graph); // moving the input ports from `left` to `top` shape.changeInGroup({ position: 'top' }); // moving the output ports 'right' to 'bottom' shape.changeOutGroup({ position: 'bottom' }); Hierarchical diagrams 層次圖 作為插件開發工具的一部分，還有另外兩種圖形是為分層圖設計的。devs.Atomic和devs.Coupled。 它們繼承自devs.Model隻有顔色和尺寸不同，這些圖形的目的是使您能夠根據其類型在應用程式中實作自定義邏輯。 層次圖常用方法： 這将根據源元素和目标元素為“連結”找到最好的父元素 shapes.standard 标準插件 标準插件為您提供了最常見形狀的現成、高性能版本。這些形狀可以按原樣使用，也可以作為建立定制形狀。 常見标準圖集預覽： var standard = joint.shapes.standard; var rectangle = new standard.Rectangle(); var circle = new standard.Circle(); var ellipse = new standard.Ellipse(); var path = new standard.Path(); var polygon = new standard.Polygon(); var polyline = new standard.Polyline(); var cylinder = new standard.Cylinder(); var image = new standard.Image(); var borderedImage = new standard.BorderedImage(); var embeddedImage = new standard.EmbeddedImage(); var headeredRectangle = new standard.HeaderedRectangle(); var textBlock = new standard.TextBlock(); var link = new standard.Link(); var doubleLink = new standard.DoubleLink(); var shadowLink = new standard.ShadowLink(); shapes.standard.BorderedImage 帶有邊框和标簽的圖像。 示例如下： var borderedImage = new joint.shapes.standard.BorderedImage(); borderedImage.resize(150, 100); borderedImage.position(225, 410); borderedImage.attr('root/title', 'joint.shapes.standard.BoarderedImage'); borderedImage.attr('label/text', 'Bordered\nImage'); borderedImage.attr('border/rx', 5); borderedImage.attr('image/xlinkHref', 'image.png'); borderedImage.addTo(graph); shapes.standard.Circle 帶有标簽的圓圈。 示例如下： var circle = new joint.shapes.standard.Circle(); circle.resize(100, 100); circle.position(250, 10); circle.attr('root/title', 'joint.shapes.standard.Circle'); circle.attr('label/text', 'Circle'); circle.attr('body/fill', 'lightblue'); circle.addTo(graph); shapes.standard.Cylinder 帶有标簽的圓柱體。 用處較少（略） shapes.standard.DoubleLink 雙線連結。 示例如下： var doubleLink = new joint.shapes.standard.DoubleLink(); doubleLink.prop('source', { x: 500, y: 600 }); doubleLink.prop('target', { x: 450, y: 750 }); doubleLink.prop('vertices', [{ x: 500, y: 700 }]); doubleLink.attr('root/title', 'joint.shapes.standard.DoubleLink'); doubleLink.attr('line/stroke', '#30d0c6'); doubleLink.addTo(graph); shapes.standard.Ellipse 帶标簽的橢圓。 示例如下： var ellipse = new joint.shapes.standard.Ellipse(); ellipse.resize(150, 100); ellipse.position(425, 10); ellipse.attr('root/title', 'joint.shapes.standard.Ellipse'); ellipse.attr('label/text', 'Ellipse'); ellipse.attr('body/fill', 'lightblue'); ellipse.addTo(graph); shapes.standard.EmbeddedImage 嵌入帶有标簽的矩形的圖像。 示例如下： var embeddedImage = new joint.shapes.standard.EmbeddedImage(); embeddedImage.resize(150, 100); embeddedImage.position(425, 410); embeddedImage.attr('root/title', 'joint.shapes.standard.EmbeddedImage'); embeddedImage.attr('label/text', 'Embedded\nImage'); embeddedImage.attr('image/xlinkHref', 'image.png'); embeddedImage.addTo(graph); shapes.standard.HeaderedRectangle 帶标題的矩形。 示例如下： var headeredRectangle = new joint.shapes.standard.HeaderedRectangle(); headeredRectangle.resize(150, 100); headeredRectangle.position(25, 610); headeredRectangle.attr('root/title', 'joint.shapes.standard.HeaderedRectangle'); headeredRectangle.attr('header/fill', 'lightgray'); headeredRectangle.attr('headerText/text', 'Header'); headeredRectangle.attr('bodyText/text', 'Headered\nRectangle'); headeredRectangle.addTo(graph); shapes.standard.Image 帶有标簽的圖像。 示例如下： var image = new joint.shapes.standard.Image(); image.resize(150, 100); image.position(25, 410); image.attr('root/title', 'joint.shapes.standard.Image'); image.attr('label/text', 'Image'); image.attr('image/xlinkHref', 'image.png'); image.addTo(graph); shapes.standard.Link 單線連結。 示例如下： var link = new joint.shapes.standard.Link(); link.prop('source', { x: 450, y: 600 }); link.prop('target', { x: 400, y: 750 }); link.prop('vertices', [{ x: 450, y: 700 }]); link.attr('root/title', 'joint.shapes.standard.Link'); link.attr('line/stroke', '#fe854f'); link.addTo(graph); shapes.standard.Path 帶标簽的路徑。 示例如下： var path = new joint.shapes.standard.Path(); path.resize(100, 100); path.position(50, 210); path.attr('root/title', 'joint.shapes.standard.Path'); path.attr('label/text', 'Path'); path.attr('body/refD', 'M 0 5 10 0 C 20 0 20 20 10 20 L 0 15 Z'); path.addTo(graph); shapes.standard.Polygon 帶标簽的多邊形。 示例如下： var polygon = new joint.shapes.standard.Polygon(); polygon.resize(100, 100); polygon.position(250, 210); polygon.attr('root/title', 'joint.shapes.standard.Polygon'); polygon.attr('label/text', 'Polygon'); polygon.attr('body/refPoints', '0,10 10,0 20,10 10,20'); polygon.addTo(graph); shapes.standard.Polyline 帶有标簽的折線 示例如下： var polyline = new joint.shapes.standard.Polyline(); polyline.resize(100, 100); polyline.position(450, 210); polyline.attr('root/title', 'joint.shapes.standard.Polyline'); polyline.attr('label/text', 'Polyline'); polyline.attr('body/refPoints', '0,0 0,10 10,10 10,0'); polyline.addTo(graph); shapes.standard.Rectangle 帶标簽的矩形。 示例如下： var rectangle = new joint.shapes.standard.Rectangle(); rectangle.resize(100, 100); rectangle.position(50, 10); rectangle.attr('root/title', 'joint.shapes.standard.Rectangle'); rectangle.attr('label/text', 'Rectangle'); rectangle.attr('body/fill', 'lightblue'); rectangle.addTo(graph); shapes.standard.ShadowLink 帶陰影的粗線 示例如下： var shadowLink = new joint.shapes.standard.ShadowLink(); shadowLink.prop('source', { x: 550, y: 600 }); shadowLink.prop('target', { x: 500, y: 750 }); shadowLink.prop('vertices', [{ x: 550, y: 700 }]); shadowLink.attr('root/title', 'joint.shapes.standard.ShadowLink'); shadowLink.attr('line/stroke', '#5654a0'); shadowLink.addTo(graph); shapes.standard.TextBlock 帶有HTML标簽的矩形 示例如下： var textBlock = new joint.shapes.tandard.TextBlock(); textBlock.resize(100, 100); textBlock.position(250, 610); textBlock.attr('root/title', 'joint.shapes.standard.TextBlock'); textBlock.attr('body/fill', 'lightgray'); textBlock.attr('label/text', 'Hyper Text Markup Language'); // Styling of the label via `style` presentation attribute (i.e. CSS). textBlock.attr('label/style/color', 'red'); textBlock.addTo(graph); |
| JointJs提供的一些工具方法 util.breakText util.breakText(text, size [, attrs, opt]) 将文本分成幾行，使文本适合于按大小定義的邊框。寬度和高度(可選) 示例如下： joint.util.breakText('this is quite a long text', { width: 50 }) 該方法接受以下參數： ：用于附加用于度量的内部建立的SVG文本元素的SVG文檔 util.cancelFrame util.cancelFrame(requestId) 通過調用joint.util.nextFrame取消requestId預先計劃的動畫幀請求 util.dataUriToBlob util.dataUriToBlob(dataUri) 将資料URI字元串轉換為Blob對象。 util.downloadBlob util.downloadBlob(blob, fileName) 提供的Blob對象作為一個檔案下載下傳,并給定檔案名 util.downloadDataUri util.downloadDataUri(dataUri, fileName) 下載下傳提供的資料URI字元串作為具有給定檔案名的檔案。 util.flattenObject util.flattenObject(object, delim, stop) 将嵌套對象銷毀，直到stop函數傳回true為止 stop function函數接受目前周遊的節點的值 delim是結果對象中組合鍵的分隔符。 示例如下： joint.util.flattenObject({ a: { a1: 1, a2: 2, a3: { a31: 5, a32: { a321: { a3211: 5 } } } }, b: 6 }, '/', function(v) { return !!v.a321; }); util.getByPath util.getByPath(object, path, delim) 在嵌套對象的路徑中傳回值，delim是路徑中使用的分隔符， 示例如下： joint.util.getByPath({ a: { aa: { aaa: 3 } } }, 'a/aa/aaa', '/'); // 3 util.getElementBBox util.guid() 傳回頁面的唯一辨別符 util.imageToDataUri util.imageToDataUri(url, callback) 将url處的圖像轉換為資料URI方案 （如果您需要将圖像直接嵌入到圖表中，而不是讓它們在外部引用，那麼這是非常有用的。） 回調函數格式： function( {}. util.isPercentage util.isPercentage(val) 當val是一個百分比的字元串（比如：“10%”）時，傳回true。 util.nextFrame util.nextFrame(callback [, context]) 告訴浏覽器在下一次重新繪制之前排程回調函數 util.normalizeSides util.normalizeSides(box) 傳回表單的新對象格式如：{top: Number, right: Number, bottom: Number, left: Number} 如果box是一個數字，那麼四個邊的值就是這個數字 示例如下： joint.util.normalizeSides() // { top: 0, right: 0, bottom: 0, left: 0 } joint.util.normalizeSides(5) // { top: 5, right: 5, bottom: 5, left: 5 } joint.util.normalizeSides({ horizontal: 5 }) // { top: 0, right: 5, bottom: 0, left: 5 } joint.util.normalizeSides({ left: 5 }) // { top: 0, right: 0, bottom: 0, left: 5 } joint.util.normalizeSides({ horizontal: 10, left: 5 }) // { top: 0, right: 10, bottom: 0, left: 5 } joint.util.normalizeSides({ horizontal: 0, left: 5 }) // { top: 0, left: 5, right: 0, bottom: 0 } util.sanitizeHTML util.sanitizeHTML(html) 清理提供的HTML(字元串)，以防止XSS攻擊 示例如下： joint.util.sanitizeHTML('<html><body><p>Hello</p></body></html>') === '<p>Hello</p>' joint.util.sanitizeHTML('<p>Hello</p><script>alert("Hacked");</script>') === '<p>Hello</p>' joint.util.sanitizeHTML('<p>Hello</p><img οnlοad="alert("Hacked");">') === '<p>Hello</p><img>' joint.util.sanitizeHTML('<p>Hello</p><img src="javascript:alert("Hacked");">') === '<p>Hello</p><img>' util.setAttributesBySelector util.setAttributesBySelector(el, attrs) 根據attrs對象中的選擇器，在DOM元素(SVG或HTML) el及其派生元素上設定屬性 示例如下： var myEl = document.querySelector('.mydiv'); joint.util.setAttributesBySelector(myEl, { '.myDiv': { 'data-foo': 'bar' }, // Note the reference to the myEl element itself. 'input': { 'value': 'my value' } }); util.setByPath util.setByPath(object, path, value, delim) 在嵌套對象中的路徑上設定值。delim是路徑中使用的分隔符。 示例如下： joint.util.setByPath({ a: 1 }, 'b/bb/bbb', 2, '/'); util.shapePerimeterConnectionPoint util.shapePerimeterConnectionPoint(linkView, view, magnet, ref) 該函數可直接應用于畫布中的linkConnectionPoint參數。 連結将嘗試在連接配接形狀的周長上找到最佳的連接配接點，而不僅僅是在邊界框上。 示例如下： var paper = new joint.dia.Paper({ // ... linkConnectionPoint: joint.util.shapePerimeterConnectionPoint // ... }) util.sortElements util.sortElements(elements, comparator) 根據比較器(elementA, elementB)函數改變元素的順序 比較器： function compare(a, b) { if (a is less than b by some ordering criterion) { return -1; } if (a is greater than b by the ordering criterion) { return 1; } // a must be equal to b return 0; } util.toggleFullScreen util.toggleFullScreen([element]) 使得(或取消)一個元素顯示全屏（預設元素是window.top.document.body） 例如：joint.util.toggleFullScreen(paper.el); util.unsetByPath util.uuid() 傳回一個pseudo-UUID（通用唯一辨別符（Universally Unique Identifier））。 util.format.number util.format.number(specifier, value) 根據Python格式規範迷你語言中定義的說明符的格式化數字 示例如下： joint.util.format.number('.2f', 5) // 5.00 joint.util.format.number('03d', 5) // 005 joint.util.format.number('.1%', .205) // 20.5% joint.util.format.number('*^9', 5) // ****5**** |
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)