GoJS起步

1. 基础示例

// 给make这个主要函数起别名,方便使用

var $ = go.GraphObject.make;

// nodeTemplate定义一个节点模版,节点按照此模版生成

diagram.nodeTemplate =

  $(go.Node, "Auto",  // Auto代表节点形状自适应文本内容

    $(go.Shape, "RoundedRectangle",  // RoundedRectangle代表节点形状是圆角矩形

      // 将Shape.fill 与 Node.data.color属性绑定

      new go.Binding("fill", "color")),

    $(go.TextBlock,

      { margin: 3 },  // 设置文本块的样式,外边距为3

      // 绑定TextBlock.text 与 Node.data.key属性

      new go.Binding("text", "key"))

  );

// 图中要展示的数据,将其赋给diagram.model

diagram.model = new go.GraphLinksModel(

[ // 一个由对象组成的数组,每个对象代表一个节点

  // 注意color属性适合图中什么绑定的

  { key: "Alpha", color: "lightblue" },

  { key: "Beta", color: "orange" },

  { key: "Gamma", color: "lightgreen" },

  { key: "Delta", color: "pink" }

],

[ // 一个对象代表一个连线

  { from: "Alpha", to: "Beta" },

  { from: "Alpha", to: "Gamma" },

  { from: "Beta", to: "Beta" },

  { from: "Gamma", to: "Delta" },

  { from: "Delta", to: "Alpha" }

]);

// 允许使用撤销和撤销重做功能

diagram.undoManager.isEnabled = true;

2. GoJS主要组成类

“图”是Diagram对象,由“部分”(Part对象)组成。Part对象可以包括节点(Node对象)、连接线(Link对象)和分组(Group对象),所有这些部分都聚集在“图层”(Layer对象)中,并按照“布局”(Layout对象)排列。

每个Diagram都有Model属性,Model属性保存图中节点和连线、组的数据。GoJS会按照Model.nodeDataArray属性创建节点数组,按照GraphLinksModel.linkDataArray属性创建连线。(GraphLinksModel是Model的子类)。

Tools类处理鼠标、键盘事件,ToolManager决定哪个tool运行,CommandHandler类实现各种命令如删除、复制、撤销等。Overview类提供全局概览,Palette类控制一个部分,在这个部分中可以定义一些图形,用户可以拖入图中。Adornment类控制一些效果,比如选中效果。

3. 创建一个图

  1. 引入gojs
  2. import * as go from "gojs"
  3. 准备一个div节点设置id
  4. 准备数据如下:

Var Diagram = new go.Diagram(“刚刚设置的id”)

Diagram.model = new go.GraphLinkModel(

[{key: “Hello”}, {key: “World!”}], // 定义两个节点

[{from: “Hello”, to: “World!”}] // 定义一条连线

);

效果:

原文地址:GoJS 图形组件简介 | GoJS

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值