reactjs - 向 react-pdf 添加注释并获取注释相对于 pdf 的坐标

Question

我有一个要求，我必须在画布中打开现有的 pdf 并在 pdf 中绘制可调整大小和可拖动的矩形，并获取绘制的这些矩形的坐标。这是我显示pdf的代码。

    import React, { PureComponent } from "react";
    import { Document, Page, pdfjs } from "react-pdf/dist/entry.webpack";
    import PdfComponents from "../../../Components/PdfComponents/PdfComponent";
    import "./PDFdemo.css";
    import requiredFile from "./test_form.pdf";
    pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${
    pdfjs.version
    }/pdf.worker.js`;
    export default class PdfViewer extends PureComponent {
    state = {
        numPages: null,
        pageNumber: 1,
        rotate: 0,
        scale: 1
    };
    onDocumentLoadSuccess = ({ numPages }) => {
        console.log('this function was triggered')
        this.setState({ numPages });
    };
    render() {
        const { pageNumber, scale, pdf } = this.state;
        console.log("pdf", pdf);
        return (
            <React.Fragment>
                <div className="myDoc">
                    <div>
                        <PdfComponents />
                    </div>
                    <div id="ResumeContainer">
                        <div className="canvasStyle">
                            <Document
                                className="PDFDocument"
                                file={requiredFile}
                                onLoadError={(error) => {
                                    console.log("Load error", error)
                                }}
                                onSourceSuccess={() => {
                                    console.log("Source success")
                                }}
                                onSourceError={(error) => {
                                    console.error("Source error", error)
                                }}
                                onLoadSuccess={this.onDocumentLoadSuccess}
                            >
                                {window === undefined ? <div>nothing here</div> : <Page
                                    pageNumber={pageNumber}
                                    className="PDFPage PDFPageOne"
                                    scale={scale}
                                >
                                </Page>}
                            </Document>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}

这是我用来获得可调整大小的矩形的代码

    import React from 'react';
    import "./pdfComponent.css";
    import ResizableRect from 'react-resizable-rotatable-draggable'
    class PDFComponent extends React.Component {
    constructor() {
        super()
        this.state = {
            width: 100,
            height: 100,
            top: 100,
            left: 100,
            rotateAngle: 0
        }
    }
    handleResize = (style, isShiftKey, type) => {
        // type is a string and it shows which resize-handler you clicked
        // e.g. if you clicked top-right handler, then type is 'tr'
        let { top, left, width, height } = style
        top = Math.round(top)
        left = Math.round(left)
        width = Math.round(width)
        height = Math.round(height)
        this.setState({
            top,
            left,
            width,
            height
        })
    }
    handleDrag = (deltaX, deltaY) => {
        this.setState({
            left: this.state.left + deltaX,
            top: this.state.top + deltaY
        })
    }
    render() {
        const { width, top, left, height, rotateAngle } = this.state
        return (
            <div className="cursor">
                <ResizableRect
                    id="parameters"
                    left={left}
                    top={top}
                    width={width}
                    height={height}
                    rotateAngle={rotateAngle}
                    // aspectRatio={false}
                    // minWidth={10}
                    // minHeight={10}
                    zoomable='n, w, s, e, nw, ne, se, sw'
                    // rotatable={true}
                    // onRotateStart={this.handleRotateStart}
                    onRotate={this.handleRotate}
                    // onRotateEnd={this.handleRotateEnd}
                    // onResizeStart={this.handleResizeStart}
                    onResize={this.handleResize}
                    // onResizeEnd={this.handleUp}
                    // onDragStart={this.handleDragStart}
                    onDrag={this.handleDrag}
                // onDragEnd={this.handleDragEnd}
                />
            </div>
        );
    }
    }
    export default PDFComponent;

我需要把这个矩形放在 pdf 上并获取它的坐标。有没有其他方法可以在 pdf 中绘制矩形并获取其坐标？

感谢所有帮助。