角材料波纹-手动启动

Question

我遇到的问题是，首先要获得用户使用以下代码进行输入的坐标：

onImageClick(event){
const srcEl = event.srcElement;
const x = (srcEl.naturalWidth / srcEl.width) * event.offsetX
const y = (srcEl.naturalHeight / srcEl.height) * event.offsetY
this.compEditForm.patchValue({
  correctXcoord: x,
  correctYcoord: y
});

}

它可以正确获取坐标，这使我可以将其保存在数据库中，然后访问可以在其中编辑此值的视图，因此我将原始图像坐标转换为相对于输入图像尺寸的坐标。调整大小。

triggerRipple(){
const img = this.image.nativeElement;
const x = (this.competicion.correctXCoord / (img.naturalWidth / img.width)) + img.x;
const y = (this.competicion.correctYCoord / (img.naturalHeight / img.height)) + img.y;

console.log(x)
console.log(y)
const rippleRef = this.ripple.launch(x, y, {
  persistent: true
});

}

在相同的方法中，我在X和Y处发出了角形材料波纹，但是这些坐标似乎不是从图像的左上角开始的。有人知道如何针对图像输入以正确的坐标手动启动吗？