GoJS创建网格图案

最新推荐文章于 2023-05-10 15:56:52 发布
最新推荐文章于 2023-05-10 15:56:52 发布
阅读量908 收藏 2
点赞数
分类专栏： 图表 文章标签： 数据可视化 可视化 java c语言 python
原文链接：https://www.evget.com/article/2020/08/13/37562.html
版权

通常要显示以规则间隔绘制的线条网格。您可能还需要强制将拖动的零件在网格点上对齐，并将零件的大小调整为网格像元大小的倍数。

网格是使用Panel，Panel，Grid的类型实现的。与大多数其他类型的面板一样，网格面板可以在Node或任何其他类型的Part中使用。但是，当将它们用作Diagram.grid时，它们的范围实际上是无限的。
与其他面板不同，网格面板元素必须是Shape，仅用于控制绘制网格线或网格条的方式。

默认网格

要在图的背景中显示网格图案，只需使Diagram.grid可见即可：

diagram.grid.visible = true ;

diagram.nodeTemplate =
$（go.Node，“ Auto”，
$（go.Shape，“ Rectangle”，{ fill：“ lightgray” }），
$（go.TextBlock，{ margin：5 }，
new go.Binding（“ text”，“ key”））
）;
var nodeDataArray = [
{ key：“ Alpha” }，{ key：“ Beta” }，{ key：“ Gamma” }
];diagram.model
= new go.GraphLinksModel（nodeDataArray）;

在这里插入图片描述

网格捕捉

如果将DraggingTool.isGridSnapEnabled和/或ResizingTool.isGridSnapEnabled属性设置为true ，DraggingTool和ResizingTool可以根据背景网格图案更改其行为。

将DraggingTool.isGridSnapEnabled 设置为true不会影响断开的链接，但是如果您在链接模板上定义了自定义的Part.dragComputation可以将其断开。

diagram.grid.visible = true ;
diagram.toolManager.draggingTool.isGridSnapEnabled = true ;
diagram.toolManager.resizingTool.isGridSnapEnabled = true ;

diagram.nodeTemplate =
$（go.Node，“ Auto”，
{ resizable：true }，
$（go.Shape，“ Rectangle”，{ fill：“ lightgray” }），
$（go.TextBlock，{ margin：5 }，
new go.Binding（“ text”，“ key”））
）;
var nodeDataArray = [
{ key：“ Alpha” }，{ key：“ Beta” }，{ key：“ Gamma” }
];diagram.model
= new go.GraphLinksModel（nodeDataArray）;

简单的网格定制

您可以通过设置Panel.gridCellSize来更改网格单元的大小：

diagram.grid.visible = true ;
diagram.grid.gridCellSize = 新 go.Size（30，20）;
diagram.toolManager.draggingTool.isGridSnapEnabled = true ;
diagram.toolManager.resizingTool.isGridSnapEnabled = true ;

diagram.nodeTemplate =
$（go.Node，“ Auto”，
{ resizable：true }，
$（go.Shape，“ Rectangle”，{ fill：“ lightgray” }），
$（go.TextBlock，{ margin：5 }，
new go.Binding（“ text”，“ key”））
）;
var nodeDataArray = [
{ key：“ Alpha” }，{ key：“ Beta” }，{ key：“ Gamma” }
];diagram.model
= new go.GraphLinksModel（nodeDataArray）;
在拖动过程中捕捉零件位置时使用的像元大小不必与背景网格的像元大小完全相同。值DraggingTool.gridSnapCellSize优先于Panel.gridCellSize。请注意，如果DraggingTool.gridSnapCellSize设置，但ResizingTool.cellSize不是，零部件将调整时所使用的DraggingTool.gridSnapCellSize值。
diagram.grid.visible = true ;
diagram.toolManager.draggingTool.isGridSnapEnabled = true ;
diagram.toolManager.resizingTool.isGridSnapEnabled = true ;

//捕捉到每隔一个点垂直和水平
//（默认背景网格具有10×10的单元尺寸）
diagram.toolManager.draggingTool.gridSnapCellSize = 新 go.Size（20，20）;

diagram.nodeTemplate =
$（go.Node，“ Auto”，
{ resizable：true }，
$（go.Shape，“ Rectangle”，{ fill：“ lightgray” }），
$（go.TextBlock，{ margin：5 }，
new go.Binding（“ text”，“ key”））
）;
var nodeDataArray = [
{ key：“ Alpha” }，{ key：“ Beta” }，{ key：“ Gamma” }
];diagram.model
= new go.GraphLinksModel（nodeDataArray）;

自定义网格

