Question

我使用Vis.js绘制网络图。我希望能够有一个通知功能，当收到特定节点的AJAX更新时，画布将该节点移动到中心（Vis.js已经可以做），然后有一些类型的靶心动画通过节点吸引用户注意，直到他们单击节点。我正在寻找的动画效果的最近示例是http://codepen.io/MateiGCopot/pen/ogEKRK

var w = c.width = 400,
h = c.height = 400,
ctx = c.getContext('2d'),

frame = 0;

function anim(){
  window.requestAnimationFrame(anim);

  ++frame;

  for(var i = 0; i < w; ++i){
    ctx.strokeStyle = i%20 === 0 ? 'hsl(hue, 80%, 50%)'.replace('hue',
        (360 / (w/3) * i - frame) % 360
    ) : 'rgba(0, 0, 0, .08)';
    ctx.beginPath();
    ctx.arc(w/2, h/2, (i + frame)%w/2, 0, Math.PI*2);
    ctx.stroke();
    ctx.closePath();
  }
}
anim();

这是实现此类效果的最佳方法吗？在我的机器上运行它会使CPU使用率飙升，因此它看起来效率不高另外，我如何将这样的东西与Vis.js集成，以便它覆盖图像节点并在单击节点时停止？这个特殊的例子将圆圈向外绘制，但我希望它们向内绘制，但无法弄清楚如何改变方向。

JavaScript不是我强大的套件，因此解释越详细越好。另外，我并没有特别依赖于Vis.js，所以如果有另一个已经具有此功能的库（以及类似的Vis.js功能），我可以切换。

Answer 1

我是visjs网络视图的开发者。这在公共API中是不可能的。我们正在开发一个版本4.0，它允许您轻松地在renderloop中注入您自己的代码。如果您需要更快（我们期望4.0四月左右），请在我们的GitHub页面上发布一个问题，我可以帮助您自己将其插入到源代码中。我们想在GitHub上保留所有问题，以便人们更容易找到答案。

编辑：此外，您当然可以只更改颜色和/或使用焦点功能来关注节点。但这不是你的问题。解决方法可能是在顶部操作节点上覆盖div，其中doc可以具有带动画的gif和单击处理程序。您可以使用vis API获取所述节点的位置。

Vis.js节点上的动画靶心

1 个答案: