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

第二个: 还， 我有两个 div，一个用于粒子，另一个用于显示在它上面的文本。我使用 z-index 和位置实现了这一点。

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

请帮助我，谢谢:)

Answer 1

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

第一点，配置和鼠标轨迹

鼠标轨迹需要更多配置，在modes节interactivity你必须配置 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 目标/容器)