溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jointJS怎么用

發(fā)布時間：2021-11-16 17:46:30 來源：億速云 閱讀：172 作者：柒染 欄目：web開發(fā)

這篇文章主要為大家展示了“jointJS怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jointJS怎么用”這篇文章吧。

最近由于項(xiàng)目需要，開始接觸jointJS，妥妥不停刷文檔模式，先寫一下對于jointjs的粗淺認(rèn)識吧。

我們可以使用JointJS已提供的圖元素繪圖，也可根據(jù)需求自定義一些圖元素。除此之外，JointJS創(chuàng)建的圖表就是SVG圖形，想改變圖形樣式，就去GoogleSVG相關(guān)語法就好啦。另外，它極易上手且操作簡單，并且支持所有的現(xiàn)代瀏覽器。

下面先通過一個小的demo來展示jointjs的使用~

首先先去官網(wǎng)下載一下這些文件，詳見HTML代碼塊head里的內(nèi)容： 一切準(zhǔn)備好就緒，我們就開始了。

先看HTML代碼，body就一個div#myholder用來盛放我的畫板graph，這里肯定有人會問什么是graph，憋急，請往下看。

<!DOCTYPE html>  <html>  <head>  <meta charset="UTF-8">  <title></title>  <link rel="stylesheet" type="text/css" href="css/joint.css" />  <script src="js/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>  <script src="js/lib/lodash.min.js"></script>  <script src="js/lib/backbone-min.js"></script>  <script src="js/lib/joint.js"></script>  </head>  <body>  <div id="myholder"></div>  </body>  <script src="js/createjoint.js" type="text/javascript" charset="utf-8"></script>  </html>

JS代碼如下： 首先是定義畫板和畫布

var graph = new joint.dia.Graph;  var paper = new joint.dia.Paper({  el: $('#myholder'),//此處是你要放graph的容器  width: 1300,  height: 800,  model: graph,  gridSize: 1  });

接下來，就先畫個簡單的矩形，想要改變一些默認(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'         }     } });

跟矩形相似，我們也可以畫個橢圓，代碼如下：

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); //兩塊的距離

接下來，再來畫個連線：

var link = new joint.dia.Link({     source: {         id: rect.id     },     target: {         id: ellipse.id     } });

把前面造的對象都放到畫板中：

graph.addCells([rect, rect2, link]);

以上是“jointJS怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手