使用Blazor组件实现可滚动的图片堆栈

Question

使用Blazor组件实现可滚动的图片堆栈

c#blazor

4

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

- normal chemist

可能的，是的。一个堆栈中有多少图像，每个图像有多大？ - Mister Magoo

你会很难在浏览器中加载所有这些内容，所以我想你只需要在任何时候仅保留当前±1张图片，而这在Blazor中相对容易管理。我可能会看一下三个图像元素堆叠在一起，然后只是操作样式来翻转它们，并且预加载下一组图片。 - Mister Magoo

如果你正在考虑使用服务器端的Blazor/Razor组件，由于图像的大小和SignalR通信的原因，事情会变得更加棘手。 - Mister Magoo

是的，我想这会有很多好的下采样算法，但一次只加载几个也是一个好主意。我遇到的问题是Blazor如何处理滚动事件以及如何在图像div中捕获它，而在JS中似乎是相当普遍的。但是，我正在使用Blazor，所以我想先探索C#选项。 - normal chemist

有鼠标和触摸事件，但我还没有尝试过您需要的内容，所以不知道它们是否合适。 - Mister Magoo

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mister Magoo · Accepted Answer

这是一个极其基础的图像堆栈实现 - 你可能需要为高分辨率图像进行优化。

<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下图像文件的字符串。

您需要根据所需的图像位置存储方法进行调整。