Gojs学习笔记

最新推荐文章于 2025-04-12 23:08:13 发布

原创最新推荐文章于 2025-04-12 23:08:13 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

前端面包专栏收录该内容

6 篇文章

订阅专栏

本文档深入探讨GoJS库的使用，包括节点模板的创建，如圆形节点和表格结构的节点；连线的定制，如改变线型和添加标签；布局的设置，如使用ForceDirectedLayout；以及各种事件处理，如主动事件的节点比例调整，被动事件的节点颜色改变，右击事件和连线变换事件。通过实例代码和截图展示了每个功能的实现效果。

gojs官方文档
这篇文档所写的案例在Github上src/components/MyModal目录下，data.js是展示数据，gojs_js.js是程序所在文件，其他文件不用管他

文章目录

1.结点集

这里的结点不是gojs中的结点，而是表示一个整体的结点集合，表示的是myDiagram.nodeTemplate。

定义结点思路：
结点定义 -> 结点配置 -> 结点形状 -> 结点内容

例：

let circleTemplate = $(go.Node, "Auto",
        $(go.Shape, {strokeWidth: 0}, 'Circle',
            new go.Binding("fill", "color"))
        $(go.TextBlock, {margin: 8},
            new go.Binding("text", "key"))
    );

画布是一个结点的拓展用法，可以利用table结构容纳结点子集
例：

let itemTemplate = $(go.Panel, "Horizontal",    //水平对齐
    $(go.Shape,
        {width: 10, height: 10, margin: 2, strokeWidth: 1, stroke: "#333"},
        new go.Binding("figure", "figure"),
        new go.Binding("fill", "color")),
    $(go.TextBlock,
        new go.Binding("text", "name")));

let PanelTemplate = $(go.Node, "Auto",
    {
        fromSpot: go.Spot.AllSides,     //这两行是申明from与to结点的接口地点为全边，连线默认在各边中点
        toSpot: go.Spot.AllSides,
        isShadowed: true,               //结点阴影，好看
        shadowColor: "#eee",
        shadowOffset: new go.Point(5, 5)
    },
    $(go.Shape, "RoundedRectangle", {strokeWidth: 3, stroke: "#eee", fill: "white"}),
    $(go.Panel, "Table",                //申明一个table类型的画布
        $(go.TextBlock,
            {
                row: 0,
                margin: new go.Margin(5, 15, 5, 15)
            },
            new go.Binding("text", "key")),
        $("PanelExpanderButton", "list", {row: 0, alignment: go.Spot.Right}),   //设计一个按钮，功能PanelExpand，设计对象名称为list
        $(go.Panel, "Vertical",
            {
                name: "list",       //申明画布名称为list，与PanelExpanderButton对应
                row: 1,
                defaultAlignment: go.Spot.Left,
                itemTemplate: itemTemplate  //子画布模版申明
            },
            new go.Binding("itemArray", "items")
        ))
);

画出来的是这样：

2.连线

默认线如上图，什么都没有定义的效果

设计结果如下：

源码：

let PanelLinkTemplate = $(go.Link,
    {
        selectionAdorned: true,
        layerName: "Foreground",
        routing: go.Link.AvoidsNodes,    //更改水平垂直方向线
        corner: 5,      //拐角弧度
        curve: go.Link.JumpOver
    },
    $(go.Shape, {stroke: "#aaa", strokeWidth: 2}),
    $(go.TextBlock,
        {
            segmentIndex: 0,    //from 标签
            segmentOffset: new go.Point(NaN, NaN),
            segmentOrientation: go.Link.OrientUpright
        },
        new go.Binding("text", "text")),
    $(go.TextBlock,
        {
            segmentIndex: -1,    //to 标签
            segmentOffset: new go.Point(NaN, NaN),
            segmentOrientation: go.Link.OrientUpright
        },
        new go.Binding("text", "toText")),
    $(go.Shape,
        {toArrow: "Standard", fill: "#aaa", stroke: null}),
);

3.布局

在初始化diagram的时候配上layout属性：

const diagram = $(go.Diagram, "myCanvas", {
    allowDelete: false,
    // 布局管理，否则挤在一起视觉效果很差
    layout: $(go.ForceDirectedLayout),
});

4.事件

事件驱动使用commit方法，具体参数

diagram.commit("函数，参数为diagram", "动作");

主动事件

在渲染画布后即可调用，下面这段程序是将key不等于one的结点按比例缩小

diagram.commit(function(d) {  // d === myDiagram
    d.nodes.each(function(node) {
        if (node.data.key !== "one") 
            node.scale = 0.5;   //修改比例
    });
}, "decrease scale");

被动事件

被动事件是由用户触发的

注：下面这段代码由官方提供，但是我在本机上不可实现

const triggerDiagram = useCallback((e) => {
    diagram.commit((d) => {
        d.selection.each(node => {
            console.log(node)
            var shape = node.findObject("SHAPE");
            // If there was a GraphObject in the node named SHAPE, then set its fill to red:
            if (shape !== null) {
                shape.fill = "red";
            }
        });
    }, "change color");
}, []);