在我的应用程序中,我在图中动态添加节点或链接。但是,我没有这样做的效果转换。如何在动画中使用addLinkData?
这是一个完整的示例:
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的路径(Link.path,Shape)的外观设置动画。
在以下网址了解有关动画的更多信息:https : //gojs.net/latest/intro/animation.html和https://gojs.net/latest/api/symbols/Animation.html。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句