GoJs面板繪圖模板go.Panel使用示例詳解
前言
go.Panel面板是gojs重要的繪圖模板，上文中我們提到的是可視化圖形中的節(jié)點(diǎn)分組.而go.Panel可以把節(jié)點(diǎn)內(nèi)部分成很多的模塊，并且各個(gè)模塊之間相互不會(huì)影響。其內(nèi)部可以存放其他的繪圖模板，并且可以設(shè)置其組成部分的大小和位置。并且其內(nèi)部的模板是按照順序進(jìn)行渲染。
go.Panel的使用
this.myDiagram.nodeTemplate = $$(
go.Node,
"Horizontal",
$$(go.Panel,"Horizontal",
$$(go.TextBlock,{background:"#67B73C",text:"這是Panel內(nèi)部"}),
$$(go.Picture,{ width: 100, height: 100,margin:5,source:pic })
)
);
這就是go.Panel的一個(gè)簡(jiǎn)單使用，可以看出。go.Panel面板可以看做是節(jié)點(diǎn)內(nèi)部的組。它可以把其他的繪圖模板放到自己的內(nèi)部，然后再內(nèi)部進(jìn)行不同位置的排列。
go.Panel的類型
go.Panel提供了以下類型方便進(jìn)行內(nèi)部元器件的排列
go.panel.Auto //內(nèi)部的自動(dòng)布局 go.panel.Grid //網(wǎng)格化布局 go.panel.Graduated //刻度布局 go.panel.Horizontal //水平排列布局 go.panel.Position //定位布局 go.panel.Table //表格布局 go.panel.Spot // go.panel.Vertical //豎直方向布局 go.panel.Viewbox //
go.panel.Auto類型
go.panel.Auto為自動(dòng)面板，其示例如下
$$(go.Panel,"Auto",{background:"#FF9900"},
$$(go.Picture,{ width: 100, height: 100,margin:5,source:pic })
),
$$(go.Panel,"Auto",{background:"#FF9900"},
$$(go.TextBlock,{background:"#67B73C",margin:5,text:"這是Panel內(nèi)部"}),
),
$$(go.Panel,"Auto",{background:"#FF9900"},
$$(go.TextBlock,{background:"#67B73C",text:"這是Panel內(nèi)部"}),
$$(go.Picture,{ width: 100, height: 100,margin:5,source:pic })
),
$$(go.Panel,"Auto",{background:"#FF9900"},
$$(go.Picture,{ width: 100, height: 100,margin:5,source:pic }),
$$(go.TextBlock,{background:"#67B73C",text:"這是Panel內(nèi)部"})
)
可以看出 Auto面板是以其內(nèi)部的第一個(gè)元素為主進(jìn)行填充，如果內(nèi)部只有一個(gè)元素，包裹在元素周圍。如果內(nèi)部有多個(gè)元素，則以第一個(gè)元素為主，在圖層的最上層，而后以內(nèi)部最大的元素為界，進(jìn)行包裹。其他元素則是默認(rèn)上下左右居中顯示。
go.panel.Grid類型
go.panel.Grid為網(wǎng)格化面板，其一些配置屬性如下
this.myDiagram.grid.visible = true;//開啟背景網(wǎng)格 this.myDiagram.toolManager.draggingTool.isGridSnapEnabled = true;//拖拽的位移的最小單位,默認(rèn)與背景格相同. this.myDiagram.grid.gridCellSize = new go.Size(30, 20);//設(shè)置背景單元格的大小 this.myDiagram.toolManager.draggingTool.gridSnapCellSize = new go.Size(20, 20);//設(shè)置拖拽的最小位移單位,不用和背景網(wǎng)格寬度保持一致
通過上面的實(shí)例可以看出進(jìn)行網(wǎng)格化的操作和單元格和位移單位的一些屬性配置，我們還可以對(duì)網(wǎng)格進(jìn)行一個(gè)自定義的操作
this.myDiagram.grid = $$(go.Panel, "Grid",
{ gridCellSize: new go.Size(25, 25) },
$$(go.Shape, "LineH", { stroke: "#ADD8E6" }),
$$(go.Shape, "LineV", { stroke: "#90EE90" }),
$$(go.Shape, "LineH", { stroke: "#67B73C", interval: 6 }),
$$(go.Shape, "LineV", { stroke: "#00FF00", interval: 6 })
)
可以通過go.Panel的Grid屬性來自定義單元格，來對(duì)其進(jìn)行一個(gè)樣式上的修改。但是要注意這個(gè)地方的內(nèi)部元素不能是go.TextBlock和go.Picture。否則會(huì)報(bào)錯(cuò)。
go.panel.Graduated類型
go.panel.Graduated是刻度面板，可以和go.Shape幾個(gè)圖形結(jié)合
$$(
go.Panel,
"Graduated",
{
graduatedMin: 0, //標(biāo)尺的最小刻度
graduatedMax: 140, //標(biāo)尺的最大刻度
graduatedTickBase: 0, //起始點(diǎn)刻度線的值，如果與graduatedMin一樣則是從起始點(diǎn)開始
graduatedTickUnit: 5, //為每格的刻度代表的值
background: "transparent",
},
$$(go.Shape, { geometryString: "M0 0 H450" }),
$$(go.Shape, { geometryString: "M0 0 V5" }),
$$(go.Shape, { geometryString: "M0 0 V10", interval: 4 }),
// 小刻度的標(biāo)識(shí)
$$(go.TextBlock, {
interval: 2,
segmentOffset: new go.Point(0, 8),
stroke: "blue",
font: "7pt sans-serif",
}),
// 大刻度的標(biāo)識(shí)
$$(go.TextBlock, {
interval: 4,
segmentOffset: new go.Point(0, 12),
stroke: "red",
font: "bold 12pt sans-serif",
})
)
可以根據(jù)刻度的不同，利用go.Shape和go.TextBlock來繪制自己想要的圖形，不僅僅可以是直線，還可以是儀表盤形式的弧線型。
go.panel.Horizontal類型
go.panel.Horizontal類型是水平排列面板，因此在內(nèi)部元素不是等高的情況下，面板會(huì)以最高的元素為高。這樣的話，其他的元素就可以在豎直方向上調(diào)整自己的顯示位置。
$$(go.Panel,"Horizontal",{background:"#FF9900"},
$$(go.Picture,{ width: 100, height: 100,margin:5,source:pic }),
$$(go.TextBlock,{background:"#67B73C",text:"居上",alignment: go.Spot.Top}),
$$(go.TextBlock,{background:"#67B73C",text:"居中",alignment: go.Spot.Center }),
$$(go.TextBlock,{background:"#67B73C",text:"居下",alignment: go.Spot.Bottom })
),
go.panel.Position類型
go.panel.Position類型為定位面板，與css定位不同的是。其不是上下左右的邊距，而是具體的坐標(biāo)，類似垂直坐標(biāo)系。從圖中的數(shù)值可以看出，其坐標(biāo)系是X軸向右，Y軸向下的垂直坐標(biāo)系。
$$(go.Panel, "Position",
{ background: "#FF9900" },
$$(go.TextBlock, "(-100,0)", { position: new go.Point(-100, 0),background: "#67B73c" }),
$$(go.TextBlock, "(-100,-100)", { position: new go.Point(-100, -100),background: "#67B73c" }),
$$(go.TextBlock, "(0,-100)", { position: new go.Point(0, -100),background: "#67B73c" }),
$$(go.TextBlock, "(100,-100)", { position: new go.Point(100, -100),background: "#67B73c" }),
$$(go.TextBlock, "(0,0)", { position: new go.Point(0, 0),background: "#67B73c" }),
$$(go.TextBlock, "(100,0)", { position: new go.Point(100, 0),background: "#67B73c" }),
$$(go.TextBlock, "(100,100)", { position: new go.Point(100, 100),background: "#67B73c" }),
$$(go.TextBlock, "(0,100)", { position: new go.Point(0, 100),background: "#67B73c" }),
$$(go.TextBlock, "(-100,100)", { position: new go.Point(-100, 100),background: "#67B73c" }),
));
go.panel.Table類型
go.panel.Table類型為表格面板，其實(shí)row為行數(shù)，column為列數(shù)。rowSpan為行合并，columnSpan為列合并。
$$(go.Panel, "Table",
$$(go.Panel, "Auto",{row:0,column:0},
$$(go.Shape, 'Rectangle', { stroke:"#FF9900"}),
$$(go.TextBlock,{background:"#67B73C",text:"0行0列"}),
),
$$(go.Panel, "Auto",{row:1,column:0},
$$(go.Shape, 'Rectangle', { stroke:"#FF9900"}),
$$(go.TextBlock,{background:"#67B73C",text:"1行0列"}),
),
$$(go.Panel, "Auto",{row:1,column:1},
$$(go.Shape, 'Rectangle', { stroke:"#FF9900"}),
$$(go.TextBlock,{background:"#67B73C",text:"1行1列"}),
),
$$(go.Panel, "Auto",{row:2,column:0,columnSpan:3},
$$(go.Shape, 'Rectangle', { stroke:"#FF9900"}),
$$(go.TextBlock,{background:"#67B73C",text:"2行列合并"}),
),
$$(go.Panel, "Auto",{row:0,column:1},
$$(go.Shape, 'Rectangle', { stroke:"#FF9900"}),
$$(go.TextBlock,{background:"#67B73C",text:"0行1列"}),
),
$$(go.Panel, "Auto",{row:0,column:2,rowSpan:3},
$$(go.Shape, 'Rectangle', { stroke:"#FF9900"}),
$$(go.TextBlock,{background:"#67B73C",text:"2列行合并"}),
),
))
可以看出，Table面板是根據(jù)表格的幾行幾列對(duì)其內(nèi)部的元素進(jìn)行排列，通過rowSpan和columnSpan對(duì)第三行和第三列合并之后，第三行的三列為一個(gè)單元格，因此文字左右居中顯示。而第三列的三個(gè)單元格也進(jìn)行了合并其顯示在上下居中第二行的單元格位置。
go.panel.Spot類型
go.panel.Spot類型為點(diǎn)布局，其布局方式和position(定位布局類似)，但是其控制范圍為0-1，即左上角為(0,0)，右下角為(1,1)進(jìn)行點(diǎn)的定位
$$(go.Panel, "Spot", // or "Position"
$$(go.Shape, 'Rectangle', { fill:"#FF9900",stroke: "#FF9900",width:200,height:200}),
$$(go.TextBlock, { alignment: new go.Spot(0,0),background: "#67B73c",text:"(0,0)" }),
$$(go.TextBlock, { alignment: new go.Spot(0.5,0),background: "#67B73c",text:"(0.5,0)" }),
$$(go.TextBlock, { alignment: new go.Spot(1,0),background: "#67B73c",text:"(1,0)" }),
$$(go.TextBlock, { alignment: new go.Spot(1,0.5),background: "#67B73c",text:"(1,0.5)" }),
$$(go.TextBlock, { alignment: new go.Spot(1,1,0,0),background: "#67B73c",text:"(1,1)" }),
$$(go.TextBlock, { alignment: new go.Spot(1,1,50,0),background: "#67B73c",text:"(1,2)" }),
$$(go.TextBlock, { alignment: new go.Spot(0.5,1),background: "#67B73c",text:"(0.5,1)" }),
$$(go.TextBlock, { alignment: new go.Spot(0,1),background: "#67B73c",text:"(0,1)" }),
$$(go.TextBlock, { alignment: new go.Spot(0,0.5),background: "#67B73c",text:"(0,0.5)" }),
$$(go.TextBlock, { alignment: new go.Spot(0.5,0.5),background: "#67B73c",text:"(0.5,0.5)" }),
));
由上圖可以看出對(duì)應(yīng)點(diǎn)的位置，new go.Spot()可以傳四個(gè)參數(shù)，前面兩個(gè)是點(diǎn)在圖中的方位，而后面兩個(gè)參數(shù)則是在點(diǎn)的內(nèi)部使用position面板的方式對(duì)其進(jìn)行定位，其顯示效果為(1,1)點(diǎn)出的兩個(gè)TextBlock的顯示。
go.panel.Vertical類型
與水平面板相似，豎直面板內(nèi)的元素是豎直方向排列，因此會(huì)以面板內(nèi)部最寬的元素為寬，而其他元素則可以調(diào)整水平方向上的位置。而通過把第三行和第三列用
$$(go.Panel,"Vertical",{background:"#FF9900"},
$$(go.Picture,{ width: 100, height: 100,margin:5,source:pic }),
$$(go.TextBlock,{background:"#67B73C",text:"居左",alignment: go.Spot.Left}),
$$(go.TextBlock,{background:"#67B73C",text:"居中",alignment: go.Spot.Center }),
$$(go.TextBlock,{background:"#67B73C",text:"居右",alignment: go.Spot.Right })
),
go.panel.Viewbox類型
go.panel.Viewbox類型為視圖框面板，其可以對(duì)原生進(jìn)行縮放來適應(yīng)對(duì)應(yīng)的面板。
$$(go.Panel,"Horizontal",
$$(go.Panel,"Viewbox",{ width: 80, height: 80 },
$$(go.TextBlock, {background: "#67B73C",text: "這是Viewbox面板下的",alignment: go.Spot.Top,})
),
$$(go.Panel,"Auto",background: "#67B73C",text: "這是Auto面板下的",alignment: go.Spot.Top,})
)
)
由上圖可以看出，視圖框畫板會(huì)根據(jù)自己的寬高對(duì)內(nèi)部元素進(jìn)行一個(gè)縮放，以保證對(duì)應(yīng)的元素顯示完整。
總結(jié)
go.Panel(面板)的引入，極大的拓展了節(jié)點(diǎn)內(nèi)部布局的拓展空間，如果前面的go.TextBlock、go.Shape和go.Picture是節(jié)點(diǎn)內(nèi)元素的堆砌的話。那么go.panel就是讓這些元素進(jìn)行分塊，然后讓他們顯示到合適的地方。讓節(jié)點(diǎn)顯示的內(nèi)容更合理，也更加好看。
以上就是GoJs面板繪圖模板go.Panel使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于GoJs面板繪圖go.Panel的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript 函數(shù)節(jié)流詳解及方法總結(jié)
這篇文章主要介紹了JavaScript 函數(shù)節(jié)流詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02
JS判斷、校驗(yàn)MAC地址的2個(gè)實(shí)例
這篇文章主要介紹了JS判斷、校驗(yàn)MAC地址的2個(gè)實(shí)例,需要的朋友可以參考下2014-05-05
微信小程序五子棋游戲的悔棋實(shí)現(xiàn)方法【附demo源碼下載】
這篇文章主要介紹了微信小程序五子棋游戲的悔棋實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了微信小程序中悔棋的原理與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2019-02-02
Swiper.js插件超簡(jiǎn)單實(shí)現(xiàn)輪播圖
這篇文章主要介紹了Swiper.js插件超簡(jiǎn)單實(shí)現(xiàn)輪播圖，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)的輪播效果，通過改變圖片的透明度來實(shí)現(xiàn)輪播的效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
React中過渡動(dòng)畫的編寫方式實(shí)例詳解
在開發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過渡動(dòng)畫,可以很好的增加用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于React中過渡動(dòng)畫的編寫方式,需要的朋友可以參考下2022-10-10
Array.prototype 的泛型應(yīng)用分析，需要的朋友可以參考下。2010-04-04
一道超經(jīng)典js面試題Foo.getName()的故事
Foo.getName算是一道比較老的面試題了,大致百度了一下在17年就有相關(guān)文章在介紹它,下面這篇文章主要給大家介紹了關(guān)于一道超經(jīng)典js面試題Foo.getName()的相關(guān)資料,需要的朋友可以參考下2022-03-03
javaScript中一些常見的數(shù)據(jù)類型檢查校驗(yàn)
最近在面試的時(shí)候又被問到JS中檢查校驗(yàn)數(shù)據(jù)類型的方法,所以這篇文章主要給大家介紹了關(guān)于javaScript中一些常見的數(shù)據(jù)類型檢查校驗(yàn)的相關(guān)資料,需要的朋友可以參考下2022-05-05
代碼實(shí)例ajax實(shí)現(xiàn)點(diǎn)擊加載更多數(shù)據(jù)圖片
在本篇文章里我們給大家分享了關(guān)于ajax實(shí)現(xiàn)點(diǎn)擊加載更多數(shù)據(jù)圖片的相關(guān)代碼知識(shí)點(diǎn)，有興趣的朋友們參考下。2018-10-10