How to draw rect on image/slice at correct position

Hi,

I’d like to

1. Click link to navigate and go to a slice by calling switchToImageByIndex(imageIndex)
2. Draw a rectangle on display image(slice)

I’ve done

I can draw by below code but the position of rectangle is incorrect. At first time series display, I click “View slice”, the rect position is incorrect. If I click any button (on header menu), the position of rectangle is moved to new one that as my expected. Please find the attach.

What is my wrong? How can I draw at correct position as my expected one?

I think I need convert the coordinate system but no way. Please help me.

Template.XXX.events({
	'click ul li a'(event) {
	   ...
	   const $element = $('.imageViewerViewport'); 
	   $element.on('cornerstoneimagerendered', onImageRendered); 

	}
})
const onImageRendered = (event, eventData) => {
    const detectedSopInstanceUId = Session.get("detectedSopInstanceUId");

    const instance = aiUtils.getViewportInstanceInfo();
    const currentSopInstanceUid = instance.sopInstanceUid;
    // Checl sopId
    if (currentSopInstanceUid == detectedSopInstanceUId) {

        // Call mark 
        drawRect();
    }
}

function drawRect() {
    ....
    const canvas = activeViewport.querySelector('canvas');
    const context = canvas.getContext('2d');

    context.beginPath();

    // Mark rectangle
    context.strokeStyle = 'red';
    context.lineWidth = 2;
    context.rect(Number(currentPosition.x) - area/4, Number(currentPosition.y) - area/4, area/2, area/2);
    // Draw
    context.stroke(); 
}

[dannyrb]

@liuchen1393193701, please stop leaving short, unhelpful comments across many issues. If you need assistance, please:

• Create a new GitHub issue in the appropriate repository
• Describe what you have already tried and your results
• If relevant, include a minimal reproduction or example

At that point, if you are not receiving the answers you need to resolve your issue, you may want to consider paid support from an expert.

Best of luck ^_^

As a heads up, I have removed some of the less helpful comments.

[lam0620]

Hi @dannyrb

I’ve just solved my issues.

I check sopInstanceUid is my expected SopId and current element has no toolData, made rectangleRoi.

toolData = cornerstoneTools.getToolState(element, 'rectangleRoi');

Thank you for your support.