在移动网站上旋转屏幕后 html 画布无法正确调整大小

问题描述

我第一次使用 gatsby 来开发我的项目

我的问题是我的 html 画布在旋转时被剪切 我似乎在宽度和高度方面有问题，但我似乎无法理解问题是什么

这是问题的一些图片：

without rotation

after the first rotation

after the second rotation

这是我处理画布的代码部分

谢谢你的帮助我只是一个初学者所以如果我的代码不是很干净，我很抱歉

function MainScratch ()  {
let canvas = useRef(null)
function getSize() {
    const isbrowser = typeof window !== 'undefined'

    if (isbrowser) return {
        width: window.innerWidth,height: window.innerHeight,}
    else return {
        width: 5,height: 5,}
}

const [windowSize,setwindowSize] = useState(getSize)

useEffect (() => {

    function handleResize() {
        setwindowSize(getSize())
    }

    window.addEventListener("resize",handleResize)

    return () => window.removeEventListener("resize",handleResize)

},[]);

useEffect(() => {
    let renderingElement = canvas.current
    let drawingElement = renderingElement.cloneNode()

    let drawingCtx = drawingElement.getContext('2d')
    let renderingCtx = renderingElement.getContext('2d')


    let lastX
    let lastY

    let moving = false

    renderingCtx.globalCompositeOperation = "source-over"       
    renderingCtx.fillStyle = '#000000'
    renderingCtx.fillRect(0,windowSize.width,windowSize.height)

    function reload()
    {
        renderingCtx.clearRect(0,drawingElement.width,drawingElement.height);
        drawingCtx.clearRect(0,renderingElement.width,renderingElement.height);
        renderingCtx.fillRect(0,windowSize.height)
        
    }

    window.addEventListener("resize",reload)
    window.addEventListener("orientationchange",reload)

    renderingElement.addEventListener('touchstart',e => {
        moving = true
        lastX = e.touches[0].pageX - renderingElement.offsetLeft
        lastY = e.touches[0].pageY - renderingElement.offsetTop
        e.preventDefault();
    })

    renderingElement.addEventListener('touchend',e => {
        moving = false
        lastX = e.lastX - renderingElement.offsetLeft
        lastY = e.lastY - renderingElement.offsetTop
    })

    renderingElement.addEventListener('touchmove',e => {
        moving = true
        if (moving) {
            drawingCtx.globalCompositeOperation = "source-over"
            renderingCtx.globalCompositeOperation = "destination-out"
            let currentX = e.touches[0].pageX - renderingElement.offsetLeft
            let currentY = e.touches[0].pageY - renderingElement.offsetTop
            drawingCtx.beginPath();
            drawingCtx.lineJoin = "round"
            drawingCtx.moveto(lastX,lastY)
            drawingCtx.lineto(currentX,currentY)
            drawingCtx.closePath()
            drawingCtx.linewidth = 80;
            drawingCtx.stroke()
            lastX = currentX
            lastY = currentY
            renderingCtx.drawImage(drawingElement,0)
        }
        e.preventDefault();
    })
},[]);

return (
    <Banner>
        <Canvas
            id="canvas"
            height={windowSize.height}
            width={windowSize.width}
            ref={canvas}
        />
    </Banner>
)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）