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

Posted 2023-02-15

【中文标题】如何在 Blazor 的 Javascript 中获取/注入 onclick 句柄

【英文标题】：How to get/inject onclick handle in Javascript for Blazor

【发布时间】：2021-07-29 18:30:38

【问题描述】：

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

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

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

我的 CameraFrameClick 需要像素级坐标，如果您只在 C# 中使用 args.OffsetX/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);**
  

有没有建议的方法来完成这个？好像很多时候在调用函数的handler之前可能需要先做一些js操作。

注意，这是服务器端 blazor。

【参考方案1】：

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

https://mudblazor.com/ 具有 ElementReference 的扩展方法，可让您获取我试图在 JS 中获取的边界客户端矩形。

所以你可以用 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();