日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
jointJS(一）--關(guān)于jointJS的初認(rèn)識

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

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

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

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

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

 
 
    
  
  
  1.  
    2.   
  
  2.  
    3.   
  
  3.  
    4.   
  
  4.  
    5.   
  
  5.  
    6.   
  
  6.  
    7.   
  
  7.  
    8.   
  
  8.  
    9.   
  
  9.  
    10.   
  
  10.  
    11.   
  
  11.  
    12.   
  
  12.  
    13.   
  
  13.  
    14.   
  
  14.  
    15.   
  
  15.  
    16.   
  
  16.  
    17.   
  
  17.  
    18.   
  
  18.  
    19.   
  
  19.  
    20.   
  
  20.  
    21.   
  
  21.  
    22.   
  
  22.  
    23.   
  
  23.  
    24.   
  
  24.  
    25.
 
  •  
  •  
  •  
  •  
  •  
  •   

    • JS代碼如下： 首先是定義畫板和畫布

     
 
      
  
  
    1. var graph = new joint.dia.Graph; 
      2.   
  
    2.  
      3.   
  
    3. var paper = new joint.dia.Paper({ 
      4.   
  
    4.  
      5.   
  
    5. el: $('#myholder'),//此處是你要放graph的容器 
      6.   
  
    6.  
      7.   
  
    7. width: 1300, 
      8.   
  
    8.  
      9.   
  
    9. height: 800, 
      10.   
  
    10.  
      11.   
  
    11. model: graph, 
      12.   
  
    12.  
      13.   
  
    13. gridSize: 1 
      14.   
  
    14.  
      15.   
  
    15. });  
      16.

    接下來，就先畫個簡單的矩形，想要改變一些默認(rèn)樣式的話需要了解元素的SVG DOM結(jié)構(gòu)：

     
 
      
  
  
    1. var rect = new joint.shapes.basic.Rect({ 
      2.   
  
    2.     position: { 
      3.   
  
    3.         x: 100, 
      4.   
  
    4.         y: 30 
      5.   
  
    5.     }, 
      6.   
  
    6.     size: { 
      7.   
  
    7.         width: 200, 
      8.   
  
    8.         height: 30 
      9.   
  
    9.     }, 
      10.   
  
    10.     attrs: { 
      11.   
  
    11.         //attr SVG attr      prop- custom data 
      12.   
  
    12.         rect: { 
      13.   
  
    13.             fill: 'rgb(238,244,247)', 
      14.   
  
    14.             'stroke': 'rgb(47,152,223)', 
      15.   
  
    15.             'stroke-width': '1px' 
      16.   
  
    16.                 //svg上色 fill stroke 
      17.   
  
    17.         }, 
      18.   
  
    18.         text: { 
      19.   
  
    19.             text: 'my box', 
      20.   
  
    20.             fill: 'black' 
      21.   
  
    21.         } 
      22.   
  
    22.     } 
      23.   
  
    23. });  
      24.

    跟矩形相似，我們也可以畫個橢圓，代碼如下：

     
 
      
  
  
    1. var ellipse = new joint.shapes.basic.Rect({ 
      2.   
  
    2.     position: { 
      3.   
  
    3.         x: 100, 
      4.   
  
    4.         y: 30 
      5.   
  
    5.     }, 
      6.   
  
    6.     size: { 
      7.   
  
    7.         width: 200, 
      8.   
  
    8.         height: 30 
      9.   
  
    9.     }, 
      10.   
  
    10.     attrs: { 
      11.   
  
    11.         //attr SVG attr      prop- custom data 
      12.   
  
    12.         rect: { 
      13.   
  
    13.             fill: 'rgb(238,244,247)', 
      14.   
  
    14.             'stroke': 'rgb(47,152,223)', 
      15.   
  
    15.             'stroke-width': '1px', 
      16.   
  
    16.             'rx': '10px', 
      17.   
  
    17.             'ry': '30px' 
      18.   
  
    18.                 //svg上色 fill stroke 
      19.   
  
    19.         }, 
      20.   
  
    20.         text: { 
      21.   
  
    21.             text: 'ellipse', 
      22.   
  
    22.             fill: 'pink' 
      23.   
  
    23.         } 
      24.   
  
    24.     } 
      25.   
  
    25. });  
      26.

    要讓他們有一定的距離

     
 
      
  
  
    1. ellipse.translate(300); //兩塊的距離 
      2.

    接下來，再來畫個連線：

     
 
      
  
  
    1. var link = new joint.dia.Link({ 
      2.   
  
    2.     source: { 
      3.   
  
    3.         id: rect.id 
      4.   
  
    4.     }, 
      5.   
  
    5.     target: { 
      6.   
  
    6.         id: ellipse.id 
      7.   
  
    7.     } 
      8.   
  
    8. });  
      9.

    ***，把前面造的對象都放到畫板中：

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

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


    文章標(biāo)題：jointJS(一）--關(guān)于jointJS的初認(rèn)識
    網(wǎng)址分享：http://www.5511xx.com/article/dpeehes.html