使用Javascript获取Blazor页面的大小

sbtkgmzw  于 2023-01-16  发布在  Java
关注(0)|答案(2)|浏览(373)

我正在用Blazor学习JSInterop。我想得到一个Blazor页面的宽度和高度。
我使用默认的Blazor模板,菜单栏位于屏幕左侧。

在画布测试1页面的html部分,我有:

@page "/canvas_test1"
@inject IJSRuntime JsRuntime
<canvas @ref="canvas1"></canvas>
<button @onclick="SetCanvasSize">Set canvas size</button>

在代码部分我有:

ElementReference canvas1;
async Task SetCanvasSize()
{
    await JsRuntime.InvokeVoidAsync("SetCanvasSize", canvas1);
}

在Javascript文件中,我有:

function SetCanvasSize(element) {
ctx = element.getContext('2d');
console.log(window.innerWidth);
console.log(document.documentElement.scrollWidth);
}

但是这两种方法 * window.innerWidth * 和 * document.documentElement.scrollWidth * 都给予了整个窗口的宽度,而不仅仅是包含画布的页面。
我怎样才能得到没有侧边菜单的页面的宽度?
谢谢

f4t66c6m

f4t66c6m1#

我想你对Blazor中的Page有点困惑,它基本上是一个组件,你可以提供一个导航路径。(这通常是默认设置的),那实际上是页面的一部分,页面上所有的东西,就像你的画布一样,都只是html元素,它是正确地告诉你窗口的大小,你可以看到,如果你调整浏览器的大小,它会改变。
html元素具有属性“offsetWidth”和“offsetHeight”。因此,为了便于使用,您需要将该元素传递给measure,并使用element.offsetWidth

function GetCanvasSize(element) {
     alert ("Element measurements: " + element.offsetWidth + ", " + element.offsetHeight);
}

您可以在这里看到更多HTML元素的成员,包括常用的方法和事件:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
注意,这个列表缺少一些你想知道的重要信息,特别是在移动的客户端拖动元素所需的各种触摸事件(鼠标事件在手机上不起作用)。

qacovj5a

qacovj5a2#

你需要获取包含元素的尺寸,还需要监听调整大小事件。
我使用了一个服务,它可以获取任何元素的引用并侦听更改。
bCore.js

export function listenToWindowResize(dotNetHelper) {

    function resizeEventHandler() {
        dotNetHelper.invokeMethodAsync('WindowResizeEvent');
    }

    window.addEventListener("resize", resizeEventHandler);

    dotNetHelper.invokeMethodAsync('WindowResizeEvent');
}

export function getBoundingRectangle(element, parm) {
    return element.getBoundingClientRect();
}

export function getWindowSizeDetails(parm) {

    var e = window, a = 'inner';

    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || document.body;
    }

    let windowSize =
    {
        innerWidth: e[a + 'Width'],
        innerHeight: e[a + 'Height'],
        screenWidth: window.screen.width,
        screenHeight: window.screen.height
    };

    return windowSize;
}

JSInteropCoreService.cs
x一个一个一个一个x一个一个二个x
我使用25毫秒的间隔来消除调整大小事件的抖动,以防止延迟。

相关问题