How to use drawing API

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

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

I hope this helps.

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?

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.

I am also attempting to draw bounding box on DICOM images.
I’ve implemented a new extension panel on the right-hand side. As part of my work requirements, I need to overlay rectangles (with our bounding box coordinates) onto images. I intend to utilize the RectangleROI and RectangleROITools methods to achieve this functionality. Specifically, I aim to trigger the display of rectangles with predefined coordinates whenever a button on the side panel, say the “Positive” button, is clicked. While I’ve come across documentation detailing the addition of custom tools, I’m currently seeking guidance on how to call existing annotation tool such as RectangleROI to display rectangles whenever the buttons on my extension panel are activated. I want to achieve the results displayed on the attached image without using the Rectangle tool on the dropdown list on UI.

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.

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