#reactjs #p5.js
Вопрос:
В настоящее время я работаю над небольшим приложением react и пытаюсь найти способ визуализации моего p5.js набросайте эскиз позади приложения react и как бы станьте фоном для корня. Это означает, что P5.js эскиз имеет полный размер браузера и приложения, отображаемых поверх этого.
Я уже пробовал пару вещей с контейнерными дивами, но ничего не получалось. Если у кого-то есть опыт в этом, я рад любой помощи.
Ответ №1:
Если вы хотите, чтобы фон был неподвижным, вы можете просто прикрепить эскиз фона к div, изменить его размер, чтобы заполнить окно , а затем установить для этого div значение position: fixed и установить left , top , right , и bottom все 0 .
// This is in place of an import statement const { useRef, useState, useLayoutEffect } = React; const SketchComp = props =gt; { const containerRef = useRef(); const Sketch = (p) =gt; { p.setup = () =gt; { p.createCanvas(p.windowWidth, p.windowHeight); p.stroke('paleturquoise'); p.strokeWeight(9); p.frameRate(10); W = p.width; } // Just making it interesting: https://twitter.com/akira2768922/status/1460991841835249668?s=20 let W, b, t=0, s=50, F=a=gt;p.map((b=t/60)%1,0,1,...[b,b 1].map(b=gt;p.noise(b|1,a)gt;.5?s:0)) p.draw = () =gt; { p.background('lightcyan'); t = 5; let z; for(let x = 12; x--;) for(let y = 12; y--;) (x y)amp;1||p.rect(x*s,y*s,s,s,F(z=x y*20),F(z 1),F(z 21),F(z 20)) } p.windowResized = function() { p.resizeCanvas(p.windowWidth, p.windowHeight); W = p.width; } } useLayoutEffect( () =gt; { // Make sure the p5.js canvas is a child of the component in the DOM let s = new p5(Sketch, containerRef.current); // Remove the sketch when the component is removed/replaced return () =gt; s.remove(); }, // This empty list tells React that this effect never needs to get re-rendered [] ); return ( lt;div className="sketch-container" ref={containerRef}gt;lt;/divgt; ); } function App() { return ( lt;div className="App"gt; lt;SketchComp /gt; lt;h1gt;Example React Applt;/h1gt; lt;pgt;This text should appear on top of the p5.js sketchlt;/pgt; lt;pgt;{[...new Array(2000)].map(() =gt; ". ")}lt;/pgt; lt;/divgt; ); } ReactDOM.render( lt;React.StrictModegt; lt;App /gt; lt;/React.StrictModegt;, document.getElementById('root') ); .sketch-container { position: fixed; z-index: -1; right: 0; left: 0; top: 0; bottom: 0; opacity: 0.4; } lt;htmlgt; lt;headgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"gt;lt;/scriptgt; lt;script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"gt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;div id="root"gt;lt;/divgt; lt;/bodygt; lt;/htmlgt; Если вы хотите иметь прокрутку фона, вы можете использовать position: absolute и сделать так, чтобы высота эскиза соответствовала содержимому:
// This is in place of an import statement const { useRef, useState, useLayoutEffect } = React; const SketchComp = props =gt; { const containerRef = useRef(); const Sketch = (p) =gt; { p.setup = () =gt; { p.createCanvas(p.windowWidth, containerRef.current.clientHeight); p.stroke('paleturquoise'); p.strokeWeight(9); p.frameRate(10); W = p.width; } // Just making it interesting: https://twitter.com/akira2768922/status/1460991841835249668?s=20 let W, b, t=0, s=50, F=a=gt;p.map((b=t/60)%1,0,1,...[b,b 1].map(b=gt;p.noise(b|1,a)gt;.5?s:0)) p.draw = () =gt; { p.background('lightcyan'); t = 5; let z; for(let x = 12; x--;) for(let y = 12; y--;) (x y)amp;1||p.rect(x*s,y*s,s,s,F(z=x y*20),F(z 1),F(z 21),F(z 20)) } p.windowResized = function() { p.resizeCanvas(p.windowWidth, containerRef.current.clientHeight); W = p.width; } } useLayoutEffect( () =gt; { // Make sure the p5.js canvas is a child of the component in the DOM let s = new p5(Sketch, containerRef.current); // Remove the sketch when the component is removed/replaced return () =gt; s.remove(); }, // This empty list tells React that this effect never needs to get re-rendered [] ); return ( lt;div className="sketch-container" ref={containerRef}gt;lt;/divgt; ); } function App() { return ( lt;div className="App"gt; lt;SketchComp /gt; lt;h1gt;Example React Applt;/h1gt; lt;pgt;This text should appear on top of the p5.js sketchlt;/pgt; lt;pgt;{[...new Array(2000)].map(() =gt; ". ")}lt;/pgt; lt;/divgt; ); } ReactDOM.render( lt;React.StrictModegt; lt;App /gt; lt;/React.StrictModegt;, document.getElementById('root') ); html, body { margin: 0; padding: 0; } .App { position: relative; padding: 20px; } .sketch-container { position: absolute; right: 0; left: 0; top: 0; bottom: 0; opacity: 0.4; } lt;htmlgt; lt;headgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"gt;lt;/scriptgt; lt;script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"gt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;div id="root"gt;lt;/divgt; lt;/bodygt; lt;/htmlgt;