Vis.js 节点上的动画靶心

Posted 2023-03-08

【中文标题】Vis.js 节点上的动画靶心

【英文标题】：Animated bullseye over Vis.js node

【发布时间】：2015-04-23 16:34:31

【问题描述】：

我正在使用 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 功能），我可以切换。

【问题讨论】：

我对此也很好奇，一般来说如何操作节点内容，例如自定义 .js 动画和纯 html。

【参考方案1】：

我是 visjs 网络视图的开发者。这在公共 API 中是不可能的。我们正在开发 4.0 版本，它可以让您轻松地将自己的代码注入到渲染循环中。如果您更早需要它（我们预计 4.0 大约在 4 月左右），请在我们的 GitHub 页面上发布问题，我可以帮助您自己将其插入源代码。我们希望将所有问题保留在 GitHub 上，以便人们更容易找到答案。

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

【讨论】：

酷。我可以等到四月，因为我现在正在做一些 PoC。但我喜欢 div gif 的想法，或者我想的只是动态更改节点的图像属性。不利的一面是，我需要为每个要显示动画的节点类型提供两个图像，但从好的方面来说，我认为这很容易。也就是说，如果有办法动态改变节点的图像。

您可以使用 vis 数据集动态更改任何内容。我们计划在大约 1 到 2 周后发布 4.0。文档花费的时间比预期的要长！

嗨@Alexdm。现在有可用的文档吗？

谢谢@Alexdm。我面临点击节点功能绘图的问题。请帮助！

我不再维护 visjs。我建议您在 github 上发布问题，以便新的维护人员可以为您提供帮助。干杯