文档章节

GoJS教程:链接模版

x
 xiaochuachua
发布于 02/14 10:05
字数 505
阅读 0
收藏 0

下载GoJS最新版本

链接模板

我们将构建一个新的链接模板,以更好地适应我们广泛的节点。一个链接是一种不同的部分,而不是像一个节点。Link的主要元素是Link的形状,并且必须是一个由GoJS动态计算其几何形状的Shape。我们的链接将仅由这种形状组成,其笔划比正常情况稍厚,而深灰色则不是黑色。与默认链接模板不同,我们没有箭头。我们将链接routing属性从“正常” 更改为“正交”,并为其赋予一个corner值,以便对角度进行舍入。

// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
  $(go.Link,
    // default routing is go.Link.Normal
    // default corner is 0
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape, { strokeWidth: 3, stroke: "#555" }) // the link shape

    // if we wanted an arrowhead we would also add another Shape with toArrow defined:
    // $(go.Shape, { toArrow: "Standard", stroke: null }
    );

将Link模板与Node模板,TreeModel和TreeLayout相结合,我们最终得到了完整的组织图。下面重复完整的代码,结果图如下:

var $ = go.GraphObject.make;

var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
      layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                { angle: 90, layerSpacing: 35 })
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#44CCFF" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shape

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;
      

GoJS

本文转载自:https://gojs.net/latest/learn/index.html

x
粉丝 0
博文 225
码字总数 49214
作品 0
私信 提问
GoJS教程[2019]:使用GraphObjects构建零件

下载GoJS最新版本 您可以在传统的JavaScript代码中构造Node或其他类型的Part。 GoJS还提供了一种更具声明性的构建部件方式,与代码相比具有多个优势。 本文将讨论可用于构建节点的基本对象类...

xiaochuachua
06/03
26
0
html5在线画图工具与angular结合

需求描述: 想找一个熟悉gojs库或者愿意学习使用这个库的工程师,来和我们一起开发在线画图的功能。我们现在已经实现了大部分功能,demo在这里www.365trtd.net.有些功能需要找人帮忙一起实现...

zhenyuan2015
2016/05/04
46
0
在线画图工具功能重构和优化

需求描述: 想找一个熟悉gojs库或者愿意学习使用这个库的工程师,来和我们一起开发在线画图的功能。我们现在已经实现了大部分功能,demo在这里www.365trtd.net.有些功能需要找人帮忙一起实现...

zhenyuan2015
2016/04/26
48
1
前端页面 gojs

gojs类似于Extjs,使用gojs实现卡片的拆分流程。可就是卡在添加panel这一步了。求各位gojs高手指点

lixia_1
2014/02/28
751
0
gojs 流程图框架-基础绘图(一)

gojs 是一款非常优秀的流程图绘制 js 框架, 该框架没有中文版 api, 并且网上可查阅的资料非常少, 本文旨在带领读者了解整个框架结构, 以及基本的绘制方法. 本文对技术细节不作过多描述, 并会...

木子七
2018/05/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

矩阵中的路径

判断在一个矩阵中是否存在一条包含某字符串所有字符的路径。路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向上下左右移动一个格子。如果一条路径经过了矩阵中的某一个格子,则该路...

Garphy
5分钟前
2
0
Hibernate 5 Maven 仓库的 Artifacts

Hibernate artifacts 官方发布的仓库在 JBoss Maven repository 中。Hibernate 发布的 artifacts 也会同时同步到 Maven Central 仓库中,这是一个自动同步进程(可能会有一些延迟)。 Hibern...

honeymoose
53分钟前
4
0
如何学习uni-app?

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序、H5等多个平台,保证其正确运行并达到优秀体验。 <templ...

达叔小生
57分钟前
5
0
OSChina 周一乱弹 —— 后来马云就一心想挣钱了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑:《空帆船》- 朴树 《空帆船》- 朴树 手机党少年们想听歌,请使劲儿戳(这里) @webw :第二次被锁在电梯里了 上次你忘带电梯卡, ...

小小编辑
今天
763
13
关于does not give a valid preprocessing token

#define VFUNC(self) ((##self##)->_vptr) 这样在gcc下会编译失败, VC不会 报pasting ) does not give a valid preprocessing token 据说是因为版本问题 解法:去掉## define VFUNC(self) (......

shzwork
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部