2

I am using ng2-pdf-viewer for displaying pdf. I need to drop a signature filed upon this pdf and need to get the coordinates of signature where it is dropped. Coordinates must be according to pdf page, not according to Dom i.e bottom-left corner of pdf should be treated as the centre of point.

I have tried the matrial drag and drop events to fetch the coordinates but unable to do so. It is providing the coordinates according to dom. I also tried position and offset but does not work for me.

<div #dragdiv class="movable" id="movableDiv" cdkDrag cdkDragBoundary=".pdf-control" (cdkDragEnded)="onDragEnded($event)">
        <div #inputfield [style.width.px]="signwidth" [style.height.px]="signheight">
            <span>
                 <img [src]="userSignValue">
            </span>
        </div>
        <ul>
            <li><i class="fa fa-minus-square" (click)="resizeSign('minus')"></i></li>
            <li><i class="fa fa-plus-square" (click)="resizeSign('plus')"></i></li>
            <button class="btn btn-primary" (click)="signDocument()">Sign document</button>
        </ul>
</div>
<div class="droparea">
   <pdf-viewer [src]="existingPdfSrc" [show-all]="false" [original-size]="false" [autoresize]="true" [(page)]="pageVariable" (after-load-complete)="pdfLoadComplete($event)"></pdf-viewer>
</div>

ts code is

const element = event.source.getRootElement();
const boundingClientRect = element.getBoundingClientRect();
const parentPosition = this.getPosition(element);
console.log('boundingClientRect', parentPosition);
console.log('x: ' + (boundingClientRect.x - parentPosition.left), 'y: ' + (boundingClientRect.y - parentPosition.top));
this.positionX = (boundingClientRect.x - parentPosition.left);
this.positionY = (boundingClientRect.y - parentPosition.top);

The coordinates should start from the bottom-left page of pdf i.e bottom-left page should be treated as (0,0)

Hari Om
  • 79
  • 6
  • ng2-pdf-viewer and ng2-pdfjs-viewer are two diffenent components. You may have added wrong tag to this question – int-i Aug 23 '19 at 21:24

0 Answers0