mxgraph樣式設定

在 mxgraph 中樣式分為全域性命名樣式和單獨樣式設定。這裡的樣式和在css中的樣式不太一樣，雖然包含了部分css中的屬性，但是它還包含了 cell 相關的一些屬性設定。

全域性樣式是通過定義乙個樣式名，然後指定一系列預設屬性，然後應用於 cell 中，而單獨樣式設定實際上是重寫了部分預設全域性樣式的屬性。

在 mxgraph 中樣式相關的操作需要查閱 mxstyleheet。mxgraph 內建了二種全域性樣式，分別為defaultvertex和defaultedge。樣式的所有屬性都有常量定義，這個可以直接查閱mxconstants，由於其中內容比較多，建議自己分類整理。

自定義全域性樣式

可以通過物件或者陣列的形式來容納樣式，官方建議使用物件形式。

const graph = new mxgraph(container)
const style = new object()
style[mxcontants.style_fillcolor] = 'red'
style[mxcontants.style_fontstyle] = mxcontants.font_bold
graph.getstylesheet().putcellstyle('mystyle', style)
const parent = graph.getdefaultparent()
// 頂點樣式
graph.insertvertex(parent, null, '', 0, 0, 80, 30, 'mystyle')
// 連線樣式, v1, v2 為當前插入的頂點
graph.insertedge(parent, null, '', v1, v2, 'mystyle')

通過graph.getstylesheet()返回了mxstylesheet例項，如果想要獲取當前例項的頂點和邊的樣式，可以呼叫mxstylesheet類提供的getdefaultvertexstyle()和getdefaultedgestyle()方法。如果要獲取內建和自己定義的所有樣式，可以直接讀取mxstylesheet類的屬性styles。最後通過putcellstyle()方法來註冊了乙個全域性的樣式。

設定單獨樣式

在上一節例子中直接在insertvertex()和insertedge()方法的最後乙個引數中傳入了樣式名。如果要在此基礎上新增額外的屬性怎麼辦呢？在定義全域性樣式時使用mxconstants類中的很多屬性，在設定單獨樣式時我們需要知道有哪些屬性是有效的，這個需要直接檢視mxconstants常量所代表的具體值，例如：mxconstants.style_fillcolor的值為fillcolor那麼在樣式中就可以這樣來寫：

graph.insertvertex(parent, null, '', 0, 0, 80, 30, 'mystyle;fillcolor=#ff8e00')

注意：在 mxgraph 的屬性中也有傳遞2個屬性的設定，比如屬性style_dash_pattern, 設定示例：dashed=1;dashpattern=3 10;strokecolor=red。

可以通過賦值為none來移除預設樣式表的屬性，例如：

const v1 = graph.insertvertex(parent, null, 'vertex 1', 50, 20, 80, 20, ';fillcolor=none')

執行後節點的填充顏色就被去除了。

由於mxcontansts中定義的屬性太多了，作者也是在慢慢學習中，這裡只是列舉了一些常見的設定應用於單獨樣式中的參考

字型相關

fontcolor # 顏色 fontsize # 字型大小 fontfamily # 字型庫 fontstyle # 字型樣式 textdirection # 文字書寫方向 align # 水平對齊

verticalalign # 垂直對齊

標籤相關

labelwidth # 寬 labelposition # 水平位置 verticallabelposition # 垂直位置 nolabel # 不顯示標籤 labelbackgroundcolor # 背景顏色 labelbordercolor # 邊框顏色 labelpadding # 標籤文字和邊框之間的距離 spacing # 標籤與頂點的間距 spacinglet # 標籤與頂點的左間距 spacingbottom # 標籤與頂點的下間距 spacingright # 標籤與頂點的右間距

spacingtop # 標籤與頂點的上間距

頂點相關

fillcolor # 填充顏色 strokecolor # 描邊顏色 strokewidth # 描邊線寬 dashed # 虛線邊 dashpattern # 虛線點大小和間距 rounded # 圓角 arcsize # 圓角大小

glass # 玻璃按鈕

邊相關

perimeterspacing # 周邊間距的關鍵點 sourceperimeterspacing # 邊與源關鍵點周邊間距

targetperimeterspacing # 邊與目標關鍵點周邊間距

mxgraph樣式設定

GridView樣式設定

ProgressBar樣式設定

css樣式設定

mxgraph樣式設定

GridView樣式設定

ProgressBar樣式設定

css樣式設定

相關推薦