c# - 使用 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 根据鼠标滚轮的移动方向返回正数或负数。

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

img 标签有一个绑定(bind)到方法 MouseWheel 的“onmousewheel”，它简单地增加或减少 imgNumber(并将其保持在 0 到 42 的范围内)。

img“src”绑定(bind)到属性“img”，它构建一个指向 wwwroot 下图像文件的字符串。

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