javascript - 使用单个基石对象显示多个图像

Question

我正在尝试使用cornerstonejs/工具来实现一个加载多个图像的 View (假设一个元素中有4*4图像)。除了第一个图像之外，我不需要保存所有图像的状态。对于此图像，我已经有一个状态管理器和一个基石元素。

据我所知，基础工具中没有任何工具可以在同一 Canvas 中显示多个图像。实现这一计划的正确方法是什么？ 我的想法是为单独的图像加载单独的基石对象，从而为每个图像使用不同的 Canvas ，如 here 中的示例所示.

<script>
    // image enable the elements
    const mr1 = document.getElementById('mr1');
    cornerstone.enable(mr1);
    const mr2 = document.getElementById('mr2');
    cornerstone.enable(mr2);
    const ct1 = document.getElementById('ct1');
    cornerstone.enable(ct1);
    // load and display the images
    cornerstone.loadAndCacheImage('example://1').then(function(image) {
        cornerstone.displayImage(mr1, image);
    });
    cornerstone.loadAndCacheImage('example://2').then(function(image) {
        cornerstone.displayImage(mr2, image);
    });
    cornerstone.loadAndCacheImage('ctexample://1').then(function(image) {
        cornerstone.displayImage(ct1, image);
    });
</script>

是否有更好的方法来实现这一点，使我不必为每个图像创建基石对象，但为图像提供独立的基本功能(缩放、平移等不需要保存的地方)。

Answer 1

最好的方法是按照您的建议，为每个视口(viewport)/图像/图像堆栈创建一个单独的基石启用元素。 Cornerstone 内部使用启用的元素来跟踪各种事件，例如事件、图像缩放/窗口/级别，以及基于 Canvas 元素调整图像大小，因此尝试强制多个图像显示在同一元素中会非常困惑。