Rendering measurement data with cornerstone.

[kongkip]

Hello @sisobus, thanks for this great tool.
I am trying to integrate this tool into an application that uses cornerstone already and I have the drawings passed from another API with the points being cx, cy, radiusX, radiusY, and rotation. My question is how can I render these points?
Currently, this is how I do it but can't seem to render it well, the area and other values remain at zero.

  const measurementData = {
    visible: true,
    active: true,
    invalidated: true,
    handles: {
      end: {
        x: cx,
        y: cy,
        highlight: true,
        active: true,
        key: 'end',
      },
      initialRotation: rotation,
      perpendicularPoint: {
        x: radiusX,
        y: radiusY,
        highlight: true,
        active: false,
        isFirst: true,
        key: 'perpendicular',
      },
      textBox: {
        active: false,
        hasMoved: false,
        movesIndependently: false,
        drawnIndependently: true,
        allowedOutsideImage: true,
        hasBoundingBox: true,
      },
    },
  };

 cornerstoneTools.setToolActive('RotatedEllipticalRoi', {
    mouseButtonMask: 1,
  });
  cornerstoneTools.addToolState(
    element,
    'RotatedEllipticalRoi',
    measurementData
  );

This is how it is rendered, any advice to make this work?

Drawing manually with the tool does actually produce nice results, as seen here.

[sisobus]

Hi @kongkip, thanks for writing the first issue 👍
The measurementData of the manually drawn tool is as below.

{
    "visible": true,
    "active": false,
    "invalidated": false,
    "shortestDistance": 78.95817610237975,
    "handles": {
        "start": {
            "x": 465.625,
            "y": 243.3125,
            "highlight": true,
            "active": false,
            "key": "start"
        },
        "end": {
            "x": 378.125,
            "y": 419.875,
            "highlight": true,
            "active": false,
            "key": "end"
        },
        "perpendicularPoint": {
            "x": 351.127888242691,
            "y": 296.53323443885574,
            "highlight": true,
            "active": false,
            "isFirst": false,
            "key": "perpendicular"
        },
        "initialRotation": 0,
        "textBox": {
            "active": false,
            "hasMoved": false,
            "movesIndependently": false,
            "drawnIndependently": true,
            "allowedOutsideImage": true,
            "hasBoundingBox": true,
            "x": 465.625,
            "y": 331.59375,
            "boundingBox": {
                "width": 141.75537109375,
                "height": 25,
                "left": 308,
                "top": 225
            }
        }
    },
    "cachedStats": {
        "area": 24440.148902987974,
        "count": 15136,
        "mean": 100.96650369978859,
        "variance": 8255.861919752626,
        "stdDev": 90.86177369913393,
        "min": 14,
        "max": 255
    }
}

I think cx, cy are center coordinates of ellipse (I don't know what radiusX, radiusY are).
but this tool needs to have a start point, an end point, and a perpendicular point.
So, You should change the coordinates properly.
The code below works well.

cornerstoneTools.addToolState(
  document.getElementById('cornerstone-element'), 
  'RotatedEllipticalRoi', {
    "visible": true,
    "active": false,
    "invalidated": false,
    "shortestDistance": 78.95817610237975,
    "handles": {
        "start": {
            "x": 465.625,
            "y": 243.3125,
            "highlight": true,
            "active": false,
            "key": "start"
        },
        "end": {
            "x": 378.125,
            "y": 419.875,
            "highlight": true,
            "active": false,
            "key": "end"
        },
        "perpendicularPoint": {
            "x": 351.127888242691,
            "y": 296.53323443885574,
            "highlight": true,
            "active": false,
            "isFirst": false,
            "key": "perpendicular"
        },
        "initialRotation": 0,
        "textBox": {
            "active": false,
            "hasMoved": false,
            "movesIndependently": false,
            "drawnIndependently": true,
            "allowedOutsideImage": true,
            "hasBoundingBox": true,
            "x": 465.625,
            "y": 331.59375,
            "boundingBox": {
                "width": 141.75537109375,
                "height": 25,
                "left": 308,
                "top": 225
            }
        }
    },
    "cachedStats": {
        "area": 24440.148902987974,
        "count": 15136,
        "mean": 100.96650369978859,
        "variance": 8255.861919752626,
        "stdDev": 90.86177369913393,
        "min": 14,
        "max": 255
    }}
);
cornerstone.updateImage(document.getElementById('cornerstone-element'))

[kongkip]

radiusX, radiusY are the points you are referring to as the perpendicular points, and yes cx, cy are the centers. The points I have shown above are obtained from a rotated ellipse and from your answer, it implies that I should have to compute the start and end coordinates, right?.

[sisobus]

Yes, that's exactly right.

[kongkip]

I am a bit lost on the x, and y points in the textbox section, where are they from?

[sisobus]

To display a textbox with specific x,y coordinates, you need to pass the coordinates to the textbox section.
Otherwise, you can exclude the x, y points.

[kongkip]

at the last point of the drawing/drawRotatedEllipse.ts you are drawing on the canvas as

  path(context, options, (context: any) => {
    context.ellipse(
      center.x,
      center.y,
      longestDistance / 2,
      shortestDistance,
      angle,
      0,
      Math.PI * 2,
    )
  }

I have all the points used here. Is there a way to use those points to get start, end, perpendicular,InitialRotation, and boundingbox(left, top, width, height). Can you help out here, I have been trying to calculate these values but the ellipse draw is incorrect.