使用 Blazor 组件的可滚动图像堆栈

Question

是否可以使用 C# 在 Blazor 应用程序中创建可滚动的图像堆栈，就像您在 DICOM 查看器中看到的那样？还是这更适合 JavaScript？我有所有我想滚动浏览的图像作为位图，但我不知道如何在不使用 JS 的情况下在 Blazor 中使用滚动事件。

Answer 1

这是图像堆栈的极其基本的实现 - 您可能需要针对高分辨率图像对其进行优化。

<h1>ImageStack</h1>

<div class="container-fluid">
    <div class="row">@img</div>
    <div class="row"><img src="@img" onmousewheel="@MouseWheel" /></div>
</div>

@functions
{

  int imgNumber = 0;
  string img => $"/images/explosion {imgNumber}.png";

  Task MouseWheel(UIWheelEventArgs args)
  {
      imgNumber += Math.Sign(args.DeltaY);
      if (imgNumber == 43) imgNumber = 0;
      if (imgNumber == -1) imgNumber = 42;
      return Task.CompletedTask;
  }
}

DeltaY returns 取决于鼠标滚轮移动方向的正数或负数。

我正在处理一组名为 "explosion N.png" 的 43 张图像，其中 N 的范围从 0 到 42。

img 标签绑定了 "onmousewheel" 到 MouseWheel 方法，该方法简单地增加或减少 imgNumber（并将其保持在 0 到 42 的范围内）。

img "src" 绑定到属性 "img"，它构建了一个指向 wwwroot 下图像文件的字符串。

您需要将该系统调整为您需要的任何存储图像位置的方法。

使用 Blazor 组件的可滚动图像堆栈

Scrollable image stack using Blazor Component

c#

blazor