最近由於專案需要,開始接觸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 ...