Blazor 获取 div 位置/坐标

Posted 2023-04-12

【中文标题】Blazor 获取 div 位置/坐标

【英文标题】：Blazor get div position / coordinates

【发布时间】：2020-01-07 16:45:26

【问题描述】：

我正在创建一个弹出组件，我希望它是可移动的。我可以使用顶部/左侧样式移动它，但现在它们初始化为top:0;left:0;，因此弹出窗口出现在页面的左上角。我希望让它出现在页面的中心，然后获取我的 div 的左上角坐标，以便在之后正确管理我的计算。

这是我现在拥有的：

<div class="child-window" draggable="true" style="position:absolute; top: @(offsetY)px; left: @(offsetX)px; border-color: black;" @ondragend="OnDragEnd" @ondragstart="OnDragStart">
   <div class="cw-content">
      @Content
   </div>
</div>

@code 
   private double startX, startY, offsetX, offsetY;

   protected override void OnInitialized() 
        base.OnInitialized();
        ResetStartPosition();
    

   private void ResetStartPosition() 
        //Set offsetX & offsetY to the top left div position
    

   private void OnDragStart(DragEventArgs args) 
        startX = args.ClientX;
        startY = args.ClientY;
    

    private void OnDragEnd(DragEventArgs args) 
        offsetX += args.ClientX - startX;
        offsetY += args.ClientY - startY;
    

【问题讨论】：

这是 Blazor 客户端吗？

是的，它是客户端但是这个组件被放置在我的 Razor 类库@DanielW 中。

我认为这应该有所帮助：https://blazor.tips/blazor-how-to-ready-window-dimensions/

很遗憾我们仍然需要使用 js 互操作。

据说这很快就会修复：github.com/dotnet/aspnetcore/issues/8241

【参考方案1】：

目前只有JS才有可能

public class BoundingClientRect

    public double X  get; set; 
    public double Y  get; set; 
    public double Width  get; set; 
    public double Height  get; set; 
    public double Top  get; set; 
    public double Right  get; set; 
    public double Bottom  get; set; 
    public double Left  get; set; 


private async Task OnElementClick(MouseEventArgs e)

    var result = await JSRuntime.InvokeAsync<BoundingClientRect>("MyDOMGetBoundingClientRect", MyElementReference);

    var x = (int) (e.ClientX - result.Left);
    var y = (int) (e.ClientY - result.Top);
   
   // now you can work with the position relative to the element.

和

<script> MyDOMGetBoundingClientRect = (element, parm) =>  return element.getBoundingClientRect(); ; </script>

【讨论】：

我试过这个但得到：未处理的异常渲染组件：element.getBoundingClientRect 不是函数

澄清一下：我从 OnAfterRenderAsync 调用了 JS。我需要在渲染 div 后立即获取尺寸以传递给包含的 BECanvas 以计算如何动态缩放绘图以适应。我特别担心当页面缩小以适合打印页面时，我可以重新绘制它以适应它。

您是否检查过元素引用是否已填充？

您收到的错误消息基本上表明您调用 getBoundingClientRect() 的对象不是 html 元素，因此它找不到该函数。也许您传递的是对 Blazor 组件的引用，而不是对 html 元素的引用（两者都用 @ref 表示）？或者，您可能需要等到引用被填充。在 OnAfterRender 中获取您的元素引用，因为在此之前它将为空。

传递引用是有问题的。我终于通过传递元素 ID 让它工作，然后让 javascript 找到它：