问题描述

我有两个查询，我正在我的 React 应用程序中实现 tsParticles。 第一：。

<Particles 
        id="tsparticles"
        options={{
          background: {
            color: {
              value: "black",
            },
          },
          fpsLimit: 60,
          interactivity: {
            detectsOn: "window",
            events: {
              onClick: {
                enable: true,
                mode: "push",
              },
              onHover: {
                
                enable: true,
                mode: "trail",
              },
              resize: true,
            },
            modes: {
              bubble: {
                distance: 400,
                duration: 2,
                opacity: 0.8,
                size: 40,
              },
              push: {
                quantity: 4,
              },
              repulse: {
                distance: 200,
                duration: 0.4,
              },
            },
          },
          particles: {
              
            color:{
                animation:{
                    enable:true,
                    speed:50,
                },
                value:"#f00"
            },
            links: {
                shadow:{
                    blur:true,
                    color:"#00ff00"

                },
                triangles:{
                    frequency: 1
                },
              color: "random",
              distance: 150,
              enable: true,
              frequency:1,
              opacity: 0.5,
              width: 1,
            },
            collisions: {
              enable: true,
            },
            move: {
                angle:{
                    offset: 45,
                    value: 90
                },
                attract:{
                    rotate:{
                        x:3000,
                        y:3000
                    }
                },
                gravity:{
                    acceleration: 9.81,
                    enable:false,
                    maxSpeed:1
                },
              direction: "none",
              enable: true,
              outMode: "bounce",
              random: false,
              speed: 6,
              straight: false,
            },
            number: {
              density: {
                enable: true,
                value_area: 1000,
              },
              value: 80,
            },
            opacity: {
              value: 0.5,
            },
            shape: {
              type: "circle",
            },
            size: {
              random: true,
              value: 5,
            },
          },
          detectRetina: true,
        }}
      />

其中有一段 onHover 和 mode 的键值。它有 8 种不同的模式，可以在https://particles.matteobruni.it/中查看。所有其他模式都可以正常工作，但是当我使用此代码时的跟踪模式，我是否缺少粒子组件的其他一些属性？

第二个： 另外，我有两个 div，一个用于粒子，另一个用于在其上显示的文本。我已经使用 z-index 和位置实现了这一点。

我需要画布高度是动态的，无论屏幕尺寸是多少，它都占据其父级的 100% 高度。我尝试通过在 div 中包含粒子组件并将其高度保持为 100% 来做到这一点，但画布高度会随着屏幕尺寸的减小而减小。

请帮助我，谢谢:)

标签： javascriptcssreactjsparticles.js