資訊專(zhuān)欄INFORMATION COLUMN
摘要：由于是基于的，因此對(duì)有一定的了解會(huì)對(duì)的理解和使用有較大幫助。由于是基于的，因此有視圖和模型的概念。掛載的元素關(guān)聯(lián)聲明的元素的概念，就是圖形顯示的主體，可以有各種不同的形狀，預(yù)設(shè)有常用的矩形橢圓平行四邊形等。
一、jointJS簡(jiǎn)介
jointJS是一個(gè)基于svg的圖形化工具庫(kù)，在畫(huà)布上畫(huà)出支持拖動(dòng)的svg圖形，而且可以導(dǎo)出JSON，也能通過(guò)JSON配置導(dǎo)入直接生成圖形。
可以基于jointJS開(kāi)發(fā)出流程圖、UML圖以及圖表等。由于jointJS是基于svg的，因此對(duì)svg有一定的了解會(huì)對(duì)jointJS的理解和使用有較大幫助。
由于jointJS是基于backbone的，因此有view（視圖）和model（模型）的概念。
使用jointJS需要引入jQuery、backbone、lodash以及jointJS的包，可以通過(guò)script標(biāo)簽引入，也可以通過(guò)npm安裝。
![arch.png][1]
jointJS的核心概念有三個(gè)，每個(gè)概念分別對(duì)應(yīng)view和model兩種概念（前后分別是model和view概念）：元素（element,elementView）、連線(link,linkView)、畫(huà)布(graph,paper)。
這三個(gè)概念之間的關(guān)系如上圖所示，分別有model和view的概念，我們可以通過(guò)改變model的配置，從而改變頁(yè)面畫(huà)布的顯示。
也能通過(guò)頁(yè)面上的操作，觸發(fā)view的事件，通過(guò)回調(diào)函數(shù)獲取model，進(jìn)行想要的操作。
jointJS中，視圖和模型是分離的，不同概念的模型和視圖之間是不能發(fā)生聯(lián)系的，比如把元素添加到畫(huà)布上，可以使用element.addTo(graph) 或者 graph.add(element) ，但是不能使用element.addTo(paper)這樣的操作，因?yàn)閑lement是model概念，而paper是視圖概念，兩者不能直接操作。
接下來(lái)介紹比較關(guān)鍵graph、paper、element、link.
1.graph畫(huà)布的model概念，創(chuàng)建一個(gè)可以?huà)燧d的畫(huà)布,作為圖形的容器。通過(guò)joint.dia.Graph實(shí)例化生成。
let graph = new joint.dia.Graph;2.paper
畫(huà)布的view概念，由graph掛載在頁(yè)面的某個(gè)dom上生成，是頁(yè)面上的圖形操作區(qū)域。通過(guò)joint.dia.Paper實(shí)例化，傳入配置生成。
let paper = new joint.dia.Paper({
// 掛載的dom元素
el: document.getElementById("container"),
// 關(guān)聯(lián)聲明的graph
model: graph,
width: 600,
height: 100,
gridSize: 1
});
3.element
元素的model概念，就是圖形顯示的主體，可以有各種不同的形狀，jointJS預(yù)設(shè)有常用的矩形、橢圓、平行四邊形等。除了joint預(yù)設(shè)的形狀以外，我們還可以自定義圖形。
元素在實(shí)例化時(shí)可以配置多種屬性，比如元素的大小、在畫(huà)布中的位置、線條粗細(xì)、顏色、填充顏色、文字內(nèi)容、字體大小等。
元素通過(guò)實(shí)例化joint.shapes.standard.xxx(xxx是指圖形的種類(lèi)，如Rectangle等），傳入配置生成，也可以在自定義的構(gòu)造方法中傳入?yún)?shù)生成（此處代碼示例是通過(guò)實(shí)例化joint預(yù)設(shè)的形狀生成元素），然后添加到graph上。
// 實(shí)例化rect
let rect = new joint.shapes.standard.Rectangle();
// 設(shè)置rect的位置和大小
rect.position(100, 30);
rect.resize(100, 40);
// 設(shè)置rect的主體顏色和標(biāo)簽樣式
rect.attr({
body: {
fill: "blue"
},
label: {
text: "Hello",
fill: "white"
}
});
// 將rect添加到畫(huà)布上
rect.addTo(graph);
//克隆生成另一個(gè)rect,并添加到畫(huà)布上
let rect2 = rect.clone();
rect2.addTo(graph);
4.link
連線的model概念，是表示圖形之間的連接關(guān)系的工具，也有joint預(yù)設(shè)和自定義兩種，目前只介紹默認(rèn)的link。
元素通過(guò)實(shí)例化joint.shapes.standard.Link或者joint.dia.Link，傳入配置生成，也可以在自定義的構(gòu)造方法中傳入?yún)?shù)生成，然后添加到graph上。
// 實(shí)例化link
let link = new joint.shapes.standard.Link();
// 設(shè)置link的起始元素
link.source(rect);
// 設(shè)置link的指向元素
link.target(rect2);
// 將link添加到畫(huà)布上
link.addTo(graph);
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96835.html
摘要：最近由于項(xiàng)目需要，開(kāi)始接觸，妥妥不停刷文檔模式，先寫(xiě)一下對(duì)于的粗淺認(rèn)識(shí)吧。我們可以使用已提供的圖元素繪圖，也可根據(jù)需求自定義一些圖元素。另外，它極易上手且操作簡(jiǎn)單，并且支持所有的現(xiàn)代瀏覽器。 最近由于項(xiàng)目需要，開(kāi)始接觸jointJS，妥妥不停刷文檔模式，先寫(xiě)一下對(duì)于jointjs的粗淺認(rèn)識(shí)吧。 我們可以使用JointJS已提供的圖元素繪圖，也可根據(jù)需求自定義一些圖元素。除此之外，Joi...
摘要：在中引入的問(wèn)題，之前在網(wǎng)上搜了很多，都沒(méi)有給出一個(gè)確切的答案，搗鼓了兩天終于弄明白了，做個(gè)記錄。通過(guò)這樣引入還不夠，可能會(huì)遇到圖可以正常加載，但無(wú)法拖拽的問(wèn)題，遇到這些問(wèn)題一般是和自己項(xiàng)目中的環(huán)境沖突了，導(dǎo)致無(wú)法讀取或者讀取錯(cuò)誤。 在vue中引入joint.js的問(wèn)題，之前在網(wǎng)上搜了很多，都沒(méi)有給出一個(gè)確切的答案，搗鼓了兩天終于弄明白了，做個(gè)記錄。首先，我參考了一篇來(lái)自stackove...
摘要：在中引入的問(wèn)題，之前在網(wǎng)上搜了很多，都沒(méi)有給出一個(gè)確切的答案，搗鼓了兩天終于弄明白了，做個(gè)記錄。通過(guò)這樣引入還不夠，可能會(huì)遇到圖可以正常加載，但無(wú)法拖拽的問(wèn)題，遇到這些問(wèn)題一般是和自己項(xiàng)目中的環(huán)境沖突了，導(dǎo)致無(wú)法讀取或者讀取錯(cuò)誤。 在vue中引入joint.js的問(wèn)題，之前在網(wǎng)上搜了很多，都沒(méi)有給出一個(gè)確切的答案，搗鼓了兩天終于弄明白了，做個(gè)記錄。首先，我參考了一篇來(lái)自stackove...
摘要：在該模式下，所有的和會(huì)多一個(gè)屬性，就行中的陰影有一個(gè)屬性表示層級(jí)。為了控制哪些元素可以，需要配置。如果允許被潛入到，返回默認(rèn)所有元素都可以到其他元素中當(dāng)設(shè)置為的時(shí)候，用戶(hù)將不能將移動(dòng)到邊界之外。 關(guān)于JointJs的介紹，有一篇比較好JointJS介紹 第一個(gè)類(lèi)Paperjoint.dia.Paper 屬性 el css選擇器，Paper將在該Css選擇的Container下畫(huà)SV...
閱讀 1854·2021-11-22 12:09
閱讀 1511·2019-08-30 13:22
閱讀 2142·2019-08-29 17:00
閱讀 2685·2019-08-29 16:28
閱讀 3003·2019-08-26 13:51
閱讀 1234·2019-08-26 13:25
閱讀 3303·2019-08-26 12:14
閱讀 3066·2019-08-26 12:14
