溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“jointJS怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jointJS怎么用”這篇文章吧。
最近由于項目需要，開始接觸jointJS，妥妥不停刷文檔模式，先寫一下對于jointjs的粗淺認識吧。
我們可以使用JointJS已提供的圖元素繪圖，也可根據需求自定義一些圖元素。除此之外，JointJS創建的圖表就是SVG圖形，想改變圖形樣式，就去GoogleSVG相關語法就好啦。另外，它極易上手且操作簡單，并且支持所有的現代瀏覽器。
下面先通過一個小的demo來展示jointjs的使用~
首先先去官網下載一下這些文件，詳見HTML代碼塊head里的內容： 一切準備好就緒，我們就開始了。
先看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 });接下來，就先畫個簡單的矩形，想要改變一些默認樣式的話需要了解元素的SVG DOM結構：
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怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
