好看的玄幻小说,完美世界小说txt下载,盗墓笔记有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

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

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

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

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

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

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

JS代碼如下：首先是定義畫(huà)板和畫(huà)布

 
 
  
  var graph = new joint.dia.Graph;   
     
  var paper = new joint.dia.Paper({   
     
  el: $('#myholder'),//此處是你要放graph的容器   
     
  width: 1300,   
     
  height: 800,   
     
  model: graph,   
     
  gridSize: 1   
     
  });

接下來(lái)，就先畫(huà)個(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'   
          }   
      }   
  });

跟矩形相似，我們也可以畫(huà)個(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); //兩塊的距離

接下來(lái)，再來(lái)畫(huà)個(gè)連線：

 
 
  
  var link = new joint.dia.Link({   
      source: {   
          id: rect.id   
      },   
      target: {   
          id: ellipse.id   
      }   
  });

***，把前面造的對(duì)象都放到畫(huà)板中：

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

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

本文標(biāo)題：jointJS(一）--關(guān)于jointJS的初認(rèn)識(shí)
文章鏈接：http://m.fisionsoft.com.cn/article/dpeehes.html

新聞中心

其他資訊