typescript 访问tsParticles粒子的当前颜色

dw1jzc5e  于 2023-02-14  发布在  TypeScript
关注(0)|答案(1)|浏览(113)

我想在按下按钮时读取tsParticles的当前颜色并进一步处理它。使用particlesJS我可以实现这一点,我想切换到tsParticles。遗憾的是,现在我只收到一条错误消息,指出“未捕获类型错误:无法读取未定义(阅读“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");
  }

并逐步进行类型(接下来的意思是:类型的tsparticles. options。遗憾的是,我可以用它找到答案。
任何帮助都将不胜感激。

wa7juj8i

wa7juj8i1#

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

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);
});

你可以在this article about TsParticles v2中的“粒子管理器对象”一节中读到更多关于这个的内容。希望能有所帮助!

相关问题