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

amuqiao 發(fā)布于2019-08-23 10:56 / 3857人閱讀

摘要：由于是基于的，因此對有一定的了解會對的理解和使用有較大幫助。由于是基于的，因此有視圖和模型的概念。掛載的元素關(guān)聯(lián)聲明的元素的概念，就是圖形顯示的主體，可以有各種不同的形狀，預(yù)設(shè)有常用的矩形橢圓平行四邊形等。

一、jointJS簡介

jointJS是一個基于svg的圖形化工具庫，在畫布上畫出支持拖動的svg圖形，而且可以導(dǎo)出JSON，也能通過JSON配置導(dǎo)入直接生成圖形。

可以基于jointJS開發(fā)出流程圖、UML圖以及圖表等。由于jointJS是基于svg的，因此對svg有一定的了解會對jointJS的理解和使用有較大幫助。

由于jointJS是基于backbone的，因此有view（視圖）和model（模型）的概念。

使用jointJS需要引入jQuery、backbone、lodash以及jointJS的包，可以通過script標簽引入，也可以通過npm安裝。





![arch.png][1]

jointJS的核心概念有三個，每個概念分別對應(yīng)view和model兩種概念（前后分別是model和view概念）：元素（element,elementView）、連線(link,linkView)、畫布(graph,paper)。

這三個概念之間的關(guān)系如上圖所示，分別有model和view的概念，我們可以通過改變model的配置，從而改變頁面畫布的顯示。

也能通過頁面上的操作，觸發(fā)view的事件，通過回調(diào)函數(shù)獲取model，進行想要的操作。

jointJS中，視圖和模型是分離的，不同概念的模型和視圖之間是不能發(fā)生聯(lián)系的，比如把元素添加到畫布上，可以使用element.addTo(graph) 或者 graph.add(element) ，但是不能使用element.addTo(paper)這樣的操作，因為element是model概念，而paper是視圖概念，兩者不能直接操作。

接下來介紹比較關(guān)鍵graph、paper、element、link.

1.graph

畫布的model概念，創(chuàng)建一個可以掛載的畫布,作為圖形的容器。通過joint.dia.Graph實例化生成。

        let graph = new joint.dia.Graph;

2.paper

畫布的view概念，由graph掛載在頁面的某個dom上生成，是頁面上的圖形操作區(qū)域。通過joint.dia.Paper實例化，傳入配置生成。

        let paper = new joint.dia.Paper({
            // 掛載的dom元素
            el: document.getElementById("container"),
            // 關(guān)聯(lián)聲明的graph
            model: graph,
            width: 600,
            height: 100,
            gridSize: 1
        });

3.element

元素的model概念，就是圖形顯示的主體，可以有各種不同的形狀，jointJS預(yù)設(shè)有常用的矩形、橢圓、平行四邊形等。除了joint預(yù)設(shè)的形狀以外，我們還可以自定義圖形。

元素在實例化時可以配置多種屬性，比如元素的大小、在畫布中的位置、線條粗細、顏色、填充顏色、文字內(nèi)容、字體大小等。

元素通過實例化joint.shapes.standard.xxx(xxx是指圖形的種類，如Rectangle等），傳入配置生成，也可以在自定義的構(gòu)造方法中傳入?yún)?shù)生成（此處代碼示例是通過實例化joint預(yù)設(shè)的形狀生成元素），然后添加到graph上。

        // 實例化rect
        let rect = new joint.shapes.standard.Rectangle();
        
        // 設(shè)置rect的位置和大小
        rect.position(100, 30);
        rect.resize(100, 40);
        
        // 設(shè)置rect的主體顏色和標簽樣式
        rect.attr({
            body: {
                fill: "blue"
            },
            label: {
                text: "Hello",
                fill: "white"
            }
        });
        
        // 將rect添加到畫布上
        rect.addTo(graph);
        
        //克隆生成另一個rect,并添加到畫布上
        let rect2 = rect.clone();
        rect2.addTo(graph);

4.link

連線的model概念，是表示圖形之間的連接關(guān)系的工具，也有joint預(yù)設(shè)和自定義兩種，目前只介紹默認的link。

元素通過實例化joint.shapes.standard.Link或者joint.dia.Link，傳入配置生成，也可以在自定義的構(gòu)造方法中傳入?yún)?shù)生成，然后添加到graph上。

        // 實例化link
        let link = new joint.shapes.standard.Link();
        // 設(shè)置link的起始元素
        link.source(rect);
        // 設(shè)置link的指向元素
        link.target(rect2);
        // 將link添加到畫布上
        link.addTo(graph);