开发者问题收集

访问 tsParticles 粒子的当前颜色

2023-02-03
254
javascript html typescript colors particles.js

我想在按下按钮时读出 tsParticles 的当前颜色并进一步处理它。使用 seedsJS 我能够实现这一点，我想切换到 tsParticles。遗憾的是，现在我只收到一条错误消息，指出“未捕获 TypeError：无法读取未定义的属性（读取‘particles’）”。 我使用的（简化）代码是： 

tsParticles.load("tsparticles", {
  particles: {
    color: {
      value: "#ff0000",
      animation: {
        enable: false,
        speed: 20,
        sync: true
      }
    }}})

thirdButton.addEventListener( "click", function() {
  console.log("Button clicked");
let currentColor= tsParticles.options.particles.color.value;
console.log(currentColor);
particle_colorchange(currentColor)

});

两者都已初始化并正确加载并正常工作。错误来自“tsParticles.options.particles.color.value;”

我期望显示/进一步处理颜色（十六进制值）。 我尝试了各种方法来访问颜色。 我还尝试使用 

if (typeof tsparticles !== 'undefined') {
    let currentColor = tsparticles.options.particles.color.value;
    console.log(currentColor);
    particle_colorchange(currentColor)
  } else {
    console.error("tsparticles object is not defined");
  }

并逐步查找 typeof（下一个含义是：typeof tsparticles.options）来缩小错误发生的确切位置。遗憾的是，我找不到答案。

任何帮助都非常感谢。

2个回答

您可以通过容器对象访问粒子选项，然后从选项中获取粒子颜色，如下所示： 

tsParticles.load('tsparticles', { /* particle options */ }).then(function (container) {
  // you can now get the particle color via accessing the options of the container
  let particle_color = container.options.particles.color;
  console.log(particle_color);
});

您可以在 这篇关于 TsParticles v2 的文章 中的“粒子管理器对象”部分中阅读有关此内容的更多信息。 希望有所帮助！

Silvia O'Dwyer
2023-02-08

您可以像这样按下按钮来读出当前颜色。在按钮事件监听器函数中，您可以添加 

let currentColor= tsParticles.domItem(0).particles.container.options.particles.color.value ;

以读出粒子颜色和：

let currentColor= tsParticles.domItem(0).particles.container.options.particles.links.color.value ;

以读出链接颜色。

并分配一种新颜色，如下所示：

tsParticles.domItem(0).particles.container.options.particles.color.value = new_color; tsParticles.domItem(0).particles.container.options.particles.links.color.value=new_color; tsParticles.domItem(0).refresh();

我还没有弄清楚如何更新 onhover 链接和粒子的分配，但应该有办法。

fallouthase
2023-02-15