joint.js箭頭樣式的簡單介紹

本文目錄一覽：

• 1、怎麼使用jointjs 在php項目中繪製拓撲圖
• 2、如何在JS滾動圖片中加上左右箭頭
• 3、怎麼用JS代碼實現，帶箭頭左右滑動的效果
• 4、淘寶的這個效果用js怎麼做的，(仔細看小箭頭，不是背景圖片，他好像是一個標籤,通過js處理標籤處理的)?

怎麼使用jointjs 在php項目中繪製拓撲圖

最近有一個需求是根據數據自動在前端頁面畫出一個流程導向圖,簡單說就是把數據以A節點指向B節點,B節點指向C節點這種形式給你,然後讓頁面自己在一定區域內渲染出一個流程圖.當然節點上可能還有其他信息,這個暫時不考慮,就是這樣一個需求,最後是藉助一個工具完成的.先說一下處理過程:

  可以說這個問題一開始我走了彎路,想的不是那麼清楚,一開始想的是自己畫.低端的就是用html+css各種布局,畫出方塊和線條,至於箭頭什麼的再想辦法.後來一想這樣太低端了,應該專業一點,就打算用canvas或者svg.因為之前用過echarts前端的圖標庫,知道它底層有個依賴庫zrender就是專門弄canvas的,所以好一陣看,感覺還靠譜,能畫出來.

  這樣雖然能畫出來,不過接下來我們就要考慮更多的問題,首先什麼時候折行,然後遇到分支的種種情況怎麼處理.最後我查資料竟然開始涉及一些圖論的東西了,深刻感覺到東西好像變複雜了,我的目的不是研究理論,而是為了一個實現.

  這時候轉變一下思路,有沒有什麼工具能專門做這樣的工作,類似於jQuery大家都用它操作DOM,RequireJS都用它來實現模塊化載入.那應該也有類似的東西,集成了數學上的圖論,自動布局等.這就不得不說Github火的一塌糊塗是有原因的,我搜了很多中文網站以及百度都沒什麼結果(不知道是不是關鍵字有問題),總之沒搜到能用的東西.但是在Github上找到了一個開源項目:dagre-d3.

  看名字就能猜到它是基於D3庫的,D3是一個專門用於前端圖形繪製的庫,dagre-d3就是實現自動布局並且繪製流程圖的這麼一個東西.

Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side. The dagre-d3 library acts a front-end to dagre, providing actual rendering using D3.

  上一個簡單的Demo:

// Create a new directed graph

var g = new dagreD3.Digraph();

// Add nodes to the graph. The first argument is the node id. The second is

// metadata about the node. In this case we’re going to add labels to each of

// our nodes.

g.addNode(“kspacey”,    { label: “Kevin Spacey” });

g.addNode(“swilliams”,  { label: “Saul Williams” });

g.addNode(“bpitt”,      { label: “Brad Pitt” });

g.addNode(“hford”,      { label: “Harrison Ford” });

g.addNode(“lwilson”,    { label: “Luke Wilson” });

g.addNode(“kbacon”,     { label: “Kevin Bacon” });

// Add edges to the graph. The first argument is the edge id. Here we use null

// to indicate that an arbitrary edge id can be assigned automatically. The

// second argument is the source of the edge. The third argument is the target

// of the edge. The last argument is the edge metadata.

g.addEdge(null, “kspacey”,   “swilliams”, { label: “K-PAX” });

g.addEdge(null, “swilliams”, “kbacon”,    { label: “These Vagabond Shoes” });

g.addEdge(null, “bpitt”,     “kbacon”,    { label: “Sleepers” });

g.addEdge(null, “hford”,     “lwilson”,   { label: “Anchorman 2” });

g.addEdge(null, “lwilson”,   “kbacon”,    { label: “Telling Lies in America” });

  它渲染出來是這樣的:

  這樣我們只要把數據處理成對應格式,就可以輕鬆的自動繪製會流程圖.比較給力的是它對數據的支持良好,有多個格式可以選擇,而且雖然介面不多,但是對於節點以及線條的操作都有,可以很輕鬆的改變節點以及線條的樣式,這個大家可以看官方的demo.

  另外如果要附加交互事件,可以通過jquery實現,也很容易,我使用bootstrap的tooltip很輕鬆的就加上去了.感覺還是個很給力的庫,而且國內這方面資料感覺不多

如何在JS滾動圖片中加上左右箭頭

前後分別設置一個偽元素

!DOCTYPE html

html

head

    meta charset=”UTF-8″

    title/title

    style

    img{

        width:400px;

        height:250px;

        border: 1px solid #ff1943;

    } 

    div {

        width: 400px;

        height:250px;

        position: relative;

    }

    div:hover:before{

        content:””;

        display:block;

        width:30px;

        height:60px;

        background:rgba(0,0,0,.3);

        position:absolute;

        top:40%;

        left:0px;

        text-align:center;

        line-height:60px;

        font-size:30px;

        color:#fff;

       }

    div:hover:after{

        content:””;

        display:block;

        width:30px;

        height:60px;

        background:rgba(0,0,0,.3);

        position:absolute;

        top:40%;

        right:-1px;

        text-align:center;

        line-height:60px;

        font-size:30px;

        color:#fff;

       }  

    /style

/head

body

    div

        img src=”1.jpg”

    /div

script

    window.onload = function() {

        var mying = new Array(“1.jpg”,”2.jpg”,”3.jpg”);

        var i = 0;

        var tupian = document.getElementsByTagName(“img”)[0]

        setInterval(changeimg,2000);

        function changeimg() {

            tupian.setAttribute(“src”,mying[i++]);

            if(i == mying.length) {

                i=0;

            }

        }

    };

/script

/body

/html

這是我按你的代碼上修改的，你可以看下。圖片用的是我自己的，所以圖片路徑不一樣，注意。

怎麼用JS代碼實現，帶箭頭左右滑動的效果

或許可以這樣。頁面中間放幾個iframe，命名裡邊加上數字，比如iframe_1，iframe_2，iframe_3。然後旁邊放兩個按鈕。默認iframe_1可見，其他隱藏。點右翻頁就iframe_2可見，其他隱藏。不知道行不行得通。

淘寶的這個效果用js怎麼做的，(仔細看小箭頭，不是背景圖片，他好像是一個標籤,通過js處理標籤處理的)?

!doctype html public “-//w3c//dtd html 4.0 transitional//en”

html

head

title new document /title

meta name=”generator” content=”editplus”

meta name=”author” content=””

meta name=”keywords” content=””

meta name=”description” content=””

/head

style

.up{

border-left:5px solid #fff;

border-right:5px solid #fff;

border-bottom:5px solid #f0f;

width:0;

height:0;

font-size:2px;

}

.down{

border-left:5px solid #fff;

border-right:5px solid #fff;

border-top:5px solid #f0f;

width:0;

height:0;

font-size:2px;

}

.left{

border-top:5px solid #fff;

border-bottom:5px solid #fff;

border-right:5px solid #f0f;

width:0;

height:0;

font-size:2px;

}

.right{

border-top:5px solid #fff;

border-bottom:5px solid #fff;

border-left:5px solid #f0f;

width:0;

height:0;

font-size:2px;

}

b{

margin:10px;

}

/style

body

b class=”up”/b

b class=”down”/b

b class=”left”/b

b class=”right”/b

/body

/html