如何在Blazor的Javascript中获取/注入onclick句柄

Question

此要求的主要目标是获取缩放图像上单击事件的像素坐标。

我在Blazor组件上有以下img标签：

<img id="cameraFrame" src="@($"data:image/png;base64,{@ViewModel.DisplayFrameImageBytes}")"
@onclick="CameraFrameClick"/>

如果您只使用参数，我的CameraFrameClick需要像素级坐标。在C#中偏移X/Y，然后单击图像上的像素，但如果缩放图像，则这与图像像素无关，而是与屏幕上的显示像素有关。

我想捕捉@onclick="CameraFrameClick"；到一些JS变量，所以我可以在图像上的自定义JS点击事件上自己调用它。

例如：

<script>
#cameraFrame.onclick = function(args) {
var bounds=this.getBoundingClientRect(); <<-- This is really what I need to use before going back to server.
// Calculate PixelX and PixelY using args and bounds.
var pixelX, pixelY;
**cameraFrame.InvokeBlazorOnClick(pixelX, pixelY);**
}

有没有建议的方法来实现这一点？在很多情况下，在调用函数的处理程序之前，您可能需要先执行一些JS操作。

注意，这是服务器端blazor。

Answer 1

在返回C#Blazor调用之前，我还没有找到调用JS代码的正确解决方案，但我已经找到了一种在Blazor中实现Pixel Click坐标的方法，如果这对任何人都有用的话。

https://mudblazor.com/有ElementReference的扩展方法，它允许您获得我试图在JS中获得的绑定客户端rect。

因此，您可以使用Ref:创建img标签

<img id="cameraFrame" @ref=CameraFrameElement src="@($"data:image/png;base64,{@ViewModel.DisplayFrameImageBytes}")"
@onclick="CameraFrameClick"/>

然后在事件处理程序上使用扩展方法来获取边界矩形。请注意，您仍然需要能够访问原始图像以获得宽度/高度，假设您的范围中仍然有这些数据，这将起作用。

ElementReference CameraFrameElement; <--- Binds to the img element using @ref
public async Task CameraFrameClick(MouseEventArgs args)
{
var bounds = await CameraFrameElement.MudGetBoundingClientRectAsync(); <-- Extension method from MudBlazor
<--- Calculate Pixel level coordinates, assuming you still have the image and its size.
var pixelX = (args.OffsetX / bounds.Width) * ViewModel.LatestFrame.FrameCoordinates.FrameSize.Width;
var pixelY = (args.OffsetY / bounds.Height) * ViewModel.LatestFrame.FrameCoordinates.FrameSize.Height;
<---- Use the pixel level coordinates.
await ViewModel.GoToImagePositionCmd
.Execute(new PointF((float)pixelX, (float)pixelY))
.ToTask();
}