GoJS 绘图 (十) ：链接（完结）

Rocko 发布于2019-08-22 10:33 / 2778人阅读

摘要：非定向链接最简单的链接没有箭头指示方向。该模板只包含一个形状为主要元素，因为这是在节点之间绘制的线条。链接的路线被计算后将得到一个路径的点。可以很容易地建立方向，只需添加一个形状并设置其属性。目前也就只能先写这么多吧入门的话问题不大了

非定向链接

最简单的链接没有箭头指示方向。
该模板只包含一个形状为主要元素，因为这是在节点之间绘制的线条。链接的路线被计算后将得到一个路径的点。

diagram.nodeTemplate = g(
    go.Node,
    "Auto",
    new go.Binding("location", "loc", go.Point.Parse),
    g(
        go.Shape,
        "RoundedRectangle",
        {
            fill: "#ffffd"
        }
    ),
    g(
        go.TextBlock,
        {
            margin: 5
        },
        new go.Binding("text", "key")
    )
);
diagram.linkTemplate = g(
    go.Link,
    g(
        go.Shape
    )
);
var nodeDateArray = [
    { key: "apple", loc: "0 0"},
    { key: "object-c", loc: "0 150"}
];

var linkDataArray = [
    { from: "apple", to: "object-c"}
];

定向链接

许多节点都需要用指示的方向性。 GoJS可以很容易地建立方向，只需添加一个形状并设置其Shape.toArrow属性。当然你也可以设置其它形状的属性，如Shape.fill以自定义箭头的外观。

var diagram = new go.Diagram("diagram");
var g = go.GraphObject.make;
diagram.nodeTemplate = g(
    go.Node,
    "Auto",
    new go.Binding("location", "loc", go.Point.Parse),
    g(
        go.Shape,
        "RoundedRectangle",
        {
            fill: "#ffffd"
        }
    ),
    g(
        go.TextBlock,
        {
            margin: 5
        },
        new go.Binding("text", "key")
    )
);
diagram.linkTemplate = g(
    go.Link,
    g(
        go.Shape
        g(
            go.Shape,
            {
                toArrow: "OpenTriangle",
                fill: null
            }
        )
    )
);
var nodeDateArray = [
    { key: "apple", loc: "0 0"},
    { key: "object-c", loc: "0 150"}
];

var linkDataArray = [
    { from: "apple", to: "object-c"}
];

目前也就只能先写这么多吧！！入门的话问题不大了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90819.html

GoJS 绘图 (八) ：模型和模版

摘要：下面是这样做的一种方式使用模型和模板事实上，图已经为节点和链接非常简单的默认模板。该特定节点的数据已投入对象的数组。因此，我们需要替换节点模版。数据绑定数据绑定是一种声明声明一个对象的属性值应该用于设置另一个对象的属性值。使用模版构视图让我们尝试建立两个节点，将它们与一个链接连接。下面是这样做的一种方式： var node1 = g( go.Node, Auto, ...

Hanks10100 2019-08-21 10:52 评论0 收藏0
GoJS 绘图 (四) ：构建节点与GraphObjects

摘要：你可以构建一个节点或其类型的代码。以下将讨论基本类型，你可以用它来建立一个节点对象。这些页面通过明确创建和添加节点和链路建立的示意图。一个非常简单的节点由一个与构成。虽然以这种方式构建的节点将工作变得更加复杂的代码将变得更加难以阅读和维护。你可以构建一个节点或其类型的JavaScript代码。以下将讨论基本类型，你可以用它来建立一个节点对象。这些页面通过明确创建和添加节点和链路建立的...

jokester 2019-08-19 18:25 评论0 收藏0
GoJS 绘图 (一) ：入门

摘要：是一个库，让你轻松创建现代浏览器的交互图。支持图形化的模板和图形对象属性数据模型的数据绑定。许多预定义的工具和命令执行，大部分的图表所需要的标准的行为。外观和行为的定制是大多设置属性的问题。 GoJS是一个JavaScript库，让你轻松创建现代Web浏览器的交互图。 GoJS支持图形化的模板和图形对象属性数据模型的数据绑定。你只需要保存和恢复模型，包括持有任何性质的应用需求，简单的J...

X_AirDu 2019-08-19 18:23 评论0 收藏0
GoJS 绘图 (六) ：横向面板（panel）

摘要：横向面板属性和纵向面板基本相同只是排列顺序不同默认对齐和拉伸垂直和水平两个面板的支持的和属性。这是一种便捷的方式使您不必设置每个元件的或横向面板属性和纵向面板基本相同只是排列顺序不同 diagram.add(G( go.Part, go.Panel.Horizontal, { position: new go.Point(500, 0), ...

Hancock_Xu 2019-08-19 18:26 评论0 收藏0
GoJS 绘图 (三) ：shapes

摘要：绘制一个几何图形。您可以控制什么样的形状绘制以及它是如何绘画和填充。形状不像的和，形状不能包含任何其他对象。还需要设置或和参数，作为确定形状尺寸。在这些简单的演示，该代码创建一个图形，并将其添加到画布中。属性指定轮廓的粗细。绘制一个几何图形。您可以控制什么样的形状绘制以及它是如何绘画和填充。形状不像的TextBlocks和Pictures，形状不能包含任何其他对象。基础图形您可以...

siberiawolf 2019-08-19 18:24 评论0 收藏0