悬停事件的轨迹模式在 tsParticles 中不起作用（类似于 particlejs）

Question

我有两个问题，我正在我的 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/ 中查看。 所有其他模式都可以正常工作，但当我使用此代码时使用跟踪模式，我是否缺少粒子组件的其他一些属性？

第二个： 还， 我有两个 divs，一个用于粒子，另一个用于显示在它上面的文本。我已经使用 z-index 和 positions 实现了这一点。

我需要 canvas 高度是动态的，无论屏幕尺寸如何，它都占据其父元素的 100% 高度。我尝试通过将 Particles 组件包含在 div 中并将其高度保持为 100% 来做到这一点，但是 canvas 高度随着屏幕尺寸的减小而减小。

请帮助我，谢谢:)

Answer 1

哇，这里有很多要回答的，但我会尽力而为。

第一点，配置和鼠标轨迹

鼠标轨迹需要更多配置，在interactivity的modes部分你必须配置trail部分。

您可以在此处查看示例：https://codepen.io/matteobruni/pen/abdpbBY

如果您需要更多文档，请查看文档中的右侧部分：https://particles.js.org/interfaces/_options_interfaces_interactivity_modes_itrail_.itrail.html

第二点，canvas尺寸

如果您需要动态 canvas 大小，最好的解决方案是使用选项根对象中的 backgroundMode

您可以在此处查看示例：https://codepen.io/matteobruni/pen/MWeqxNL

背景模式如果启用，会设置 canvas 样式，其中 fixed 位置和所需的 zIndex

您可以在此处查看文档：https://particles.js.org/interfaces/_options_interfaces_backgroundmode_ibackgroundmode_.ibackgroundmode.html

如果您使用的是 backgroundMode，则在不对包含的 div（tsParticles target/container）

设置任何样式的情况下获得更好的结果