# Stack Tools

An image stack is collection of one or more images that are closely related.

The best example of this is a CT or MRI series. A stack can include all images in a series or a subset of them. A stack can even include images from different series in different studies. When changing images in a stack, Cornerstone will apply the existing viewport settings to the new image as well as any stack specific tool data. This would allow a user to zoom in on an image in a stack and then cine to subsequent images and stay zoomed in.

# Creating a stack

A Stack in Cornerstone is defined as an object with the following properties:

Property Type Meaning
imageIds Array Array of Cornerstone imageIds
currentImageIdIndex Number Current index in the stack. This can be used to retrieve which slice the user is currently viewing.
Options Stack Options (optional) Options for the current Stack

# Stack Options

The list of available stack options are:

Property Type Meaning
opacity Number
(optional, default: 1)
The global alpha-level opacity of the images in the Stack. When set, this will change the display of the current stack.
visible Boolean
(optional, default: true)
Whether or not the current stack should be visible when displayed in a composite set of images
name String
(optional)
The name of the current stack, to be used when creating a new Cornerstone Layer for displaying this stack.
viewport Viewport (optional) Initial viewport settings for the current stack when displayed in a composite set of imageIds

# Usage


// Define an array of Image IDs
const imageIds = [
    'example://1',
    'example://2',
    'example://3'
];

// Define the Stack object
const stack = {
    currentImageIdIndex : 0,
    imageIds: imageIds
};

// Enable the DOM Element for use with Cornerstone
cornerstone.enable(element);

// Load the first image in the stack
cornerstone.loadImage(imageIds[0]).then(function(image) {
    // Display the first image
    cornerstone.displayImage(element, image);

    // Add the stack tool state to the enabled element
    cornerstoneTools.addStackStateManager(element, ['stack']);
    cornerstoneTools.addToolState(element, 'stack', stack);
});