Question

我正在尝试开发脚本，我可以点击图像并获得点击的X / Y.这部分已经实现了，当我尝试缩放图片时出现的问题。随后点击缩放图片应返回相同的坐标，这就是我未能成功的地方。

 clicked(event) {
    let pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft;
    let pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop;

    let offsetLeft = document.getElementById("textLayer").offsetWidth;
    let offsetTop = document.getElementById("textLayer").offsetHeight;
    console.log("zoom " + this.zoom);
    console.log("pozycja x " + event.clientX/this.zoom);
    console.log("pozycja y " + event.clientY/this.zoom);
    console.log("szerokosc elementu " + offsetLeft);
    console.log("wysokosc elementu " + offsetTop);
  }

  zoomView(): void {
    this.zoom = this.zoom + 2.0;
  }

这就是我写的。以及组件的模板：

<pdf-viewer style="position: absolute" id="textLayer" [src]="'http://localhost:8080/get.pdf'"
            [page]="page"
            [original-size]="true"
            style="display: block;"
            [zoom]="[zoom]"
            (click)="clicked($event)"
></pdf-viewer>

Answer 1

因为我找到了解决方案=＆gt;

 var x = event.pageX - (document.getElementById("textLayer").offsetLeft);
    var y = event.pageY - (document.getElementById("textLayer").offsetTop);
    console.log("zoom " + this.zoom);
    console.log("pozycja x " + x/this.zoom);
    console.log("pozycja y " + y/this.zoom);
    console.log("szerokosc elementu " + offsetLeft);
    console.log("wysokosc elementu " + offsetTop);
    console.log("wysokosc elementussssssssssssss " + offsetTop);

缩放图片时使鼠标坐标正确

1 个答案: