Question: How to Get Correct Image Coordinates from Mouse Click in Cornerstone Viewer

[HamzaGbada]

I’m working on an Angular-based DICOM viewer using Cornerstone.js and I’m trying to correctly map the mouse click position (from the viewer) to image-space coordinates — i.e., the true pixel coordinates inside the original DICOM image.

Currently, when I click on the image, I am not able to retrieve coordinates, but they change when zooming or panning. I understand this happens because I’m mixing screen or client coordinates with the viewport transforms, but I haven’t figured out the proper Cornerstone API usage to fix it.

Goal

When a user clicks on the image (even after zooming or panning), the selected (x, y) coordinates should:

• Always correspond to the same pixel in the image.
• Be stable regardless of zoom or pan.
• Match what Cornerstone internally considers the pixel position.

The goal is to send correct (x, y) pixel coordinates to the backend for region-based analysis.
When zoomed or panned, the coordinate system should stay anchored to the image pixels — not the viewport.

Current Implementation

private setupMouseClickHandler(element: HTMLElement): void {
  element.addEventListener('click', (event: MouseEvent) => {
    try {
      const enabledElement = cornerstone.getEnabledElement(element);
      if (enabledElement && enabledElement.image) {
        const imagePoint = cornerstone.pageToPixel(element, event.screenX, event.screenY);

        this.selectedX = Math.ceil(imagePoint.x);
        this.selectedY = Math.ceil(imagePoint.y);

        this.drawMarker(element, imagePoint.x, imagePoint.y);

        this.snackBar.open(`Selected coordinates: (${this.selectedX}, ${this.selectedY})`, 'Close', {
          duration: 2000
        });
      }
    } catch (error) {
      console.error('Error getting pixel coordinates:', error);
    }
  });
}

I tried:

• pageToPixel(element, event.pageX, event.pageY)
• pageToPixel(element, event.clientX, event.clientY)
• pageToPixel(element, event.offsetX, event.offsetY)
• pageToPixel(element, event.screenX, event.screenY)

but none give consistent coordinates when zooming or panning.

Question

What is the recommended Cornerstone method to convert a mouse click event (from the DOM element) into the correct image-space pixel coordinates — independent of zoom and pan?

Should I be using:

• cornerstone.pixelToCanvas or another transformation API?
• The event handlers from cornerstone-tools instead of raw mouse events?
• The viewport.scale or translation from getViewport() in the calculation?

Environment

• Framework: Angular 17

• Cornerstone Packages:

  • cornerstone-core
  • cornerstone-tools
  • cornerstone-wado-image-loader

• Browser: Chrome 129

• Backend: FastAPI (for ROI-based image processing)

If anyone has an example or best practice for this coordinate conversion in Cornerstone (or a reference from the docs), I’d appreciate your guidance!

[No-Dream-No-Life]

这是来自QQ邮箱的假期自动回复邮件。 您好，邮件我已收到，我将在看到后第一时间给您回复。