clay教程二之布局的使用

Forest10 發(fā)布于2019-08-23 12:49 / 2770人閱讀

摘要：上圖是布局的計(jì)算模型。刪除方法刪除的只是布局保存的數(shù)據(jù)，然后重繪畫(huà)面，如果你需要畫(huà)面平滑改變，修改繪圖實(shí)現(xiàn)方法即可，這里不再贅述。

作者：心葉
時(shí)間：2018-11-06 14:47

clay項(xiàng)目Github地址：https://github.com/yelloxing/...

喜歡本項(xiàng)目的可以在github上給給star。

在繪制一些常見(jiàn)圖形的時(shí)候，比如關(guān)系圖，單個(gè)結(jié)點(diǎn)或連線并不難，麻煩的是位置的計(jì)算等，和圖形模塊不同，布局就是專門計(jì)算一些特殊圖形位置的模塊，用一句通俗的話說(shuō)就是：決定什么元素繪制在哪里。因此，布局應(yīng)該和具體的繪圖方法無(wú)關(guān)，她只關(guān)心位置的計(jì)算。

下面，我們將通過(guò)介紹一個(gè)最簡(jiǎn)單的樹(shù)圖的繪制過(guò)程來(lái)說(shuō)明布局的設(shè)計(jì)理念，讓我們開(kāi)始吧！

繪制圖形

$$("").appendTo("body")
    .attr("width", "400")
    .attr("height", "400");

上圖是最終運(yùn)行結(jié)果，上面我們準(zhǔn)備好了畫(huà)布，需要繪圖的原始數(shù)據(jù)如下：

var nodes = [
    // 結(jié)點(diǎn)名稱、父節(jié)點(diǎn)名稱
    ["手繪", null],
    ["水粉", "手繪"],
    ["油畫(huà)", "手繪"],
    ["素描", "手繪"],
    ["中國(guó)畫(huà)", "手繪"],
    ["空間透視", "素描"],
    ["色彩五大調(diào)", "素描"],
];

使用布局繪圖的第一步是創(chuàng)建布局對(duì)象，這里是創(chuàng)建tree布局對(duì)象：

// 創(chuàng)建布局對(duì)象
var tree = clay.treeLayout();

理論上來(lái)說(shuō)，原始數(shù)據(jù)可以是任意格式，只要保證整體是一個(gè)數(shù)組即可。這主要是考慮到實(shí)際開(kāi)發(fā)復(fù)雜的環(huán)境，因此，提供了數(shù)據(jù)格式配置接口，對(duì)于上面的數(shù)據(jù)，進(jìn)行如下配置：

tree
// 獲取根結(jié)點(diǎn)
.root(function (initTree) {
    return initTree[0];
})

// 獲取孩子結(jié)點(diǎn)
.child(function (parentTree, initTree) {
    var children = [], i;
    for (i = 0; i < nodes.length; i++) {
        if (initTree[i][2] == parentTree[0])
            children.push(initTree[i]);
    }
    return children;
})

// 獲取結(jié)點(diǎn)標(biāo)志id
.id(function (treedata) {
    return treedata[0];
})

不同布局需要配置的項(xiàng)不一樣，對(duì)于tree布局而言，關(guān)于數(shù)據(jù)結(jié)構(gòu)的部分，只需要告訴她如何根據(jù)父結(jié)點(diǎn)獲取子結(jié)點(diǎn)，一個(gè)結(jié)點(diǎn)的唯一標(biāo)識(shí)怎么確定，根節(jié)點(diǎn)是誰(shuí)。

開(kāi)頭就說(shuō)明的很清楚了，布局應(yīng)該是和具體繪圖方式無(wú)關(guān)的存在，因此，這里我們選擇了svg繪圖，就需要再配置一下具體的繪圖方法。

tree.drawer(function (nodes, rootid, size) {
    var i, node;
    for (i in nodes) {
        node = nodes[i];

        // 繪制結(jié)點(diǎn)
        $$("")
            .appendTo(".node")
            .attr("cx", node.left * 100)
            .attr("cy", node.top * 100);

        // 繪制文字
        $$("" + node.data[0] + "")
            .appendTo(".text")
            .attr("x", node.left * 100)
            .attr("y", (node.top * 100 - 14));

        // 繪制連線
        if (node.pid)
            $$("")
                .appendTo(".line")
                .attr("d",
                    "M" + nodes[node.pid].left * 100 + " " + nodes[node.pid].top * 100 + "C" +
                    (nodes[node.pid].left * 100 + 50) + "," + nodes[node.pid].top * 100 + " " +
                    (node.left * 100 - 50) + "," + node.top * 100 + " " +
                    node.left * 100 + "," + node.top * 100 + " ");
    }
});

到這里，所有必須的配置都寫(xiě)好了，添加下面這行代碼，啟動(dòng)繪圖：

tree(nodes);

