gojs-go.Panels(面板元素)
2024-05-25 16:41:51
//官网例子更好
Auto布局
myDiagram.nodeTemplateMap.add("Auto布局",$(go.Node,$(go.Panel, "Auto", {background: "#F5F5F5"},$(go.Shape, "RoundedRectangle", {width: 150,height: 150,fill: "#aecaea",stroke: null}),$(go.Shape, "RoundedRectangle", {width: 100,height: 100,fill: "#ffda92",stroke: null}),$(go.TextBlock, { //控制文字显示//alignment: go.Spot.TopLeft,font: "bold 16pt Microsoft YaHei, Arial, sans-serif",stroke: "#5687b3",textAlign: "center",}, new go.Binding("text").makeTwoWay())) //go.Panel的括号) //go.Node的括号);Vertical布局
myDiagram.nodeTemplateMap.add("Vertical布局",$(go.Node,$(go.Panel, go.Panel.Vertical, {background: "#F5F5F5"},$(go.Shape, "RoundedRectangle", {width: 150,height: 150,fill: "#aecaea",stroke: null}),$(go.Shape, "RoundedRectangle", {width: 100,height: 100,fill: "#ffda92",stroke: null}),$(go.TextBlock, { //控制文字显示font: "bold 16pt Microsoft YaHei, Arial, sans-serif",stroke: "#5687b3",textAlign: "center",}, new go.Binding("text").makeTwoWay())) //go.Panel的括号) //go.Node的括号);Horizontal布局
myDiagram.nodeTemplateMap.add("Horizontal布局",$(go.Node,$(go.Panel, "Horizontal", {background: "#F5F5F5"},$(go.Shape, "RoundedRectangle", {width: 150,height: 150,fill: "#aecaea",stroke: null}),$(go.Shape, "RoundedRectangle", {width: 100,height: 100,fill: "#ffda92",stroke: null}),$(go.TextBlock, { //控制文字显示font: "bold 16pt Microsoft YaHei, Arial, sans-serif",stroke: "#5687b3",textAlign: "center",}, new go.Binding("text").makeTwoWay())) //go.Panel的括号) //go.Node的括号);Spot布局
myDiagram.nodeTemplateMap.add("Spot布局",$(go.Node,$(go.Panel, "Spot", {background: "#F5F5F5"},$(go.Shape, "RoundedRectangle", {width: 150,height: 150,fill: "#aecaea",stroke: null}),$(go.TextBlock, { //控制文字显示font: "bold 10pt Microsoft YaHei, Arial, sans-serif",stroke: "#5687b3",width: 100,alignment: go.Spot.Center,text: "以蓝色为主块,其他块在蓝色块上的相对位置"}),$(go.Shape, "RoundedRectangle", {width: 100,height: 100,alignment: go.Spot.TopLeft,fill: "#ffda92",stroke: null}),$(go.TextBlock, { //控制文字显示font: "bold 16pt Microsoft YaHei, Arial, sans-serif",stroke: "#5687b3",alignment: go.Spot.TopRight,textAlign: "center",}, new go.Binding("text").makeTwoWay())) //go.Panel的括号) //go.Node的括号);Position布局
myDiagram.nodeTemplateMap.add("Position布局",$(go.Node,$(go.Panel, "Position", {background: "#F5F5F5"},$(go.Panel, "Auto", {position: new go.Point(0, 0)},$(go.Shape, "RoundedRectangle", {width: 40,height: 40,fill: "#aecaea",stroke: null}),$(go.TextBlock, { //控制文字显示font: "bold 10pt Microsoft YaHei, Arial, sans-serif",stroke: "#5687b3",textAlign: "center",width: 40,height: 40,text: "坐标\n0,0"})), $(go.Panel, "Auto", {position: new go.Point(40, 40)},$(go.Shape, "RoundedRectangle", {width: 40,height: 40,fill: "#ffda92",stroke: null}),$(go.TextBlock, { //控制文字显示font: "bold 10pt Microsoft YaHei, Arial, sans-serif",stroke: "#5687b3",textAlign: "center",width: 40,height: 40,text: "坐标\n40,40"})), $(go.Panel, "Auto", {position: new go.Point(80, 80)},$(go.Shape, "RoundedRectangle", {width: 40,height: 40,fill: "#aecaea",stroke: null}),$(go.TextBlock, { //控制文字显示font: "bold 10pt Microsoft YaHei, Arial, sans-serif",stroke: "#5687b3",textAlign: "center",width: 40,height: 40,text: "坐标\n80,80"})), $(go.Panel, "Auto", {position: new go.Point(120, 120)},$(go.Shape, "RoundedRectangle", {width: 40,height: 40,fill: "#ffda92",stroke: null}),$(go.TextBlock, { //控制文字显示font: "bold 6pt Microsoft YaHei, Arial, sans-serif",stroke: "#5687b3",textAlign: "center",width: 40,height: 40,text: "120,120"})),$(go.TextBlock, { //控制文字显示font: "bold 16pt Microsoft YaHei, Arial, sans-serif",stroke: "#5687b3",textAlign: "center",position: new go.Point(0, 130),}, new go.Binding("text").makeTwoWay())) //go.Panel的括号) //go.Node的括号);Table布局
myDiagram.nodeTemplateMap.add("Table布局",$(go.Node,$(go.Panel, "Table", {background: "#F5F5F5"},$(go.TextBlock, "row 0\ncol 0", {row: 0,column: 0,margin: 2,background: "#ffda92"}),$(go.TextBlock, "row 0\ncol 1", {row: 0,column: 1,margin: 2,background: "#ffda92"}),$(go.TextBlock, "row 1\ncol 0", {row: 1,column: 0,margin: 2,background: "#ffda92"}),$(go.TextBlock, "row 1\ncol 2", {row: 1,column: 2,margin: 2,background: "#ffda92"}),$(go.TextBlock, { //控制文字显示row: 2,column: 0,margin: 2,columnSpan: 3,font: "bold 16pt Microsoft YaHei, Arial, sans-serif",stroke: "#5687b3",textAlign: "center",}, new go.Binding("text").makeTwoWay())) //go.Panel的括号 ) //go.Node的括号));gojs-go.Panels(面板元素)相关推荐
- GoJS中Panels的Table元素
GoJS绘制图表一般分为三步:第一步.定义画布:第二步.定义节点:第三步.定义连线. 如上图所示,如果在节点中我们要绘制一个含有表格的图表,那么这个表格该怎么绘制呢 思路如下: 分成两个部分,第一个部 ...
- 可视化图表库--goJS
GoJS是Northwoods Software的产品. Northwoods Software创立于1995年,专注于交互图控件和类库.旗下四款产品: GoJS:用于在HTML上创建交互图的纯jav ...
- Openstack Horizon 可插拔Panels 和 Groups
一.介绍 Horizon允许添加dashboards(仪表板),panels(面板)和panel groups(面板组),而无需修改默认设置. 可插入设置是一种允许将设置存储在单独文件中的机制. 这些 ...
- html面板插件ui,jQuery布局插件UI Layout简介及使用方法
UI Layout是一种基于jQuery的布局框架,项目主页http://layout.jquery-dev.net/.该框架的参考原型是ExtJS的border-layout,因此十分适用于将原有使 ...
- LayUI_02 前端框架 页面元素
目录 一.栅格系统与后台布局 示例code HTML 二.layui 颜色设计感 三.字体图标 四.CSS3动画类 按钮 - 页面元素 五.表单 - 页面元素 HTMLcode 行区块结构code 六 ...
- JS实现QQ面板-拖曳效果
实现的功能是将整个QQ面板在特定区域点击鼠标按下移动,面板会随着光标移动而移动,这可以称为鼠标跟随效果,也叫拖曳效果. 首先是确定HTML结构,定义一个父元素模拟整个QQ面板,设置标题区域用于JS选中 ...
- 使用 ESP32 + HaaS Python 打造智能温湿度UI面板
随着这几年智能家居行业的快速发展,家庭用的智能面板越来越普及.智能面板不仅可以用来显示时间.家用电器的状态.回家/离家模式选择还可以用来调节空调温度.加湿器状态等等信息,给人们的生活带来了很多便 ...
- 流程图GoJS用于HTML图表的JavaScript库
GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序. 点击下载G ...
- Adobe Premiere Pro 2022 官方 应用内教程
Adobe Premiere Pro 2022 安装后,自带一个应用内教程 位置为 帮助 > Premiere Pro 应用内教程 对应的工作区为 窗口 > 工作区 > Learni ...
最新文章
- 加速神经网络收敛的萃取精馏权重法
- [html] xml与html有什么区别？
- 【转】AB实验设计思路及实验落地
- 过了一会的gduuu
- 重磅！阿里宣布成立芯片公司，“平头哥”能解决中国的“无芯之痛”吗？
- C++之关键字:override
- acm竞赛java很少_ACM比赛中JAVA的应用
- 一图搞懂华三MVRP的配置与作用
- Big day coming...
- vb.net加密解密方法
- InfoPath基础应用教程-1 设计一个简单的表单模板
- 二、图的遍历——深度优先遍历
- python音频处理（持续更新）
- java较全的面试题
- 四核64位处理器,MIMX8MQ5DVAJZAB 满足智能设备应用
- 携程2020算法校园招聘笔试
- 时光里，我们都是赶路人
- 微信小程序-灰度发布
- exit abort return 区别
- jdbc shadring 扩容_shadring-jdbc解决查询数据库分库分表的问题