javascript - Vis.js Node 上的动画靶心

标签 javascript jquery css node.js chap-links-library

我正在使用 Vis.js 绘制网络图。我希望能够有一个通知功能,当收到特定 Node 的 AJAX 更新时, Canvas 会将该 Node 移动到中心(Vis.js 已经可以做到),然后在该 Node 上显示某种类型的靶心动画 Node 来吸引用户注意,直到他们单击该 Node 。与我正在寻找的动画效果最接近的示例位于 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 集成,以便它在图像 Node 上绘制并在单击该 Node 时停止?这个特定的示例将圆圈向外绘制,但是我希望将它们向内绘制,但不知道如何改变方向。

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

最佳答案

我是visjs WebView 的开发者。这在公共(public) API 中尚不可能。我们正在开发 4.0 版本,它允许您轻松地将自己的代码注入(inject)渲染循环中。如果您更快需要它(我们预计 4.0 左右),请在我们的 GitHub 页面上发布问题,我可以帮助您自行将其插入源代码中。我们希望将所有问题保留在 GitHub 上,以便人们更容易找到答案。

编辑:此外,您当然可以仅更改颜色或使用焦点功能将焦点集中在 Node 上。但这不是你的问题。解决方法可能是在 Node 顶部覆盖一个 div,其中文档可以包含带有动画的 gif 和单击处理程序。您可以使用 vis API 获取该 Node 的位置。

关于javascript - Vis.js Node 上的动画靶心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28655385/

相关文章:

javascript - 如何在没有反应请求的情况下在 li hover 上显示特定图像?

javascript - 将 Ajax 页面保存到磁盘时出现差异

javascript - 从 Canvas 上抓取一个或多个形状

javascript - 构建动态 TreeMap

javascript - 总成本未根据 jQuery 中的数学函数正确更新

javascript - 当模糊或按回车时如何调用JQuery函数?

jquery - 使用 Data Cycle FX 的 jQuery 旋转木马菜单内的中心事件 li 元素

javascript - 按内容选择元素并删除其内容的第一个和最后一个字符

jquery - 为什么在调整窗口大小时不触发非匿名函数?

html - CSS 将鼠标悬停在一个段落上,更改上一个段落的背景