使用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标签有一个绑定"onmousewheel"到MouseWheel方法,它简单地递增或递减imgNumber(并将其保持在0到42的范围内).

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

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