資訊專欄INFORMATION COLUMN
摘要：最近由于項(xiàng)目需要，開始接觸，妥妥不停刷文檔模式，先寫一下對(duì)于的粗淺認(rèn)識(shí)吧。我們可以使用已提供的圖元素繪圖，也可根據(jù)需求自定義一些圖元素。另外，它極易上手且操作簡(jiǎn)單，并且支持所有的現(xiàn)代瀏覽器。
最近由于項(xiàng)目需要，開始接觸jointJS，妥妥不停刷文檔模式，先寫一下對(duì)于jointjs的粗淺認(rèn)識(shí)吧。
我們可以使用JointJS已提供的圖元素繪圖，也可根據(jù)需求自定義一些圖元素。除此之外，JointJS創(chuàng)建的圖表就是SVG圖形，想改變圖形樣式，就去GoogleSVG相關(guān)語(yǔ)法就好啦。另外，它極易上手且操作簡(jiǎn)單，并且支持所有的現(xiàn)代瀏覽器。
下面先通過(guò)一個(gè)小的demo來(lái)展示jointjs的使用~
首先先去官網(wǎng)下載一下這些文件，詳見HTML代碼塊head里的內(nèi)容：
一切準(zhǔn)備好就緒，我們就開始了。
先看HTML代碼，body就一個(gè)div#myholder用來(lái)盛放我的畫板graph，這里肯定有人會(huì)問(wèn)什么是graph，憋急，請(qǐng)往下看。
JS代碼如下：
首先是定義畫板和畫布
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $("#myholder"),//此處是你要放graph的容器
width: 1300,
height: 800,
model: graph,
gridSize: 1
});
接下來(lái)，就先畫個(gè)簡(jiǎn)單的矩形，想要改變一些默認(rèn)樣式的話需要了解元素的SVG DOM結(jié)構(gòu)：
var rect = new joint.shapes.basic.Rect({
position: {
x: 100,
y: 30
},
size: {
width: 200,
height: 30
},
attrs: {
//attr SVG attr prop- custom data
rect: {
fill: "rgb(238,244,247)",
"stroke": "rgb(47,152,223)",
"stroke-width": "1px"
//svg上色 fill stroke
},
text: {
text: "my box",
fill: "black"
}
}
});
跟矩形相似，我們也可以畫個(gè)橢圓，代碼如下：
var ellipse = new joint.shapes.basic.Rect({
position: {
x: 100,
y: 30
},
size: {
width: 200,
height: 30
},
attrs: {
//attr SVG attr prop- custom data
rect: {
fill: "rgb(238,244,247)",
"stroke": "rgb(47,152,223)",
"stroke-width": "1px",
"rx": "10px",
"ry": "30px"
//svg上色 fill stroke
},
text: {
text: "ellipse",
fill: "pink"
}
}
});
要讓他們有一定的距離
ellipse.translate(300); //兩塊的距離
接下來(lái)，再來(lái)畫個(gè)連線：
var link = new joint.dia.Link({
source: {
id: rect.id
},
target: {
id: ellipse.id
}
});
最后，把前面造的對(duì)象都放到畫板中：
graph.addCells([rect, rect2, link]);
那么，一個(gè)小小的demo就實(shí)現(xiàn)了，是不是挺簡(jiǎn)單的，接下來(lái)我還會(huì)陸續(xù)分享使用jointjs中的問(wèn)題以及我找到的最好的方法，jointjs的初認(rèn)識(shí)就先到這里啦，加油！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/80560.html
摘要：由于是基于的，因此對(duì)有一定的了解會(huì)對(duì)的理解和使用有較大幫助。由于是基于的，因此有視圖和模型的概念。掛載的元素關(guān)聯(lián)聲明的元素的概念，就是圖形顯示的主體，可以有各種不同的形狀，預(yù)設(shè)有常用的矩形橢圓平行四邊形等。 一、jointJS簡(jiǎn)介 jointJS是一個(gè)基于svg的圖形化工具庫(kù)，在畫布上畫出支持拖動(dòng)的svg圖形，而且可以導(dǎo)出JSON，也能通過(guò)JSON配置導(dǎo)入直接生成圖形。 可以基于joi...
摘要：在該模式下，所有的和會(huì)多一個(gè)屬性，就行中的陰影有一個(gè)屬性表示層級(jí)。為了控制哪些元素可以，需要配置。如果允許被潛入到，返回默認(rèn)所有元素都可以到其他元素中當(dāng)設(shè)置為的時(shí)候，用戶將不能將移動(dòng)到邊界之外。 關(guān)于JointJs的介紹，有一篇比較好JointJS介紹 第一個(gè)類Paperjoint.dia.Paper 屬性 el css選擇器，Paper將在該Css選擇的Container下畫SV...
摘要：在該模式下，所有的和會(huì)多一個(gè)屬性，就行中的陰影有一個(gè)屬性表示層級(jí)。為了控制哪些元素可以，需要配置。如果允許被潛入到，返回默認(rèn)所有元素都可以到其他元素中當(dāng)設(shè)置為的時(shí)候，用戶將不能將移動(dòng)到邊界之外。 關(guān)于JointJs的介紹，有一篇比較好JointJS介紹 第一個(gè)類Paperjoint.dia.Paper 屬性 el css選擇器，Paper將在該Css選擇的Container下畫SV...
摘要：在中引入的問(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...
閱讀 2899·2021-11-17 09:33
閱讀 2294·2021-09-03 10:40
閱讀 606·2019-08-29 18:45
閱讀 3022·2019-08-29 16:21
閱讀 670·2019-08-29 11:11
閱讀 3457·2019-08-26 12:00
閱讀 3024·2019-08-23 18:19
閱讀 1156·2019-08-23 12:18
