jointJS 一) 關於jointJS的初認識

2021-09-18 04:03:22 字數 1130 閱讀 6298

最近由於專案需要,開始接觸jointjs,妥妥不停刷文件模式,先寫一下對於jointjs的粗淺認識吧。

我們可以使用jointjs已提供的圖元素繪圖,也可根據需求自定義一些圖元素。除此之外,jointjs建立的圖表就是svg圖形,想改變圖形樣式,就去googlesvg相關語法就好啦。另外,它極易上手且操作簡單,並且支援所有的現代瀏覽器。

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

先看html**,body就乙個div#myholder用來盛放我的畫板graph,這裡肯定有人會問什麼是graph,憋急,請往下看。

js**如下:

首先是定義畫板和畫布

var graph = new joint.dia.graph;

var ***** = new joint.dia.*****();

接下來,就先畫個簡單的矩形,想要改變一些預設樣式的話需要了解元素的svg dom結構:

var rect = new joint.shapes.basic.rect(,

size: ,

attrs: ,

text:

}});

跟矩形相似,我們也可以畫個橢圓,**如下:

var ellipse = new joint.shapes.basic.rect(,

size: ,

attrs: ,

text:

}});

要讓他們有一定的距離

ellipse.translate(300); //兩塊的距離
接下來,再來畫個連線:

var link = new joint.dia.link(,

target:

});

最後,把前面造的物件都放到畫板中:

graph.addcells([rect, rect2, link]);
那麼,乙個小小的demo就實現了,是不是挺簡單的,接下來我還會陸續分享使用jointjs中的問題以及我找到的最好的方法,jointjs的初認識就先到這裡啦,加油!

LeetCode(一)關於GrayCode的實現

在leetcode上面有一道題,是關於gray code的實現的。graycode是這樣一種編碼 1 位gray code 0 12 位gray code 先新增乙個映象,如下 011 0然後,在原來的編碼前面新增 0 在映象碼前面新增 1 如下 00 0111 10而從2位變化到3位的gray c...

Linux基礎一 關於bash命令

1 支援命令歷史 命令補全 路徑補全 2 支援管道 重定向 3 支援命令別名 4 支援命令列編輯 5 支援命令列展開 6 支援檔名通配 7 支援變數 8 支援程式設計 1 反引號,鍵盤左上角esc下面的鍵,用於命令替換 root ymm xiaokeai echo pwd root2 雙引號,弱引用...

OpenCV筆記之一 關於Miniconda

2 配置miniconda conda update all3 建立conda虛擬環境 a.建立環境並自行命名環境名 conda create n venv or your envname python 3.8 or other edition you want b.啟用 進入虛擬環境 conda ...