问粒子js没有在反应js中应用道具
EN

Stack Overflow用户

提问于 2022-05-16 11:00:55

回答 1查看 224关注 0票数 0

我正在使用react js作为我的网站项目的背景，它是重叠的滚动条。无论我做什么，我都无法改变粒子js中画布的宽度。

这是我的粒子成分

import React from 'react'
import Particles from 'react-tsparticles'
import styled from 'styled-components';
import { loadFull } from "tsparticles";

const Box = styled.div`
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    z-index: 0;
`

const ParticleComponent = (props) => {

    const paramOne = {
        "particles": {
      "number": {
        "value": 100,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": props.theme.text
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": props.theme.text
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 20,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": true,
        "distance": 150,
        "color": props.theme.text,
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 3,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "outModes": {
          "default": "bounce"
        },
        "bounce": true,
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 8,
          "speed": 3
        },
        "repulse": {
          "distance": 100,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true
}

const paramTwo = {
    "particles": {
      "number": {
        "value": 100,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": props.theme.text
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": props.theme.text
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 1,
        "random": true,
        "anim": {
          "enable": true,
          "speed": 1,
          "opacity_min": 0,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": true,
          "speed": 3,
          "size_min": 0.4,
          "sync": false
        }
      },
      "line_linked": {
        "enable": false,
        "distance": 150,
        "color": props.theme.text,
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 3,
        "direction": "none",
        "random": true,
        "straight": false,
        "out_mode": "out",
        "outModes": {
          "default": "bounce"
        },
        "bounce": false,
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 600
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": false,
          "mode": "bubble"
        },
        "onclick": {
          "enable": true,
          "mode": "repulse"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 250,
          "size": 0,
          "duration": 2,
          "opacity": 0,
          "speed": 3
        },
        "repulse": {
          "distance": 100,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true
}

const particlesInit = async (main) => {
    await loadFull(main);
};

const particlesLoaded = (container) => {
};

return (
    <Box>
        <Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options= 
       {props.style === "one" ? paramOne : paramTwo   } />
    </Box>
)
}

export default ParticleComponent;

我把这个组件呈现成这样

<ParticleComponent theme={props.theme} />

我试过像这样的内联风格

<Box>
        <style>
            {
                `
                #tsparticles canvas {
                    width : ${document.body.clientWidth - 5}px !important;
                }
                `
            }
        </style>
        <Particles style={{width: '99%'}} id="tsparticles" init={particlesInit} loaded= 
       {particlesLoaded} options={props.style === "one" ? paramOne : paramTwo   } />
    </Box>

我试过用这种风格的道具

<Particles style={{width: '99%'}} id="tsparticles" init={particlesInit} loaded= 
  {particlesLoaded} options={props.style === "one" ? paramOne : paramTwo   } />

我试过像这样的粒子js宽度道具

<Particles width='99%' id="tsparticles" init={particlesInit} loaded={particlesLoaded} options= 
  {props.style === "one" ? paramOne : paramTwo   } />

我正在考虑尝试类名方法，但是当它不改变时，使用内联样式，那么类名方法会有什么帮助。没有其他div设置为fixed，这是重叠的滚动条，设置画布位置绝对也没有帮助，因为我希望它保持固定，其余的元素可以滚动。

particles.js

javascript

reactjs

scrollbar

回答 1

Stack Overflow用户

发布于 2022-10-04 12:18:09

import { useCallback } from "react";
import { loadFull } from "tsparticles";
import Particles from "react-tsparticles";
import { particlesOptionsConfig, } from "./particles-config";
import './styles.scss'

const ParticlesBackground = (props) => {
    const { children } = props
    const particlesInit = useCallback(async (engine) => {
        await loadFull(engine);
    }, []);
    const canvasPosition = `
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        zIndex: 0 !important;
        top: 0px !important;
        left: 0px !important;
        backgroundColor: rgb(13; 71; 161);
        pointerEvents: none;
    `
    const particlesLoaded = useCallback(async (container) => {
        const element = document.getElementsByClassName("ParticlesCanvasWrapper")[0]
        element.setAttribute("style", canvasPosition);
    }, []);

    return (
        <div>
            <Particles
                id="tsparticles"
                init={particlesInit}
                loaded={particlesLoaded}
                options={particlesOptionsConfig}
                canvasClassName="ParticlesCanvasWrapper"
            >
                {children}
            </Particles>
        </div>

    );
};
export default ParticlesBackground;