jointJS(一）--關(guān)于jointJS的初認(rèn)識
作者：佳佳嘉嘉嘉
我們可以使用JointJS已提供的圖元素繪圖，也可根據(jù)需求自定義一些圖元素。除此之外，JointJS創(chuàng)建的圖表就是SVG圖形，想改變圖形樣式，就去GoogleSVG相關(guān)語法就好啦。另外，它極易上手且操作簡單，并且支持所有的現(xiàn)代瀏覽器。
最近由于項(xiàng)目需要，開始接觸jointJS，妥妥不停刷文檔模式，先寫一下對于jointjs的粗淺認(rèn)識吧。
我們可以使用JointJS已提供的圖元素繪圖，也可根據(jù)需求自定義一些圖元素。除此之外，JointJS創(chuàng)建的圖表就是SVG圖形，想改變圖形樣式，就去GoogleSVG相關(guān)語法就好啦。另外，它極易上手且操作簡單，并且支持所有的現(xiàn)代瀏覽器。
下面先通過一個(gè)小的demo來展示jointjs的使用~
首先先去官網(wǎng)下載一下這些文件，詳見HTML代碼塊head里的內(nèi)容： 一切準(zhǔn)備好就緒，我們就開始了。
先看HTML代碼，body就一個(gè)div#myholder用來盛放我的畫板graph，這里肯定有人會(huì)問什么是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
- });
接下來，就先畫個(gè)簡單的矩形，想要改變一些默認(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); //兩塊的距離
接下來，再來畫個(gè)連線：
- var link = new joint.dia.Link({
- source: {
- id: rect.id
- },
- target: {
- id: ellipse.id
- }
- });
***，把前面造的對象都放到畫板中：
- graph.addCells([rect, rect2, link]);
那么，一個(gè)小小的demo就實(shí)現(xiàn)了，是不是挺簡單的，接下來我還會(huì)陸續(xù)分享使用jointjs中的問題以及我找到的***的方法，jointjs的初認(rèn)識就先到這里啦，加油!
責(zé)任編輯：龐桂玉
來源：
segmentfault
