GoJs面板绘图模板go.Panel使用示例详解

袁娇然

前言

1. go.Panel

复制代码

面板是

1. gojs

复制代码

重要的绘图模板，上文中我们提到的是可视化图形中的节点分组.而

1. go.Panel

复制代码

可以把节点内部分成很多的模块，并且各个模块之间相互不会影响。其内部可以存放其他的绘图模板，并且可以设置其组成部分的大小和位置。并且其内部的模板是按照顺序进行渲染。

go.Panel的使用

1. this.myDiagram.nodeTemplate = $$(
   
2.   go.Node,
   
3.   "Horizontal",
   
4.   $$(go.Panel,"Horizontal",
   
5.     $$(go.TextBlock,{background:"#67B73C",text:"这是Panel内部"}),
   
6.     $$(go.Picture,{ width: 100, height: 100,margin:5,source:pic })
   
7.   )
   
8. );

复制代码

这就是

1. go.Panel

复制代码

的一个简单使用，可以看出。

1. go.Panel

复制代码

面板可以看做是节点内部的组。它可以把其他的绘图模板放到自己的内部，然后再内部进行不同位置的排列。

go.Panel的类型

1. go.Panel

复制代码

提供了以下类型方便进行内部元器件的排列

1. go.panel.Auto //内部的自动布局
   
2. go.panel.Grid //网格化布局
   
3. go.panel.Graduated //刻度布局
   
4. go.panel.Horizontal //水平排列布局
   
5. go.panel.Position //定位布局
   
6. go.panel.Table //表格布局
   
7. go.panel.Spot //
   
8. go.panel.Vertical //竖直方向布局
   
9. go.panel.Viewbox //

复制代码

go.panel.Auto类型

1. go.panel.Auto

复制代码

为自动面板，其示例如下

1. $$(go.Panel,"Auto",{background:"#FF9900"},
   
2.     $$(go.Picture,{ width: 100, height: 100,margin:5,source:pic })
   
3. ),
   
4. $$(go.Panel,"Auto",{background:"#FF9900"},
   
5.     $$(go.TextBlock,{background:"#67B73C",margin:5,text:"这是Panel内部"}),
   
6. ),
   
7. $$(go.Panel,"Auto",{background:"#FF9900"},
   
8.     $$(go.TextBlock,{background:"#67B73C",text:"这是Panel内部"}),
   
9.     $$(go.Picture,{ width: 100, height: 100,margin:5,source:pic })
   
10. ),
    
11. $$(go.Panel,"Auto",{background:"#FF9900"},
    
12.     $$(go.Picture,{ width: 100, height: 100,margin:5,source:pic }),
    
13.     $$(go.TextBlock,{background:"#67B73C",text:"这是Panel内部"})
    
14. )

复制代码

可以看出

1. Auto

复制代码

面板是以其内部的第一个元素为主进行填充，如果内部只有一个元素，包裹在元素周围。如果内部有多个元素，则以第一个元素为主，在图层的最上层，而后以内部最大的元素为界，进行包裹。其他元素则是默认上下左右居中显示。

go.panel.Grid类型

1. go.panel.Grid

复制代码

为网格化面板，其一些配置属性如下

1. this.myDiagram.grid.visible = true;//开启背景网格
   
2. this.myDiagram.toolManager.draggingTool.isGridSnapEnabled = true;//拖拽的位移的最小单位,默认与背景格相同.
   
3. this.myDiagram.grid.gridCellSize = new go.Size(30, 20);//设置背景单元格的大小
   
4. this.myDiagram.toolManager.draggingTool.gridSnapCellSize = new go.Size(20, 20);//设置拖拽的最小位移单位,不用和背景网格宽度保持一致

复制代码

通过上面的实例可以看出进行网格化的操作和单元格和位移单位的一些属性配置，我们还可以对网格进行一个自定义的操作

