在 react-pdf 页面上的自定义画布上缩放问题

问：

我正在尝试在渲染的 react-pdf 页面上构建一个 pdf 编辑器。我知道 Page 组件公开了 canvasRef，但我想创建一个单独的 Canvas 元素，该元素覆盖在 react-pdf 页面上。页面显示在父 div 中，然后将页面缩放到初始 596 x 842 像素（A4 大小）之外，并显示一个滚动条供用户在页面上向下滚动。我的画布元素直接位于页面上方，但由于我没有正确操作，画布的缩放不正确，并且像素化或绘图看起来更厚。

这不是 react-pdf 存储库的问题，而是我在扩展方面需要的帮助。遇到的问题是，绘图在 596 x 842 或更小的尺寸下看起来很好，但是一旦屏幕缩放得比这更大，绘图看起来就会像素化且更厚。有人可以协助解决这个扩展问题吗？在过去的两天里，我一直在做这件事，没有任何喜悦。

这是我组件的渲染部分的当前代码

{pdfFile && (
            <div id="row" style={{'marginTop': '60px', width: "100vw", maxWidth: '1024px', display: "flex", overflowY: "auto"}}>
            <StyledEditorHolder id="row">
                <PdfContent ref={pdfWrapperRef}>
            <StyledPdfDocument file={pdfFile} onLoadSuccess={handleDocumentLoadSuccess}>
              <StyledPdfPage pageNumber={currentPage} width={wrapperDivSize} />
            </StyledPdfDocument>
            <CanvasContainer
              ref={canvasRef}
              onPointerDown={handleCanvasTouchStart} 
              onPointerUp={handleCanvasTouchEnd}   
              onPointerMove={handleCanvasTouchMove}
              blockScroll={drawingEnabled}
          />
           
          </PdfContent>
          
          </StyledEditorHolder> 
          </div>
         
          
        )}

这就是代码的平衡

useEffect(() => {
    if(pdfWrapperRef.current) {

      setWrapperDivSize(pdfWrapperRef.current.getBoundingClientRect().width);
      const handleResize = throttle(() => {

        if (pdfWrapperRef.current) {

          const pdfPage = document.querySelector('.react-pdf__Page');
          const newWidth = pdfPage.getBoundingClientRect().width;

          setWrapperDivSize(pdfWrapperRef.current.getBoundingClientRect().width);
        }
      }, 500);
      window.addEventListener("resize", handleResize);
      return () => {
        window.removeEventListener("resize", handleResize);
      };
    }
  }, [isOpen, pdfWrapperRef.current]);

const handleDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
    setCurrentPage(1);
    setDrawnPaths(Array.from({ length: numPages }, () => []));

    const pdfPage = document.querySelector('.react-pdf__Page'); 
    if (pdfPage) {
      const rect = pdfPage.getBoundingClientRect();
      console.log("Initial width", rect.width)
      setCurrentWidth(prevState => rect.width);
      canvasRef.current.width = 596;
      canvasRef.current.height = 842;

      console.log("Canvas", rect.width, rect.height)

      // work out the initial scale factor
      const scaleFactor = rect.width / 595.276;
      setScaleFactor(scaleFactor);
      console.log("Initial Scale factor", scaleFactor)

      setIsOpen(true);
    }
  };

另外，如果可能有帮助，这里是这个组件的样式

export const StyledPdfEditor = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
`;

export const StyledEditorHolder = styled.div`
  

    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    width: 100%;
    border-radius: 20px;
    display: flex;
    position: relative;
    justify-content: center;
    overflow: hidden;
`

export const PdfContent = styled.div<CanvasProps>`
  position: relative;
  display: flex;
  max-width: 1024px;
  touch-action: ${props => props.blockScroll ? "none" : "auto"};
  justify-content: center;
  overflow: auto;
  width: 100vw;
  /* Set the width to 90% of the viewport width */
  //max-width: 800px;
`;

export const CanvasContainer = styled.canvas<CanvasProps>`
  position: absolute;
  width: 100%;
  height: auto;

  touch-action: ${props => props.blockScroll ? "none" : "auto"};
  z-index: 100;
`;


export const StyledPdfPage = styled(Page)`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .react-pdf__Page {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;

  }
`;

export const StyledPdfDocument = styled(Document)`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .react-pdf__Document {
    width: 100%;
  }
`;