成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

jas0n / 1834人閱讀

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

最近由于項(xiàng)目需要，開始接觸jointJS，妥妥不停刷文檔模式，先寫一下對(duì)于jointjs的粗淺認(rèn)識(shí)吧。

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

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

首先先去官網(wǎng)下載一下這些文件，詳見HTML代碼塊head里的內(nèi)容：
一切準(zhǔn)備好就緒，我們就開始了。

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

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è)簡(jiǎn)單的矩形，想要改變一些默認(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
    }
});

最后，把前面造的對(duì)象都放到畫板中：

graph.addCells([rect, rect2, link]);

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80560.html

相關(guān)文章

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

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

    amuqiao 評(píng)論0 收藏0

  • 1.JointJs Paper

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

    rose 評(píng)論0 收藏0

  • 1.JointJs Paper

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

    shleyZ 評(píng)論0 收藏0

  • 在vue中使用jointjs

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

    李昌杰 評(píng)論0 收藏0

  • 在vue中使用jointjs

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

    junfeng777 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<