1. this.myDiagram.grid = $$(go.Panel, "Grid",  
   
2.     { gridCellSize: new go.Size(25, 25) },
   
3.     $$(go.Shape, "LineH", { stroke: "#ADD8E6" }),
   
4.     $$(go.Shape, "LineV", { stroke: "#90EE90" }),
   
5.     $$(go.Shape, "LineH", { stroke: "#67B73C", interval: 6 }),
   
6.     $$(go.Shape, "LineV", { stroke: "#00FF00", interval: 6 })
   
7. )

复制代码

可以通过

1. go.Panel

复制代码

的

1. Grid

复制代码

属性来自定义单元格，来对其进行一个样式上的修改。但是要注意这个地方的内部元素不能是

1. go.TextBlock和go.Picture

复制代码

。否则会报错。

go.panel.Graduated类型

1. go.panel.Graduated

复制代码

是刻度面板，可以和

1. go.Shape

复制代码

几个图形结合

1. $$(
   
2.   go.Panel,
   
3.   "Graduated",
   
4.   {
   
5.     graduatedMin: 0, //标尺的最小刻度
   
6.     graduatedMax: 140, //标尺的最大刻度
   
7.     graduatedTickBase: 0, //起始点刻度线的值，如果与graduatedMin一样则是从起始点开始
   
8.     graduatedTickUnit: 5, //为每格的刻度代表的值
   
9.     background: "transparent",
   
10.   },
    
11.   $$(go.Shape, { geometryString: "M0 0 H450" }),
    
12.   $$(go.Shape, { geometryString: "M0 0 V5" }),
    
13.   $$(go.Shape, { geometryString: "M0 0 V10", interval: 4 }),
    
14.   // 小刻度的标识
    
15.   $$(go.TextBlock, {
    
16.     interval: 2,
    
17.     segmentOffset: new go.Point(0, 8),
    
18.     stroke: "blue",
    
19.     font: "7pt sans-serif",
    
20.   }),
    
21.   // 大刻度的标识
    
22.   $$(go.TextBlock, {
    
23.     interval: 4,
    
24.     segmentOffset: new go.Point(0, 12),
    
25.     stroke: "red",
    
26.     font: "bold 12pt sans-serif",
    
27.   })
    
28. )

复制代码

可以根据刻度的不同，利用

1. go.Shape

复制代码

和

1. go.TextBlock

复制代码

来绘制自己想要的图形，不仅仅可以是直线，还可以是仪表盘形式的弧线型。

go.panel.Horizontal类型

1. go.panel.Horizontal

复制代码

类型是水平排列面板，因此在内部元素不是等高的情况下，面板会以最高的元素为高。这样的话，其他的元素就可以在竖直方向上调整自己的显示位置。

1. $$(go.Panel,"Horizontal",{background:"#FF9900"},
   
2.     $$(go.Picture,{ width: 100, height: 100,margin:5,source:pic }),
   
3.     $$(go.TextBlock,{background:"#67B73C",text:"居上",alignment: go.Spot.Top}),
   
4.     $$(go.TextBlock,{background:"#67B73C",text:"居中",alignment: go.Spot.Center }),
   
5.     $$(go.TextBlock,{background:"#67B73C",text:"居下",alignment: go.Spot.Bottom })
   
6. ),

复制代码

go.panel.Position类型

1. go.panel.Position

复制代码

类型为定位面板，与

1. css

复制代码

定位不同的是。其不是上下左右的边距，而是具体的坐标，类似垂直坐标系。从图中的数值可以看出，其坐标系是X轴向右，Y轴向下的垂直坐标系。

