GoJS 使用笔记

最新推荐文章于 2024-02-15 00:09:46 发布

VIP文章 xuhss_com

最新推荐文章于 2024-02-15 00:09:46 发布

阅读量1.8k

点赞数 2

分类专栏： 11 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/xuhss_com/article/details/123086834

版权

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475
作为商业软件，GoJs很容易使用，文档也很完备，不过项目中没有时间系统地按照文档学习，总是希望快速入门使用，所以将项目中遇到的问题精简一下，希望对后来者有些帮助。

开始使用

这里先展示一个最简单的例子，说明GoJs的使用。

html> 
<html>

<head>
    <script src="https://unpkg.com/gojs/release/go-debug.js">script>
head>

<body>
    <div id="myDiagramDiv" style="width:1200px; height:850px; background-color: #DAE4E4;">div>
    <script>
 var $ = go.GraphObject.make;

 myDiagram =
 $(go.Diagram, "myDiagramDiv",
 {
 "undoManager.isEnabled": true
 });

 myDiagram.add(
 $(go.Node, "Auto",
 $(go.Shape, "RoundedRectangle",
 {
 fill: $(go.Brush, "Linear",
 { 0.0: "Violet", 1.0: "Lavender" })
 }),
 $(go.TextBlock, "测试文本!",
 { margin: 5 }),
 $("Button", {
 alignment: go.Spot.Right,
 alignmentFocus: go.Spot.Left,
 click: function(e,obj){ console.log(e); console.log(obj);alert(obj);}
 },
 $(go.TextBlock, "+", // the Button content
 { font: "bold 8pt sans-serif" }))
 ));

 script>
body>

html>

首先是引用GoJs库，可以有多个途径下载，可以通过npm，nuget等包管理工具，也可以直接下载。我们这里使用unpkg的引用。
然后就是使用 go.GraphObject.make创建图形和图形中的元素。这里先将 go.GraphObject.make简化定义为 $，方便代码的编写与阅读，注意这不是必须的，也可以使用$ $或者其它简化方式。结果如下：

这里的关键是go.GraphObject.make的使用，下面重点介绍这个函数。

使用go.GraphObject.make创建对象

一个图形可以看做由节点和连线组成，在GoJs中，图形元素是GraphObject࿰

最低0.47元/天解锁文章

xuhss_com

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
GoJS 使用笔记

Python微信订餐小程序课程视频https://edu.csdn.net/course/detail/36074Python实战量化交易理财系统https://edu.csdn.net/course/detail/35475作为商业软件，GoJs很容易使用，文档也很完备，不过项目中没有时间系统地按照文档学习，总是希望快速入门使用，所以将项目中遇到的问题精简一下，希望对后来者有些帮助。开始使用这里先展示一个最简单的例子，说明GoJs的使用。html> <html>&lt
复制链接

扫一扫