Использование 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 или что-то не так с краеугольным камнем? Есть ли способ отладить или понять, почему изображения не отображаются?