将注释添加到react-pdf，并获取关于pdf

问题描述

我有一个要求，我必须在画布中打开一个现有的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,height
        })
    }
    handleDrag = (deltaX,deltaY) => {
        this.setState({
            left: this.state.left + deltaX,top: this.state.top + deltaY
        })
    }
    render() {
        const { width,top,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中绘制矩形并获取其坐标吗？

感谢所有帮助。

解决方法

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

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

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