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)