当Panel类的Panel.type为时， 网格模式由Panel类实现面板网格。网格面板的元素必须是Shape，其Shape.figure是一小套已知种类的图形之一。它只能接受的数字是：“ LineH”，“ LineV”，“ BarH”和“ BarV”。这两个“线”图形导致将网格单元分开的描边线。这两个“条形图”图形在网格单元中产生填充的矩形。
这是由蓝色水平线和绿色垂直线组成的简单网格：

diagram.grid =
$(go.Panel, go.Panel.Grid, // or “Grid”
{ gridCellSize: new go.Size(25, 25) },
$(go.Shape, “LineH”, { stroke: “blue” }),
$(go.Shape, “LineV”, { stroke: “green” })
);

在这里插入图片描述

该Shape.interval属性也使用由网格面板，以确定线的具体频繁应当制定。该值应为正整数，指定此特定线的图形之间有多少个像元。因此，如果您想要每五个单元格深蓝色和深绿色线条：
diagram.grid =
$(go.Panel, “Grid”,
{ gridCellSize: new go.Size(10, 10) },
$(go.Shape, “LineH”, { stroke: “lightblue” }),
$(go.Shape, “LineV”, { stroke: “lightgreen” }),
$(go.Shape, “LineH”, { stroke: “blue”, interval: 5 }),
$(go.Shape, “LineV”, { stroke: “green”, interval: 5 })
);

diagram.nodeTemplate =
$(go.Node, “Auto”,
{ resizable: true },
$(go.Shape, “Rectangle”, { fill: “lightgray” }),
$(go.TextBlock, { margin: 5},
new go.Binding(“text”, “key”))
);
var nodeDataArray = [
{ key: “Alpha” }
];
diagram.model = new go.GraphLinksModel(nodeDataArray);
在这里插入图片描述

请注意，这些形状是按照它们在面板中出现的顺序绘制的，因此您可以看到，深蓝色水平线绘制在浅绿色垂直线的前面，深绿色垂直线交叉在图形的前面。深蓝色的水平线。
这是预定义的Diagram.grid的定义：

diagram.grid =
$(go.Panel, “Grid”,
{
name: “GRID”,
visible: false,
gridCellSize: new go.Size(10, 10),
gridOrigin: new go.Point(0, 0)
},
$(go.Shape, “LineH”, { stroke: “lightgray”, strokeWidth: 0.5, interval: 1 }),
$(go.Shape, “LineH”, { stroke: “gray”, strokeWidth: 0.5, interval: 5 }),
$(go.Shape, “LineH”, { stroke: “gray”, strokeWidth: 1.0, interval: 10 }),
$(go.Shape, “LineV”, { stroke: “lightgray”, strokeWidth: 0.5, interval: 1 }),
$(go.Shape, “LineV”, { stroke: “gray”, strokeWidth: 0.5, interval: 5 }),
$(go.Shape, “LineV”, { stroke: “gray”, strokeWidth: 1.0, interval: 10 })
);

diagram.grid.visible = true; // so that this example shows the standard grid
diagram.div.style.background = “white”;
您可以使用“ BarH”图获得绿条图案。注意使用Shape.fill 而不是Shape.stroke并显式设置GraphObject.height：

diagram.grid =
$(go.Panel, “Grid”,
{ gridCellSize: new go.Size(50, 50) },
$(go.Shape, “BarH”, { fill: “lightgreen”, interval: 2, height: 50 })
);

