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.