jointJS(一）--關(guān)于jointJS的初認(rèn)識

作者：佳佳嘉嘉嘉 2016-10-09 11:55:09

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

最近由于項(xiàng)目需要，開始接觸jointJS，妥妥不停刷文檔模式，先寫一下對于jointjs的粗淺認(rè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]);

那么，一個小小的demo就實(shí)現(xiàn)了，是不是挺簡單的，接下來我還會陸續(xù)分享使用jointjs中的問題以及我找到的***的方法，jointjs的初認(rèn)識就先到這里啦，加油!

責(zé)任編輯：龐桂玉來源： segmentfault