diagram.nodeTemplate =
$(go.Node, “Auto”,
{
dragComputation: function(node, pt, gridpt) {
pt.y = Math.round(pt.y/100)*100;
return pt;
}
},
$(go.Shape, “Rectangle”, { fill: “lightgray” }),
$(go.TextBlock, { margin: 5},
new go.Binding(“text”, “key”))
);
var nodeDataArray = [
{ key: “Alpha” }
在这里插入图片描述

此示例还演示了如何使用Part.dragComputation属性来自定义用户可以将节点拖到何处。在这种情况下，Part.location .y限制为100的倍数，对应于绿色条填充的单元格行。
要获得桌布效果，可以同时使用具有半透明颜色的垂直条和水平条：

diagram.grid =
$(go.Panel, “Grid”,
{ gridCellSize: new go.Size(100, 100) },
$(go.Shape, “BarV”, { fill: “rgba(255,0,0,0.1)”, width: 50 }),
$(go.Shape, “BarH”, { fill: “rgba(255,0,0,0.1)”, height: 50 })
);

diagram.toolManager.draggingTool.isGridSnapEnabled = true;

diagram.nodeTemplate =
$(go.Node, “Auto”,
{ width: 50, height: 50 },
$(go.Shape, “Rectangle”, { fill: “lightgray” }),
$(go.TextBlock, { margin: 5},
new go.Binding(“text”, “key”))
);
var nodeDataArray = [
{ key: “Alpha” }
];
diagram.model = new go.GraphLinksModel(nodeDataArray);
在这里插入图片描述

本示例通过将DraggingTool.isGridSnapEnabled设置为true来限制所有节点的拖动。
这是一个使用“网格” 面板作为Node中常规数据绑定元素的示例：
diagram.nodeTemplate =
$(go.Node, “Auto”,
{ resizable: true, resizeObjectName: “GRID” },
$(go.Shape, “Rectangle”, { fill: “transparent” }),
$(go.Panel, “Grid”,
{ name: “GRID”, desiredSize: new go.Size(100, 100), gridCellSize: new go.Size(20, 20) },
new go.Binding(“desiredSize”, “size”, go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding(“gridCellSize”, “cell”, go.Size.parse).makeTwoWay(go.Size.stringify),
$(go.Shape, “LineV”,
new go.Binding(“stroke”)),
$(go.Shape, “LineH”,
new go.Binding(“stroke”))
));

diagram.model = new go.GraphLinksModel([
{ key: “Alpha”, cell: “25 25”, stroke: “lightgreen” },
{ key: “Beta”, size: “150 75”, cell: “15 30” }
]);
在这里插入图片描述

其他注意事项

background如果需要选择 网格面板，则它应该为非空。不能设置或绑定网格面板的Panel.itemArray。

形状上的事件将被忽略。网格面板中的形状不能缩放或旋转。

RoffeyYang
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 SVG网格六边形图案特效
06-24
CSS3 SVG网格六边形图案特效是一款透明的六边形网格串联布局，六边形图案缩放动画特效。
网格六边形图案svg特效
06-01
基于css3 svg绘制透明的六边形网格串联布局，六边形图案缩放动画特效。支持自定义背景颜色，矢量六边形图案背景特效。
【go.js 常用api管理】
weixin_46497861的博客
09-29 2024
GO.JS常用api
关于GoJs的总结及多功能实例
weixin_41622181的博客
07-18 3477
项目需要用到GoJs实现可视化，先说一下需求吧 1、实现可拖拽新建节点 2、点击节点可修改保存节点信息 3、可以手动新建节点之间的连线 4、点击连线可修改保存连线信息 5、节点鼠标右键菜单 网上的都是零零碎碎的，查了很多文档然后终于实现了上述的所有功能... 废话不多说，直接上代码： <!DOCTYPE html> <html> <head...
gojs树以及伸缩功能的实现(react)
qq_28013889的博客
07-14 3093
一、树的展示 展示效果： 代码： export default class indexTree extends Component { static propTypes = {}; constructor(props) { super(props); this.diagramRef = React.createRef(); this.state = { nodeDataArray: [
GoJS学习-模型与模板
AsuraSylar的博客
08-13 353
实现节点外观与节点数据分离的一种方法是使用数据模型和节点模板。 模型基本上只是一个数据集合，其中包含每个节点和每个链接的基本信息。 模板基本上只是一个可以复制的部分。您将为Node和Link具有不同的模板。 实际上，已经具有非常简单的节点和链接默认模板。如果要自定义图中节点的外观，可以通过设置Diagram.nodeTemplate来替换默认节点模板。 要自动使用模板，请为该图提供一个模...
Gojs实现工业流程
weixin_45884508的博客
05-10 455
在gojs加了一些修改。
gojs-chinese:gojs中文文档
05-08
使用模型数据绑定使用React的GoJ Angular的GoJ 文字区块形状图片面板桌子面板毛刷调整对象大小项目数组变更事件交易次数座标初始视图馆藏...网格图案分级面板图表图像SVG图印刷服务器端图像Node.js中的GoJS 贮存表现...
Web 框架 - gojs入门学习
lin_fightin的博客
09-09 644
gojs是一个可以用于快速构建交互式图表的 Web 框架 引入cdn <script src="https://unpkg.com/gojs/release/go-debug.js"></script> 基本使用 创建一个容器 <!-- 图形的容器 div 需要明确指定大小，否则无法显示，本例子中我们还给该 DIV 添加了一个背景颜色，可以很方便的查看其大小。 --> <div id="myDiagramDiv" style="width:600px;
gojs的应用
JHLIN的博客
01-27 1844
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;整体能源结构图&lt;/title&gt; &lt;%@ page contentType="text/html;charset=UTF-8"%&gt; &lt;meta name="renderer" content=&quot
GoJS炫酷的流程图效果
热门推荐
书生的博客
12-26 1万+
最近公司要用到知识图谱，所以需要一个类似于流程图的UI来与后台交互，能够方便客户使用。 非常感谢懒得安分写的博客，给了我很大的帮助。 原文地址 http://www.cnblogs.com/landeanfen/p/7910530.html为什么我要转载呢？ 因为我怕哪天博主把帖子删了。。。。 写在前面：我只是为了记代码，所以建议你们去看原文。。。一、初次接触 GoJS简介 GoJS是一
GoJS教程：图布局
xiaochuachua的博客
02-11 3254
下载GoJS最新版本 图布局 正如您所看到的，TreeModel会自动创建必要的链接以关联节点，但很难分辨谁是谁。 图表具有默认布局，该布局采用没有位置的所有节点并为其提供位置，并将它们排列在网格中。我们可以明确地为每个节点提供一个位置来理清这个组织混乱，但作为一个更简单的解决方案，我们将使用一个自动为我们提供良好位置的布局。 我们想要显示层次结构，并且已经在使用TreeModel，因此最...
gojs常用API-画布操作
pdw2009的专栏
10-09 7346
画布 获取当前画布的json myDiagram.model.toJson(); 加载json刷新画布 myDiagram.model = go.Model.fromJson(model); 删除选中节点或线 myDiagram.commandHandler.deleteSelection(); 获取选中的节点或线 myDiagram.selecti...
GoJS 初探
晓风揽月
11-04 2511
GoJS 是什么 GoJS是一个功能丰富的js库，用于在浏览器上实现自定义交互式图表和复杂的可视化图表。 GoJS通过可自定义的模板和布局构建复杂节点，链接和组，绘制js图表。 GoJS为用户交互提供了许多高级功能，如拖放，复制和粘贴，文本编辑，工具提示，上下文菜单，自动布局，数据绑定和模型，事务状态和撤销管理，事件处理程序，命令以及用于自定义操作的可扩展工具系统等等。 为什么使用GoJS 为了更直观地表达信息，我们常常需要用图形来展示数据以及逻辑关系，例如最常见的架构图、ER图、流程图、BP.
JavaScript图表图形框架 -- GOJS简介
小飞侠的博客
01-18 4381
gojs是一个能够让我们很容易的实现基于html5浏览器绘制具有交互性的图形图表的JavaScript框架。 gojs采用了面向对象的编程模式。以图形对象表示绘图模板。以用普通js对象存储数据作为数据模型，然后赋值给图形对象的属性作为数据绑定的模式。 gojs同样提供了大量工具类来代表我们的交互行为。我们需要做的就是创建图形对象、构建数据模型、设置属性、绑定数据模型、使用工具类添加行为即可创建 出
GoJS 绘图 (八) ：模型和模版
weixin_34211761的博客
06-06 195
使用模版构视图 让我们尝试建立两个节点，将它们与一个链接连接。下面是这样做的一种方式： var node1 = g( go.Node, 'Auto', g( go.Shape, { fill: '#493' } ), g( ...
gojs动态设置线条颜色及线条上面可写文字。
陈焕君的博客
05-29 1万+
先贴图，下图有两种方式设置线条颜色，一种是自定义linkDataArray数据属性来定义线条颜色，另一种是通过linkDataArray 中设置color来设置线条颜色并通过text属性来设置线条上的文字第一种设置线条颜色的方法（自定义属性"category":"auditedLineColor"，在linkDataArray中添加这个熟悉即可设置，下面是写死的红色（red）可自行配置其它颜色同时...
gojs 图表(Diagram)布局
pdw2009的专栏
10-09 5373
正如你可以看到的，TreeModel自动创建需要的节点间的链接，但是它很难确定谁的父节点是谁。 图表(Diagram)有一个缺省布局会管理那些没有具体位置的节点，会自动分配一个位置。我们可以显示的给每个节点分配一个位置来给组织排序，但是在我们的例子中一个更容易的解决方案是，我们会使用布局来自动排列位置。 我们想要来显示一个层级，而且已经用了TreeModel，因此最自然的方式是使用TreeLay...
GoJS入门笔记（1）
weixin_33774308的博客
12-18 275
GoJS能干什么，废话不多说，进传送门看看。传送门 第一步：Hello World! <html> <head> <!-- 引用GoJS --> <script src="go-debug.js"></script> </head> <bo...
我要创建网格scene
最新发布
05-18
好的，如果你想创建网格场景，你可以使用Unity引擎中的内置网格工具。以下是一些基本步骤： 1. 打开Unity并创建一个新场景。 2. 在场景中创建一个空对象，命名为“Grid”。 3. 在Inspector视图中，单击“Add Component”按钮，搜索并添加“Grid”组件。 4. 在“Grid”组件中，您可以设置网格的大小、间距和颜色等属性。 5. 创建您想要在网格上呈现的对象，并将它们放置在场景中。 6. 将这些对象调整到网格的大小和间距，以便它们对齐到网格上。 7. 如果您需要更多的控制，您可以使用Unity的编程功能来自定义您的网格。 希望这些步骤能帮助您创建您需要的网格场景！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值