1. $$(go.Panel, "Position",
   
2.     { background: "#FF9900" },
   
3.     $$(go.TextBlock, "(-100,0)", { position: new go.Point(-100, 0),background: "#67B73c" }),
   
4.     $$(go.TextBlock, "(-100,-100)", { position: new go.Point(-100, -100),background: "#67B73c" }),
   
5.     $$(go.TextBlock, "(0,-100)", { position: new go.Point(0, -100),background: "#67B73c" }),
   
6.     $$(go.TextBlock, "(100,-100)", { position: new go.Point(100, -100),background: "#67B73c" }),
   
7.     $$(go.TextBlock, "(0,0)", { position: new go.Point(0, 0),background: "#67B73c" }),
   
8.     $$(go.TextBlock, "(100,0)", { position: new go.Point(100, 0),background: "#67B73c" }),
   
9.     $$(go.TextBlock, "(100,100)", { position: new go.Point(100, 100),background: "#67B73c" }),
   
10.     $$(go.TextBlock, "(0,100)", { position: new go.Point(0, 100),background: "#67B73c" }),
    
11.     $$(go.TextBlock, "(-100,100)", { position: new go.Point(-100, 100),background: "#67B73c" }),
    
12. ));

复制代码

go.panel.Table类型

1. go.panel.Table

复制代码

类型为表格面板，其实

1. row

复制代码

为行数，

1. column

复制代码

为列数。

1. rowSpan

复制代码

为行合并，

1. columnSpan

复制代码

为列合并。

1. $$(go.Panel, "Table",
   
2.     $$(go.Panel, "Auto",{row:0,column:0},
   
3.         $$(go.Shape, 'Rectangle', { stroke:"#FF9900"}),
   
4.         $$(go.TextBlock,{background:"#67B73C",text:"0行0列"}),
   
5.     ),
   
6.     $$(go.Panel, "Auto",{row:1,column:0},
   
7.         $$(go.Shape, 'Rectangle', { stroke:"#FF9900"}),
   
8.         $$(go.TextBlock,{background:"#67B73C",text:"1行0列"}),
   
9.     ),
   
10.     $$(go.Panel, "Auto",{row:1,column:1},
    
11.         $$(go.Shape, 'Rectangle', { stroke:"#FF9900"}),
    
12.         $$(go.TextBlock,{background:"#67B73C",text:"1行1列"}),
    
13.     ),
    
14.     $$(go.Panel, "Auto",{row:2,column:0,columnSpan:3},
    
15.         $$(go.Shape, 'Rectangle', { stroke:"#FF9900"}),
    
16.         $$(go.TextBlock,{background:"#67B73C",text:"2行列合并"}),
    
17.     ),
    
18.     $$(go.Panel, "Auto",{row:0,column:1},
    
19.         $$(go.Shape, 'Rectangle', { stroke:"#FF9900"}),
    
20.         $$(go.TextBlock,{background:"#67B73C",text:"0行1列"}),
    
21.     ),
    
22.     $$(go.Panel, "Auto",{row:0,column:2,rowSpan:3},
    
23.         $$(go.Shape, 'Rectangle', { stroke:"#FF9900"}),
    
24.         $$(go.TextBlock,{background:"#67B73C",text:"2列行合并"}),
    
25.     ),
    
26. ))

复制代码

可以看出，

1. Table

复制代码

面板是根据表格的几行几列对其内部的元素进行排列，通过

1. rowSpan

复制代码

和

1. columnSpan

复制代码

对第三行和第三列合并之后，第三行的三列为一个单元格，因此文字左右居中显示。而第三列的三个单元格也进行了合并其显示在上下居中第二行的单元格位置。

go.panel.Spot类型

1. go.panel.Spot

复制代码

类型为点布局，其布局方式和

1. position

复制代码

(定位布局类似)，但是其控制范围为0-1，即左上角为(0,0)，右下角为(1,1)进行点的定位

