How to use drawing API

Support
1

I’m attempting to use the drawing API (drawing | API | Cornerstone.js) to add bounding boxes, text boxes, etc… to an image stack.

Most API methods in this package expect an SVGDrawingHelper parameter. Where do I get this from? Are there examples for how this API is supposed to be used?

Thanks!
Simon

2

Hi @stemps, the annotation tools use this API… https://github.com/cornerstonejs/cornerstone3D/tree/main/packages/tools/src/tools/annotation.

I hope this helps.

3

Hi @jbocce, I’m still having trouble getting the drawing API to work. I seem to be having some wrong assumptions.

Here’s a minimal code project that tries to draw a rectangle over an image stack:
GitHub - stemps/cornerstonejs-playground at drawing-rectangles (see src/index.js).

The core of the code is:

      const renderingEngineId = 'myRenderingEngine';
      const renderingEngine = new RenderingEngine(renderingEngineId);

      const viewportId = 'MRT_STACK';
      const { ViewportType } = Enums;
      const viewportInput = {
        viewportId,
        element,
        type: ViewportType.STACK,
      };

      renderingEngine.enableElement(viewportInput);

      const viewport = renderingEngine.getViewport(viewportId);
      viewport.setStack(imageIds, 1);
      utilities.stackPrefetch.enable(element);
      viewport.render();

      const drawingHelper = getSvgDrawingHelper(element);
      drawing.drawRect(
        drawingHelper,
        "test-annotation",
        "0",
        [50,50],
        [150,150],
        {
          color: "red"
        }
      );

However, no rectangle is being drawn. Could you point me to where I’m using it wrong?

4

Hmmm… what you have is NOT typically how annotations and the drawing API are utilized. If you have a look at the link I sent previously you will see that there are various annotation (tools) which create and add annotation objects to the viewport elements via the annotationState
addAnnotation function. Each annotation tool has a renderAnnotation (where the svg is drawn) which in turn is triggered via a call to triggerAnnotationRender. I suppose if you add your own annotation tool (say for your own custom rectangle - as there is already a RectangleROITool) you will see your rectangle rendered when/after the viewport is rendered.

What you have MIGHT work if the drawing (drawing.drawRect) were to be scheduled to occur on the next annotation frame (i.e. window.requestAnimationFrame(()=> drawing.drawRect...) but not sure this will work and/or is recommended.

I hope this helps.

6

Hi @Spie, I didn’t manage to get RectangleROI to work for my purpose and eventually gave up and used a canvas overlay to draw rectangles and other annotations.

Maybe you have more luck, but if not, an additional canvas is a totally viable option.

7

Hello @stemps, Yes it’s taking a lot of time to figure out how to do it using RectangleROI. Could you please share how you did the canvas overlay? The above code doesn’t seem to work. Thanks

8

I was able to display rectangle overlay on default images on OHIF’s platform. I would like to do this overlay on a custom stack of images like you did @stemps
I am new to this, I have tried using your code, however, I can’t seem to get it working. Could you please help me figure it out?

Here are the steps that I am taking:

  1. I ran a server to host the PNG images (after resolving the CORS issue). I see the hosted localhost image on this live image website.
  2. I am using your code as is. I know that WebImageLoader is registered. However, the viewport is not getting the image data and I get “CornerstoneTools.stackPrefetch: No images in stack”, “Viewport is too small 0 0” errors.

@stemps @jbocce @mtesopt Can anyone suggest, what I could be doing wrong?

1 Like