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

Javascript 使用单个基石对象显示多个图像,javascript,canvas,cornerstonejs,Javascript,Canvas,Cornerstonejs,我正在尝试使用cornerstonejs/tools在一个元素中加载多个图像,比如说4*4个图像。我不需要为所有这些图像保存状态,除了第一个图像。对于这个图像,我已经有了一个状态管理器和一个基石元素 据我所知,基石工具中没有能够在同一画布中显示多个图像的工具。实施该计划的正确方法是什么? 我的想法是为不同的图像加载不同的基石对象,从而为每个图像使用不同的画布,如本例所示 有没有更好的方法来实现这一点,我不必为每个图像创建基石对象,但有独立的基本功能缩放、平移等,而不需要保存图像 最好的方法是按照

我正在尝试使用cornerstonejs/tools在一个元素中加载多个图像,比如说4*4个图像。我不需要为所有这些图像保存状态,除了第一个图像。对于这个图像,我已经有了一个状态管理器和一个基石元素

据我所知,基石工具中没有能够在同一画布中显示多个图像的工具。实施该计划的正确方法是什么? 我的想法是为不同的图像加载不同的基石对象,从而为每个图像使用不同的画布,如本例所示


有没有更好的方法来实现这一点,我不必为每个图像创建基石对象,但有独立的基本功能缩放、平移等,而不需要保存图像

最好的方法是按照您的建议,为每个视口/图像/图像堆栈创建一个单独的启用基石的元素。基石内部使用enabled元素跟踪各种事件、图像缩放/窗口/级别,以及基于canvas元素调整图像大小,因此试图强制在同一元素中显示多个图像将非常混乱

<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>