文档章节

GoJS教程[2019]:使用GraphObjects构建零件

x
 xiaochuachua
发布于 06/03 14:19
字数 1687
阅读 39
收藏 0

下载GoJS最新版本

    您可以在传统的JavaScript代码中构造Node或其他类型的Part。 GoJS还提供了一种更具声明性的构建部件方式,与代码相比具有多个优势。

    本文将讨论可用于构建节点的基本对象类型。这些页面通过显式创建和添加节点和链接来构建图表。后面的页面将展示如何使用模型而不是使用此类代码来构建图表。

节点和链接的可视化结构

    首先,查看包含有关用于构建一些示例节点和链接的GraphObject的注释的图表:

Visual Paradigm

    如您所见,节点或链接可以由许多GraphObject组成,包括可以嵌套的Panel。您可以拖动任何注释,以便在注释链接的末尾看到GraphObject所覆盖的区域,但链接本身中的GraphObjects除外。

用代码构建

    GraphObject是可以被构造和任何其他对象以相同的方式初始化的JavaScript对象。一个节点是一个GraphObject包含GraphObject S,从而为TextBlock的 S,形状 S, 图片 s和面板 s表示可能还包含更多GraphObjects。

    一个非常简单的Node可能包含Shape和TextBlock。您可以使用以下代码构建GraphObjects的这种可视化树:

var node = new go.Node(go.Panel.Auto);  var shape = new go.Shape();
  shape.figure = "RoundedRectangle";
  shape.fill = "lightblue";
  node.add(shape);  var textblock = new go.TextBlock();
  textblock.text = "Hello!";
  textblock.margin = 5;
  node.add(textblock);
  diagram.add(node);

Visual Paradigm

    虽然以这种方式构建节点将起作用,但随着节点变得更复杂,代码将变得更加复杂以便阅读和维护。幸运的是,GoJS有更好的方法从GraphObjects制作零件。

此外,后面的部分将讨论如何使用模型,模板和数据绑定自动创建节点和链接。在此之前,这些页面将显式创建节点并直接将它们添加到Diagrams。

使用GraphObject.make构建

    GoJS定义了一个静态函数GraphObject.make,它在构造GraphObjects时非常有用,而不必考虑和跟踪临时变量名。此静态函数还支持以嵌套方式构建对象,其中缩进为您提供有关可视树中深度的线索,与上面显示的简单线性代码不同。

    GraphObject.make是一个函数,其第一个参数必须是类类型,通常是GraphObject的子类。

    GraphObject.make的 其他参数可能有以下几种类型:

  • 具有属性/值对的纯JavaScript对象 - 在要构造的对象上设置这些属性值
  • 一个GraphObject,作为元素添加到正在构造的Panel中
  • 一个GoJS枚举值常量,用作可以接受这样一个值的正在构造的对象的唯一属性的值
  • 一个字符串,用于设置正在构造的对象的TextBlock.text,Shape.figure,Picture.source或Panel.type属性
  • 一个RowColumnDefinition,用于描述在表的行或列面板小号
  • 一个JavaScript数组,保存GraphObject.make的参数,在从函数返回多个参数时很有用
  • 以适当方式用于正在构造的对象的其他专用对象

    我们可以使用go.GraphObject.make重写上面的代码,以产生完全相同的结果:

 var $ = go.GraphObject.make;
  diagram.add(
    $(go.Node, go.Panel.Auto,
      $(go.Shape,
        { figure: "RoundedRectangle",          fill: "lightblue" }),
      $(go.TextBlock,
        { text: "Hello!",          margin: 5 })
    ));

Visual Paradigm

    通过使用字符串参数可以简化这一点:

Visual Paradigm

var $ = go.GraphObject.make;
  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, "Hello!", { margin: 5 })
    ));

Visual Paradigm

    注意我们如何通过使用字符串值来设置Panel.type,Shape.figure和TextBlock.text属性。

    使用$作为go.GraphObject.make的缩写是非常方便的,我们将从现在开始使用它。将go.GraphObject.make调用最小化为单个字符有助于消除代码中的混乱,并使缩进与正在构造的可视树中的GraphObject的嵌套匹配 。

    其他一些JavaScript库自动将“$”定义为一个方便的类型函数名称,假设它们是唯一重要的库。但是,当然,你不能让同一个符号在同一范围内同时具有两种不同的含义。因此,您可能希望在使用GoJS时选择使用其他短名称,例如“$$”或“GO” 。该GoJS文档和示例使用“$”,因为它使生成的代码最清楚。

    使用GraphObject.make的另一个好处是,它将确保您设置的任何属性都是类的定义属性。如果属性名称中有拼写错误,则会抛出错误,您可以在控制台日志中看到一条消息。

    GraphObject.make也可用于构建除继承自GraphObject的GoJS类之外的GoJS类。下面是使用go.GraphObject.make构建Brush 而不是GraphObject子类的示例。

diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: $(go.Brush, "Linear",
                  { 0.0: "Violet", 1.0: "Lavender" }) }),
      $(go.TextBlock, "Hello!",
        { margin: 5 })
    ));

Visual Paradigm

    使用GraphObject.make构建Diagram也很常见。在这样的用法中,字符串参数(如果提供的话必须是第二个参数)将命名图应该使用的DIV HTML元素。等效地,您可以将对DIV元素的直接引用作为第二个参数传递。

    此外,在图表上设置属性时,您可以使用属性名称,这些属性名称由两个以句点分隔的标识符组成。句点之前的名称用作图表或Diagram.toolManager上的属性名称,该图表返回要设置其属性的对象。句点后面的名称是设置的属性的名称。请注意,由于存在嵌入的句点,因此JavaScript属性语法要求您使用引号。

    您还可以声明DiagramEvent听众,仿佛呼唤Diagram.addDiagramListener,假装设置图表属性,它实际上是一个DiagramEvent的名称。因为所有DiagramEvent都具有大写的名称,所以名称不会与任何Diagram属性名称冲突。

    以下是GraphObject.make用于构建图表的适度广泛用法:

var myDiagram =
    $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
      {
        // don't initialize some properties until after a new model has been loaded
        "InitialLayoutCompleted": loadDiagramProperties,  // a DiagramEvent listener

        // have mouse wheel events zoom in and out instead of scroll up and down
        "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,

        // specify a data object to copy for each new Node that is created by clicking
        "clickCreatingTool.archetypeNodeData": { text: "new node" }
      });

  // the DiagramEvent listener for "InitialLayoutCompleted"
  function loadDiagramProperties(e) { . . . }

    使用GraphObject.make进行的所有这些初始化仍然是JavaScript代码,因此我们可以调用函数并轻松共享诸如画笔之类的对象:

var violetbrush = $(go.Brush, "Linear", { 0.0: "Violet", 1.0: "Lavender" });

  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: violetbrush }),
      $(go.TextBlock, "Hello!",
        { margin: 5 })
    ));

  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "Ellipse",
        { fill: violetbrush }),
      $(go.TextBlock, "Goodbye!",
        { margin: 5 })
    ));

GoJS

    可以共享Brush es和Geometry对象,但可能不共享GraphObject。

本文转载自:https://gojs.net/latest/intro/buildingObjects.html#BuildingWithMake

x
粉丝 0
博文 225
码字总数 49214
作品 0
私信 提问
html5在线画图工具与angular结合

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

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

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

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

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

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

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

木子七
2018/05/25
0
0
在线画图工具(gojs开发)功能增强

需求描述: 想找一个熟悉gojs库的工程师,来完成我们要的功能。我们现在已经实现了大部分功能,demo在这里www.365trtd.net.有些功能需要找人帮忙实现。 要实现的功能: 1)弧线的调节优化。现...

zhenyuan2015
2016/04/26
134
0

没有更多内容

加载失败,请刷新页面

加载更多

js如何控制table中的某一行动态置顶

两行代码搞定: $('#'+item.roadCode).fadeOut().fadeIn();//获取到需要置顶的行 $(".table").prepend($('#'+item.roadCode)); 其中,fadeOut()方法 作用 --- 从可见到隐藏 如下: prepend(......

码妞
54分钟前
3
0
四种解决Nginx出现403 forbidden 报错的方法

我是在在本地用虚拟机中通过yum安装nginx的,安装一切正常,但是访问时报403, 于是查看nginx日志,路径为/var/log/nginx/error.log。打开日志发现报错Permission denied,详细报错如下: 1....

dragon_tech
今天
3
0
获取RestResultResponse返回的值

Springboot项目,需要调其他服务的接口,返回值类型是RestResultResponse 打断点的结果集是这个 打印出来的getData(): [{id=3336b624-8474-4dd9-bd5b-c7358687c877, paraNo=104, para=Postpo...

栾小糖
今天
4
0
【小学】 生成10以内的加减法

#!/usr/bin/env python# coding: utf-8from random import randrange# 题目的最大数值R_MAX = 10# 生成的题目的数量R_PAGE = 70# 生成减法列表def get_sub_list():...

Tensor丨思悟
今天
11
0
JavaScript设计模式——适配器模式

  适配器模式是设计模式行为型模式中的一种模式;   定义:   适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改;适配器不需要修...

有梦想的咸鱼前端
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部