Использование CornerstoneJs с Flutter Web

Я пытаюсь использовать краеугольный камень для отображения медицинских изображений с помощью Flutter Web с использованием js:interop. Я начну с минимального примера, а пока могу включить инициализацию WADOImageLoader и элемента DOM.

       void initState() {
    super.initState();

    dicomElement = DivElement()
      ..id = 'cornerstone_viewer'
      ..style.width = '512px'
      ..style.height = '512px'
      ..style.border = '1px solid green';

    // ignore: UNDEFINED_PREFIXED_NAME
    ui.platformViewRegistry.registerViewFactory(
        'cornerstone_viewer', (int viewId) => dicomElement);
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstone.enable(dicomElement);

    widget.imageIds.forEach((imageId) {
              promiseToFuture<CornerstoneImage>(cornerstone.loadImage(imageId)).then((image) {
                cornerstone.displayImage(dicomElement, image);
              });
            });
          }),
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      child: HtmlElementView(viewType: 'cornerstone_viewer'),
    );
  }

Но изображение не отображается! В консоли браузера нет ничего, что могло бы помочь мне понять, почему это не работает. Единственное, что я вижу, это то, что элемент холста DOM, созданный краеугольным камнем, имеет ширину и высоту 0 пикселей, что не так, когда я использую чистую реализацию javascript/React. Но я не уверен, что это основная причина этой проблемы.

      <div style="width: 512px; height: 512px; border: 1px solid green;">
  <canvas class="cornerstone-canvas" width="0" height="0" style="display: block; width: 0px; height: 0px;"></canvas>
</div>

Я понятия не имею, что я делаю неправильно: это проблема с взаимодействием Flutter или что-то не так с краеугольным камнем? Есть ли способ отладить или понять, почему изображения не отображаются?

0 ответов

Другие вопросы по тегам