至此，運(yùn)行代碼就可以看見(jiàn)一棵記錄著結(jié)點(diǎn)關(guān)系的樹(shù)圖了，繪圖結(jié)束！

計(jì)算模型

因?yàn)椴季植粫?huì)知道最終繪制的圖形具體是什么樣子，比如這里的樹(shù)布局，也許你想繪制的是旋轉(zhuǎn)的樹(shù)或倒樹(shù)，也可能你就是想要和這里一樣的簡(jiǎn)單樹(shù)。為了防止問(wèn)題復(fù)雜化，布局在計(jì)算位置的時(shí)候，都會(huì)統(tǒng)一選擇一種最樸素的場(chǎng)景作為計(jì)算模型，從該模型出發(fā)，任何別的模型借助clay提供的一些計(jì)算方法實(shí)現(xiàn)起來(lái)就很容易了。

上圖是tree布局的計(jì)算模型。右邊的每個(gè)紅色矩形都是一個(gè)1x1的正方形，坐標(biāo)原心位于左上角綠色頂點(diǎn)。

配置具體繪圖方式的時(shí)候，其中第一個(gè)參數(shù)nodes就記錄了每個(gè)結(jié)點(diǎn)經(jīng)過(guò)布局計(jì)算后的位置信息，讓我們打印一下其中的一條數(shù)據(jù)看看：

"油畫(huà)":{
    children: [];
    data: (2) ["油畫(huà)", "手繪"];
    id: "油畫(huà)";
    left: 1.5;
    pid: "手繪";
    show: true;
    top: 1.5
}

其中data記錄著結(jié)點(diǎn)的原始數(shù)據(jù)，我們主要看看left和top，這顯示該結(jié)點(diǎn)應(yīng)該繪制的坐標(biāo)為（1.5,1.5），對(duì)照上圖，是不是就很清晰了。別的布局的設(shè)計(jì)思想也是如此，請(qǐng)耐心體會(huì)一下！

添加交互

// 添加交互用例
$$("circle").bind("click", function () {
    // 刪除結(jié)點(diǎn)
    tree.delete($$(this).attr("target"));
});

其實(shí)交互和布局應(yīng)該是沒(méi)有關(guān)系的，始終強(qiáng)調(diào)，布局只負(fù)責(zé)計(jì)算繪圖的位置，比如上面的結(jié)點(diǎn)刪除例子，綁定點(diǎn)擊事件，調(diào)用結(jié)點(diǎn)的刪除結(jié)點(diǎn)方法即可。刪除方法刪除的只是布局保存的數(shù)據(jù)，然后重繪畫(huà)面，如果你需要畫(huà)面平滑改變，修改繪圖實(shí)現(xiàn)方法即可，這里不再贅述。

例子完整代碼：https://yelloxing.github.io/c...

GPU云服務(wù)器云服務(wù)器 linux的使用教程 java的使用教程服務(wù)器的使用教程 css布局教程

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

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

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

登陸后可評(píng)論

0條評(píng)論

Forest10

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

flex布局示例代碼二

閱讀 1653·2019-08-30 15:44
JavaScript 實(shí)現(xiàn) iOS 下的計(jì)算器

閱讀 2576·2019-08-30 11:19
「譯」Flexbox 基本原理

閱讀 407·2019-08-30 11:06
Codepen 每周精選：值得收藏的24個(gè)頁(yè)面特效（2018-5-21）

閱讀 1570·2019-08-29 15:27
簡(jiǎn)單說(shuō) 通過(guò)JS的隱式轉(zhuǎn)換，關(guān)鍵時(shí)刻救你一命

閱讀 3088·2019-08-29 13:44
網(wǎng)站代碼優(yōu)化

閱讀 1631·2019-08-28 18:28
CSS 尺寸

閱讀 2361·2019-08-28 18:17
【Vue原理】Compile - 源碼版之 Parse 主要流程

閱讀 1991·2019-08-26 10:41

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

clay教程二之布局的使用

相關(guān)文章

零基礎(chǔ)如何學(xué)爬蟲(chóng)技術(shù)

**使用clay.js繪制一棵圓形樹(shù)**

**數(shù)據(jù)可視化之clay:設(shè)計(jì)思想和建立初衷**

PHP新特性之閉包、匿名函數(shù)

python綜合學(xué)習(xí)二之多進(jìn)程

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

0條評(píng)論

Forest10

男|高級(jí)講師

TA的文章

flex布局示例代碼二

JavaScript 實(shí)現(xiàn) iOS 下的計(jì)算器

「譯」Flexbox 基本原理

Codepen 每周精選：值得收藏的24個(gè)頁(yè)面特效（2018-5-21）

簡(jiǎn)單說(shuō) 通過(guò)JS的隱式轉(zhuǎn)換，關(guān)鍵時(shí)刻救你一命

網(wǎng)站代碼優(yōu)化

CSS 尺寸

【Vue原理】Compile - 源碼版之 Parse 主要流程

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

clay教程二之布局的使用

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！