jointJS(一）--關于jointJS的初認識

jas0n 發布于2019-08-20 11:24 / 1820人閱讀

摘要：最近由于項目需要，開始接觸，妥妥不停刷文檔模式，先寫一下對于的粗淺認識吧。我們可以使用已提供的圖元素繪圖，也可根據需求自定義一些圖元素。另外，它極易上手且操作簡單，并且支持所有的現代瀏覽器。

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

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

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

首先先去官網下載一下這些文件，詳見HTML代碼塊head里的內容：
一切準備好就緒，我們就開始了。

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

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]);

那么，一個小小的demo就實現了，是不是挺簡單的，接下來我還會陸續分享使用jointjs中的問題以及我找到的最好的方法，jointjs的初認識就先到這里啦，加油！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80560.html

jointJS系列之一：jointJS的的初步使用

摘要：由于是基于的，因此對有一定的了解會對的理解和使用有較大幫助。由于是基于的，因此有視圖和模型的概念。掛載的元素關聯聲明的元素的概念，就是圖形顯示的主體，可以有各種不同的形狀，預設有常用的矩形橢圓平行四邊形等。一、jointJS簡介 jointJS是一個基于svg的圖形化工具庫，在畫布上畫出支持拖動的svg圖形，而且可以導出JSON，也能通過JSON配置導入直接生成圖形。可以基于joi...

amuqiao 2019-08-23 10:56 評論0 收藏0
1.JointJs Paper

摘要：在該模式下，所有的和會多一個屬性，就行中的陰影有一個屬性表示層級。為了控制哪些元素可以，需要配置。如果允許被潛入到，返回默認所有元素都可以到其他元素中當設置為的時候，用戶將不能將移動到邊界之外。關于JointJs的介紹，有一篇比較好JointJS介紹第一個類Paperjoint.dia.Paper 屬性 el css選擇器，Paper將在該Css選擇的Container下畫SV...

rose 2019-08-19 17:48 評論0 收藏0
1.JointJs Paper

摘要：在該模式下，所有的和會多一個屬性，就行中的陰影有一個屬性表示層級。為了控制哪些元素可以，需要配置。如果允許被潛入到，返回默認所有元素都可以到其他元素中當設置為的時候，用戶將不能將移動到邊界之外。關于JointJs的介紹，有一篇比較好JointJS介紹第一個類Paperjoint.dia.Paper 屬性 el css選擇器，Paper將在該Css選擇的Container下畫SV...

shleyZ 2019-08-01 15:06 評論0 收藏0
在vue中使用jointjs

摘要：在中引入的問題，之前在網上搜了很多，都沒有給出一個確切的答案，搗鼓了兩天終于弄明白了，做個記錄。通過這樣引入還不夠，可能會遇到圖可以正常加載，但無法拖拽的問題，遇到這些問題一般是和自己項目中的環境沖突了，導致無法讀取或者讀取錯誤。在vue中引入joint.js的問題，之前在網上搜了很多，都沒有給出一個確切的答案，搗鼓了兩天終于弄明白了，做個記錄。首先，我參考了一篇來自stackove...

李昌杰 2019-08-30 14:12 評論0 收藏0
在vue中使用jointjs

摘要：在中引入的問題，之前在網上搜了很多，都沒有給出一個確切的答案，搗鼓了兩天終于弄明白了，做個記錄。通過這樣引入還不夠，可能會遇到圖可以正常加載，但無法拖拽的問題，遇到這些問題一般是和自己項目中的環境沖突了，導致無法讀取或者讀取錯誤。在vue中引入joint.js的問題，之前在網上搜了很多，都沒有給出一個確切的答案，搗鼓了兩天終于弄明白了，做個記錄。首先，我參考了一篇來自stackove...

junfeng777 2019-08-22 15:37 評論0 收藏0