1. $$(go.Panel, "Spot",  // or "Position"
   
2.     $$(go.Shape, 'Rectangle', { fill:"#FF9900",stroke: "#FF9900",width:200,height:200}),
   
3.     $$(go.TextBlock, { alignment: new go.Spot(0,0),background: "#67B73c",text:"(0,0)" }),
   
4.     $$(go.TextBlock, { alignment: new go.Spot(0.5,0),background: "#67B73c",text:"(0.5,0)" }),
   
5.     $$(go.TextBlock, { alignment: new go.Spot(1,0),background: "#67B73c",text:"(1,0)" }),
   
6.     $$(go.TextBlock, { alignment: new go.Spot(1,0.5),background: "#67B73c",text:"(1,0.5)" }),
   
7.     $$(go.TextBlock, { alignment: new go.Spot(1,1,0,0),background: "#67B73c",text:"(1,1)" }),
   
8.     $$(go.TextBlock, { alignment: new go.Spot(1,1,50,0),background: "#67B73c",text:"(1,2)" }),
   
9.     $$(go.TextBlock, { alignment: new go.Spot(0.5,1),background: "#67B73c",text:"(0.5,1)" }),
   
10.     $$(go.TextBlock, { alignment: new go.Spot(0,1),background: "#67B73c",text:"(0,1)" }),
    
11.     $$(go.TextBlock, { alignment: new go.Spot(0,0.5),background: "#67B73c",text:"(0,0.5)" }),
    
12.     $$(go.TextBlock, { alignment: new go.Spot(0.5,0.5),background: "#67B73c",text:"(0.5,0.5)" }),
    
13. ));

复制代码

由上图可以看出对应点的位置，

1. new go.Spot()

复制代码

可以传四个参数，前面两个是点在图中的方位，而后面两个参数则是在点的内部使用

1. position

复制代码

面板的方式对其进行定位，其显示效果为(1,1)点出的两个

1. TextBlock

复制代码

的显示。

go.panel.Vertical类型

与水平面板相似，竖直面板内的元素是竖直方向排列，因此会以面板内部最宽的元素为宽，而其他元素则可以调整水平方向上的位置。而通过把第三行和第三列用

1. $$(go.Panel,"Vertical",{background:"#FF9900"},
   
2.     $$(go.Picture,{ width: 100, height: 100,margin:5,source:pic }),
   
3.     $$(go.TextBlock,{background:"#67B73C",text:"居左",alignment: go.Spot.Left}),
   
4.     $$(go.TextBlock,{background:"#67B73C",text:"居中",alignment: go.Spot.Center }),
   
5.     $$(go.TextBlock,{background:"#67B73C",text:"居右",alignment: go.Spot.Right })
   
6. ),

复制代码

go.panel.Viewbox类型

1. go.panel.Viewbox

复制代码

类型为视图框面板，其可以对原生进行缩放来适应对应的面板。

1. $$(go.Panel,"Horizontal",
   
2.     $$(go.Panel,"Viewbox",{ width: 80, height: 80 },
   
3.        $$(go.TextBlock, {background: "#67B73C",text: "这是Viewbox面板下的",alignment: go.Spot.Top,})
   
4.      ),
   
5.      $$(go.Panel,"Auto",background: "#67B73C",text: "这是Auto面板下的",alignment: go.Spot.Top,})
   
6.       )
   
7. )

复制代码

由上图可以看出，视图框画板会根据自己的宽高对内部元素进行一个缩放，以保证对应的元素显示完整。

总结

1. go.Panel

复制代码

(面板)的引入，极大的拓展了节点内部布局的拓展空间，如果前面的

1. go.TextBlock

复制代码

、

1. go.Shape

复制代码

和

1. go.Picture

复制代码

是节点内元素的堆砌的话。那么

1. go.panel

复制代码

就是让这些元素进行分块，然后让他们显示到合适的地方。让节点显示的内容更合理，也更加好看。
以上就是GoJs面板绘图模板go.Panel使用示例详解的详细内容，更多关于GoJs面板绘图go.Panel的资料请关注晓枫资讯其它相关文章！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

必修酒不催必k

路过，支持一下

那些年轻狂年v

感谢楼主，顶。