- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
go.Palette 是 GoJS 库中的一个组件,用于显示一组预定义的图形元素,用户可以从中选择并将其拖放到画布中。如果要在一排中显示两个 go.Palette, 。
一、可以使用 HTML 和 CSS 来控制它们的布局。使用display: inline-block 将 div 元素水平排列在同一行中 。
<style>
#palette1,
#palette2 {
display: inline-block;
width: 200px;
height: 300px;
border: 1px solid black;
margin-right: 20px;
}
</style>
<div id="palette1"></div>
<div id="palette2"></div>
<script>
var $ = go.GraphObject.make;
var palette1 = $(go.Palette, "palette1");
var palette2 = $(go.Palette, "palette2");
</script>
二、(建议)还可以使用gojs自带的属性,完成go.Palette 自定义 。
const myPalette = $(go.Palette, "myPaletteDiv", {
layout: $(go.GridLayout, {
alignment: go.GridLayout.Position,
wrappingColumn: 2,
cellSize: new go.Size(100, 0),
spacing: new go.Size(5, 5),
}),
});
<div id="myPaletteDiv"></div>
const myPalette = $(go.Palette, "myPaletteDiv", {
layout: $(go.GridLayout, {
alignment: go.GridLayout.Position,
cellSize: new go.Size(100, 0),
wrappingColumn: 2
})
nodeTemplate: myDiagram.nodeTemplate,
model: new go.GraphLinksModel([
{ key: "Alpha", text: "Alpha: Patron" },
{ key: "Beta", text: "Beta: Patron" },
{ key: "Gamma", text: "Gamma: Patron" },
]),
});
myPalette.groupTemplateMap.add('groupA', groupATemplate()) // 可以为多组
myPalette.model = new go.GraphLinksModel([ ]) // 属性可以直接写在对象里,也可以后续修复
主要是在节点上设置两个属性, 。
{
fromLinkableSelfNode: true,
toLinkableSelfNode: true,
}
可以使用 Group 类型的 groupTemplate 属性来设置不同的组模板。groupTemplate 属性可以接受一个函数,该函数返回一个 Group 类型的模板。 定义了两个不同的组模板,分别使用不同的颜色。使用时会默认读取分组名称。 groupTemplate 。
myDiagram.groupTemplateMap.add(
"Group1",
$(go.Group, "Auto", $(go.Shape, "Rectangle", { fill: "red" }))
);
myDiagram.groupTemplateMap.add(
"Group2",
$(go.Group, "Auto", $(go.Shape, "Rectangle", { fill: "green" }))
);
myDiagram.model.addNodeData({ key: 1, isGroup: true, category: "Group1" });
myDiagram.model.addNodeData({ key: 2, isGroup: true, category: "Group2" });
linkTemplate 。
myDiagram.linkTemplateMap.add(
"straight", // 直线连接
$(go.Link, $(go.Shape))
);
myDiagram.linkTemplateMap.add(
"curved", // 曲线连接
$(go.Link, { curve: go.Link.Bezier }, $(go.Shape))
);
myDiagram.model.addLinkData({ from: 1, to: 2, category: "straight" });
myDiagram.model.addLinkData({ from: 3, to: 4, category: "curved" });
也就是获取 右键点击的对象 。
myDiagram.addDiagramListener("ObjectContextClicked", function (e) {
var linkOrNode = myDiagram.findPartAt(e.diagram.firstInput.documentPoint);
if (linkOrNode instanceof go.Link) {
// TODO
}
if (linkOrNode instanceof go.Node) {
// TODO
}
});
可以结合 右键点击的对象,进行一些操作,对右键的对象,进行一些 contextMenu 中的操作 。
myDiagram = $(go.Diagram, "myDiagramDiv", {
contextMenu: createContextMenu(),
});
myDiagram.nodeTemplate.contextMenu = createContextMenu();
myDiagram.linkTemplate.contextMenu = createContextMenu();
function groupContextMenu() {
return $(
"ContextMenu",
"Vertical",
$(
"ContextMenuButton",
$(
go.Panel,
"Horizontal",
{
alignment: go.Spot.Left,
},
$(go.Picture, "图片src,如果不需要图片可删除", {
desiredSize: new go.Size(60, 30),
margin: new go.Margin(5, 5, 5, 10),
}),
$(go.TextBlock, "文本")
),
{
click: (event, obj) => {}, // 右键菜单面板点击事件
}
)
);
}
可以通过判断连线的起点和终点的位置来确定其方向。具体来说,可以通过比较起点和终点的 x 坐标来判断连线的方向,如果起点的 x 坐标小于终点的 x 坐标,则连线是从左向右的,反之则是从右向左的.
重写了insertLink方法,当用户在节点上开始拖动连线时,会调用该方法。在该方法中首先调用了go.LinkingTool.prototype.insertLink.call(this)来执行默认的连线操作,然后根据起点和终点的位置来设置连线的样式。如果起点的 x 坐标小于终点的 x 坐标,则将连线的颜色设置为绿色,否则将其设置为红色.
// 连线基本模板配置
myDiagram.linkTemplate = $(
MessageLink,
{ selectionAdorned: true, curviness: 0 },
$(go.Shape, "Rectangle", new go.Binding("stroke", "stroke").makeTwoWay()),
$(
go.Shape,
{ toArrow: "OpenTriangle" },
new go.Binding("stroke", "stroke").makeTwoWay()
)
);
// insertLink
go.LinkingTool.prototype.insertLink = function (
fromnode,
fromport,
tonode,
toport
) {
var newlink = go.LinkingTool.prototype.insertLink.call(
this,
fromnode,
fromport,
tonode,
toport
);
if (newlink !== null) {
var model = this.diagram.model;
if (fromnode.position.x < tonode.position.x) {
model.setDataProperty(newlink.data, "stroke", "green"); // 从左向右的连线
} else {
model.setDataProperty(newlink.data, "stroke", "red"); // 从左向右的连线
}
}
return newlink;
};
linkTemplate 是用于定义连接线的模板。而 routing 是用于定义连接线的路径的属性之一 。
如果没有设置 routing 属性,连接线的默认路径是 go.Link.Normal。表示连接线会直接从起点到终点的位置。这种路径适用于大多数情况,但在某些情况下可能需要更复杂的路径。 以下值 :
go.Link.Normal
:连接线会直接从起点到终点的位置。go.Link.JumpOver
:连接线会跳过节点,但可能会穿过其他连接线。go.Link.AvoidsNodes
:连接线会避开节点,但可能会穿过其他连接线。go.Link.Orthogonal
:连接线会沿着水平和垂直方向移动,直到到达目标节点的位置。在 gojs 中,可以通过重写go.DraggingTool.prototype.moveParts方法来实现移动时改变所有点的位置。具体实现步骤如下:
part.points
属性中。MessageDraggingTool.prototype.moveParts = function (parts, offset, check) {
go.DraggingTool.prototype.moveParts.call(this, parts, offset, check);
var it = parts.iterator;
while (it.next()) {
if (it.key instanceof go.Link) {
var link = it.key;
var path = link.path;
var points = path.part.points;
if (points.length == 3) {
// 表示直线
var startX = it.value.point.x;
var startY = it.value.point.y;
var x = startX + offset.x;
var y = startY + offset.y;
link.diagram.model.set(link.data, "表示连线定位的字段x", "当前位置x");
link.diagram.model.set(link.data, "表示连线定位的字段y", "当前位置y");
} else {
// 表示曲线
var pointArray: any = [];
for (var i = 0; i < points.length; i++) {
var point = points._dataArray[i];
pointArray.push(new go.Point(point.x + offset.x, point.y + offset.y));
}
path.part.points = pointArray;
}
}
}
};
最后此篇关于可视化—gojs超多超实用经验分享(三)的文章就讲到这里了,如果你想了解更多关于可视化—gojs超多超实用经验分享(三)的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
该篇文章与视频是早在ITPub发布的,如今同步过来,视频与文字都下方,大家可以选择方便方式进行阅读观看。 大家好,我是陈珙,今天我想跟大家聊聊技术人的核心竞争力问题。
PHP有很多关于数组的函数,方便数组操作。 定义: 数组每个实体包含两个项:key和value,可以通过查询键来获取其相应的值。这些键可以是数值(numerical)键或关联(associati
虽然如今我们建站很容易,通过很便宜的费用购买一台虚拟主机、一个域名,以及通过开源CMS程序就可以快速搭建一个属于自己的个人网站、企业网站。但是,真正成为站长不是只要搭建好网站就行了的,我们需要解决的
我对 Ruby 一无所知,但我对 DSL 很感兴趣。 DSL 似乎是你们社区的流行语。 您是否真的出于自己的目的在 Ruby 中实现了 DSL?如果是这样,他们有多复杂,有多专注? 我看过这个ques
当我查看 Google、Amazon 等公司的职位描述时,它们都需要 C++ 和 Linux/Unix 经验。有人可以定义这在工作资格方面通常意味着什么吗?我知道如何在 Linux 中浏览文件系统吗?
上一篇介绍了 Python 枚举类型的标准库,除了考虑到其实用性,还有一个重要的原因是其实现过程是一个非常好的学习、理解 Python 类与元类的例子。因此接下来两篇就以此为例,深入挖掘 Pyt
在linux系统下学习MySQL,第一道坎就是如何在linux下安装和配置mysql。这种一劳永逸的事,我们就有耐心的做好。 系统版本:ubuntu14.04 mysql版本:mys
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
在构建 Docker 镜像时,我发现自己处在一个陌生的地方——我觉得我正在做一些别人以前已经做过很多次的事情——而且做得更好。在大多数情况下,这种直觉是绝对正确的——我正在使用一个软件并在 Docke
我正在 Pygame 中开发一款射击类游戏供我自己娱乐,在创建玩家的基本 Action 的过程中我遇到了一些疑问,“Dash”和“Switch”均未按预期工作。 ... def switch(self
尝试对以下内容进行一些研究,但没有成功。我想我会在这里问,以防有人以前遇到过它。 我帮助一家志愿者运营的广播电台满足他们的技术需求。出现的主要问题之一是他们希望以编程方式安排广告。 有很多用于广告的简
我的组织正在考虑使用 PDFlib 在我们的 Java (Spring/Tomcat) 环境中动态创建 PDF 文件 ( http://www.pdflib.com/)。 有没有人可以分享关于这个库的
我正在考虑使用 TinyMCE 来处理我开发的网站上的文本框。我已经下载了生产版本。 起初,我将在截止日期前将它用于客户网站的后端,我需要它在一开始就开箱即用。以后我也喜欢自定义选项。 基本上,Tin
上一篇解决了通过调用类对象生成实例对象过程中可能遇到的命名空间相关的一些问题,这次我们向上回溯一层,看看类对象本身是如何产生的。 我们知道 type() 方法可以查看一个对象的类型,或者说
Guice 是一个很好的框架,可以将 API 与实现分离并开始模块化您的应用程序。 OSGi 是一个很好的框架,可以在他们自己的安全环境中加载版本化服务,并通过导出的 API 提供这些服务。 假设已经
我在一家从事网络托管的 IT 公司工作,而且我个人对 SQL 非常缺乏经验*。 *看起来很糟糕 我的一个客户正在尝试将 Epos 系统与其 magento 网站集成,在 Epos 集成过程中,他们遇到
想知道在 elasticsearch 中用于多语言索引和搜索的最佳实践或经验是什么。我通读了许多资源,并尽我所能提炼出可用的索引选项: 每种语言的单独索引; 多语言字段的多字段类型; 所有可能语言的单
有人对 PHP QuickHash (http://php.net/manual/en/book.quickhash.php) 有任何经验吗? 一些早期测试表明,大型数组的内存使用量有了很大改善。包含
初识博客园 我是08年开始接触开发的,一开始涉及的就是.net和java,记得那会好像是jar6来着,net嘛还是2.0 那时候包括现在,找资料很多时候会找到博客园来 一开始我以为博客园是很多博主成
自 9 月以来,我一直在使用 Clojure,这是一种 JVM 上的函数式 lisp 语言。我在几个小型爱好项目中使用了它。语言非常简洁、简单,但我得出的结论是,s 表达式并不适合我。 还有其他函数式
我是一名优秀的程序员,十分优秀!