拖放到pdf文件后获取元素位置（Angulal-Nodejs）

Question

我使用angular ng2 pdf viewer和angular material cdkDrag来拖动元素。在我的后端，我使用hummusJS/hummusRecipe修改pdf文件。

我寻找一种方法来知道我把元素放在pdf文件的什么地方，然后向后端的coordinate发出请求，以知道元素需要放在pdf文件的什么地方。

这是我在nodejs上的函数：

const pdfEditor = async () => {
  const pdfDoc = new HummusRecipe("./pdf/demo.pdf", "./pdf/output.pdf");
  pdfDoc
    // edit 1st page
    .editPage(1)
    .text("Add some texts to an existing pdf file", 150, 500, {
      color: "003240"
    })
    .image("./dest/signature.png", 100, 600, {
      width: 100,
      keepAspectRatio: true
    })
    .endPage()
    .endPDF();
}

我的客户Angular：

<div class="container">
<div class="otherContainer">
  <button (click)="getEditedPDF()" style="width: 100px;">Save image with signature</button>
  <pdf-viewer *ngIf="pdfSrc" [(page)]="pageVariable" [show-all]="true" [render-text]="true" [original-size]="false" [autoresize]="true" [src]="pdfSrc"> </pdf-viewer>
  <div class="signatureContainer">
    <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()"></signature-pad>
    <div class="btn-grid">
      <button (click)="submitPad()">Submit</button>
      <button (click)="clearPad()">Clear Pad</button>
      <button (click)="openImage()">Open Image</button>
    </div>
  </div>
</div>
<div class="image">
  <img *ngIf="imageExpress" [src]="imageExpress | safeHtml" cdkDrag>
</div>
<pdf-viewer *ngIf="editedPDF" [(page)]="pageVariable" [show-all]="true" [render-text]="true" [original-size]="false" [autoresize]="true" [src]="editedPDF"> </pdf-viewer>
</div>

Answer 1

import { Component, OnInit, Input } from '@angular/core';
import { CdkDragEnd, CdkDragStart, CdkDragMove, CdkDragDrop } from '@angular/cdk/drag-drop';
@Component({
  selector: 'app-pdf-drag-drop',
  templateUrl: './pdf-drag-drop.component.html',
  styleUrls: ['./pdf-drag-drop.component.scss']
})
export class PdfDragDropComponent implements OnInit {
  dragDroppables: any[];
  state = '';
  position = '';

  @Input() props: [{ [key: string]: object | any }];

  constructor() { }

  ngOnInit(): void {
    this.dragDroppables = this.props;
  }

  public dragStarted(event: CdkDragStart) {
    this.state = 'dragStarted';
  }

  public dragEnded(event: CdkDragEnd) {
    this.state = 'dragEnded';
    console.log(`State: ${this.state} ${this.position}`);
  }

  public dragMoved(event: CdkDragMove) {
    this.position = ` Position X: ${event.pointerPosition.x} - Y: ${event.pointerPosition.y}`;
  }

}

...并在模板中添加：

  cdkDrag
  (cdkDragStarted)="dragStarted($event)"
  (cdkDragEnded)="dragEnded($event)"
  (cdkDragMoved)="dragMoved($event)"

这对我有用。