Прокручиваемый стек изображений с помощью Blazor Component

Question

Можно ли использовать C # для создания прокручиваемого стека изображений в приложении Blazor, очень похожего на то, что вы видели бы в программе просмотра DICOM? Или это что-то лучше подходит для JavaScript? У меня есть все изображения, которые я хочу прокрутить как растровые изображения, но я не знаю, как использовать событие прокрутки в Blazor без использования JS.

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 возвращает положительное или отрицательное число в зависимости от направления движения колесика мыши.

Я работаю с набором из 43 изображений с именем «взрыва N.png», где N колеблется от 0 до 42.

Тег img имеет привязку «onmousewheel» к методу MouseWheel, который просто увеличивает или уменьшает imgNumber (и сохраняет его в диапазоне от 0 до 42).

img "src" связан со свойством "img", которое создает строку, указывающую на файл изображения в wwwroot.

Вам нужно будет настроить эту систему для любого способа хранения местоположений вашего изображения, который вам требуется.