Wie kann ich Effeffect bei der Bildschirmbreite ändern? ⇐ HTML

[Guest]

Ich verwende React, ich habe eine Leinwand, die je nach Bildschirmgröße unterschiedlich groß ist und Form hat. Wenn ich etwas in die Leinwand zeichnen möchte, muss ich Dimensionen für jede einzelne Bildschirmgröße festlegen. < /P>

Code: Select all

const [screenWidth, setScreenWidth] = useState(window.screen.width);

const screenFun = () => {
setScreenWidth(window.screen.width)
}

const playerFun = (screenWidth) => {
if(screenWidth >= 2100){
console.log('width bigger than 2100')
setPlayerWidth(18);
setPlayerHeight(12);
};
if(screenWidth >= 1850 && window.screen.width < 2100){
console.log('width bigger than 1850')
setPlayerWidth(30);
setPlayerHeight(20);
};
}

const Canvas = props => {
const canvasRef = useRef(null);

useEffect(() =>{

const canvas = canvasRef.current
const context = canvas.getContext('2d')

setCanvasWidth((canvas.width*(0.5))-10);
setCanvasHeight((canvas.height*(0.5))-15);
console.log('width: '+canvas.width+' height is: '+canvas.height)

context.fillStyle = '#00f4cc'
context.fillRect(canvasWidth, canvasHeight, playerWidth, playerHeight)

},[])

return 

}

useEffect(() =>{
screenFun();
})

useEffect(() =>{
playerFun();
},[screenWidth])

Ich habe versucht, den Status der Screenfun Variable jedes Mal zu aktualisieren, wenn der Bildschirm geändert wird, indem der UseEffect (() => {screenfun ();}) < /Code> Funktion für immer im Hintergrund. Ich kann nicht herausfinden, wie man PlayerFun ausgeführt wird, wenn der Bildschirm geändert wird. Jede Hilfe sehr geschätzt!