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

Question

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

Answer 1

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

<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标签具有对MouseWheel方法的绑定“ onmousewheel”，该方法简单地增加或减少imgNumber（并将其保持在0到42的范围内）。

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

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