Question

我的目标是在pdf文件上呈现html标记。（类似于Google地图上的红色精确定位）在此模板上，我正在渲染标记

<ion-header>

  <ion-navbar>
    <ion-title>drawing</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <pdf-viewer  [src]="pdfSrc"
              [render-text]="true"
              style="display: block;"
               (click)="addDefect($event)"
               #imageCanvas
  ></pdf-viewer>
  <defect *ngFor="let defect of defects" style="left: 203px; top: 518px; position: absolute"></defect>
</ion-content>

这是模板ts文件的代码：

export class DrawingPage implements OnInit {

  drawing: Drawing;
  defects: Defect[] = [];
  @ViewChild('imageCanvas') canvasElement: any;
  pdfSrc = '/assets/1.pdf';


  ngOnInit(): void {
    this.defectProvider.getDefects('5b770fcafdf7c678b4a0f0fe').subscribe((data: Defect[]) => {
      this.defects = data;
    })
  }

}

渲染正常，我在正确的位置放置了元素。问题是当我尝试水平滚动屏幕时，渲染的精确点会与屏幕一起移动（一旦渲染它们应保持在同一点），但是当我垂直滚动时就可以了。为什么会发生？

滚动时移动html元素

0 个答案: