Как оживить новую ссылку в goJS - PullRequest
Новая
       21

Как оживить новую ссылку в goJS

1 голос
/ 19 января 2020

В моем приложении я динамически добавляю узлы или ссылки в свой график. Но нет никаких эффектов, переходов, новых я это делаю. Как я могу использовать addLinkData с анимацией?

1 Ответ

0 голосов
/ 21 января 2020

Вот полный пример: 

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            "LinkDrawn": function(e) {
              var link = e.subject;
              link.isSelected = false;
              var orig = link.toShortLength;
              link.toShortLength = 2;
              var anim = new go.Animation();
              var sw = link.path.strokeWidth;
              anim.add(link.path, "strokeWidth", sw, sw+5);
              anim.add(link.elt(1), "strokeWidth", sw, sw+5);
              anim.reversible = true;
              anim.finished = function(a) { link.toShortLength = orig; link.isSelected = true; };
              anim.start();
            }
          });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" })
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" },
      { key: 3, text: "Gamma", color: "lightgreen" },
      { key: 4, text: "Delta", color: "pink" }
    ]);
  }

В основном это типичные простые шаблоны и модели, как вы можете прочитать в https://gojs.net/learn и https://gojs.net/intro , Единственное, что относится к пользовательской анимации - это прослушиватель LinkDrawn DiagramEvent , который создает Animation и анимирует появление пути ссылки ( Link.path , a Shape ).

Подробнее об анимациях можно узнать по адресу: https://gojs.net/latest/intro/animation.html и https://gojs.net/latest/api/symbols/Animation.html.

...