othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LT-401 LT-402: Scalebars issues

Browse Source 
LT-401: Scalebars should be pinned to sides of viewport, not sides of
image

LT-402: Scalebar tool breaks on viewport flip and rotation
This commit is contained in:
Leonardo Campos 2017-02-14 19:25:39 -02:00
parent b99b986630
commit 46360c0c95
1 changed files with 62 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
Packages/ohif-lesiontracker/client/compatibility/scaleOverlayTool.js
View File

@ -3,19 +3,26 @@
'use strict'; 'use strict';
// Draw Intervals function drawLine(context, startPoint, endPoint, config) {
function drawIntervals (context, config) { context.beginPath();
context.strokeStyle = config.color;
var i = 0; context.lineWidth = config.lineWidth;
context.moveTo(startPoint.x, startPoint.y);
context.lineTo(endPoint.x, endPoint.y);
context.stroke();
}
function drawVerticalScalebarIntervals (context, config) {
let i = 0;
while (config.verticalLine.start.y + i * config.verticalMinorTick <= config.vscaleBounds.bottomRight.y) { while (config.verticalLine.start.y + i * config.verticalMinorTick <= config.vscaleBounds.bottomRight.y) {
var startPoint = { const startPoint = {
x: config.verticalLine.start.x, x: config.verticalLine.start.x,
y: config.verticalLine.start.y + i * config.verticalMinorTick y: config.verticalLine.start.y + i * config.verticalMinorTick
}; };
var endPoint = { const endPoint = {
x: 0, x: 0,
y: config.verticalLine.start.y + i * config.verticalMinorTick y: config.verticalLine.start.y + i * config.verticalMinorTick
}; };
@ -27,26 +34,23 @@
endPoint.x = config.verticalLine.start.x - config.minorTickLength; endPoint.x = config.verticalLine.start.x - config.minorTickLength;
} }
context.beginPath(); drawLine(context, startPoint, endPoint, config);
context.strokeStyle = config.color;
context.lineWidth = config.lineWidth;
context.moveTo(startPoint.x, startPoint.y);
context.lineTo(endPoint.x, endPoint.y);
context.stroke();
i++; i++;
} }
}
i = 0; function drawHorizontalScalebarIntervals (context, config) {
let i = 0;
while (config.horizontalLine.start.x + i * config.horizontalMinorTick <= config.hscaleBounds.bottomRight.x) { while (config.horizontalLine.start.x + i * config.horizontalMinorTick <= config.hscaleBounds.bottomRight.x) {
startPoint = { const startPoint = {
x: config.horizontalLine.start.x + i * config.horizontalMinorTick, x: config.horizontalLine.start.x + i * config.horizontalMinorTick,
y: config.horizontalLine.start.y y: config.horizontalLine.start.y
}; };
endPoint = { const endPoint = {
x: config.horizontalLine.start.x + i * config.horizontalMinorTick, x: config.horizontalLine.start.x + i * config.horizontalMinorTick,
y: 0 y: 0
}; };
@ -57,73 +61,60 @@
endPoint.y = config.horizontalLine.start.y - config.minorTickLength; endPoint.y = config.horizontalLine.start.y - config.minorTickLength;
} }
context.beginPath(); drawLine(context, startPoint, endPoint, config);
context.strokeStyle = config.color;
context.lineWidth = config.lineWidth;
context.moveTo(startPoint.x, startPoint.y);
context.lineTo(endPoint.x, endPoint.y);
context.stroke();
i++; i++;
} }
} }
// Draws long horizontal and vertical lines function drawVerticalScalebar(context, config) {
function drawFrameLines(context, config){ const startPoint = {
// Vertical Line
var startPoint = {
x: config.verticalLine.start.x, x: config.verticalLine.start.x,
y: config.verticalLine.start.y y: config.verticalLine.start.y
}; };
var endPoint = { const endPoint = {
x: config.verticalLine.end.x, x: config.verticalLine.end.x,
y: config.verticalLine.end.y y: config.verticalLine.end.y
}; };
context.beginPath(); drawLine(context, startPoint, endPoint, config);
context.strokeStyle = config.color; drawVerticalScalebarIntervals(context, config);
context.lineWidth = config.lineWidth; }
context.moveTo(startPoint.x, startPoint.y);
context.lineTo(endPoint.x, endPoint.y);
context.stroke();
// Horizontal line function drawHorizontalScalebar(context, config) {
startPoint = { const startPoint = {
x: config.horizontalLine.start.x , x: config.horizontalLine.start.x ,
y: config.horizontalLine.start.y y: config.horizontalLine.start.y
}; };
endPoint = { const endPoint = {
x: config.horizontalLine.end.x, x: config.horizontalLine.end.x,
y: config.horizontalLine.end.y y: config.horizontalLine.end.y
}; };
context.beginPath(); drawLine(context, startPoint, endPoint, config);
context.strokeStyle = config.color; drawHorizontalScalebarIntervals(context, config);
context.lineWidth = config.lineWidth; }
context.moveTo(startPoint.x, startPoint.y);
context.lineTo(endPoint.x, endPoint.y);
context.stroke();
// Draw intervals function drawScalebars(context, config){
drawIntervals(context, config); context.shadowColor = config.shadowColor;
context.shadowBlur = config.shadowBlur;
drawVerticalScalebar(context, config);
drawHorizontalScalebar(context, config);
} }
// Computes the max bound for scales on the image // Computes the max bound for scales on the image
function computeScaleBounds(eventData, canvasSize, imageSize, horizontalReduction, verticalReduction) { function computeScaleBounds(eventData, canvasSize, imageSize, horizontalReduction, verticalReduction) {
var canvasBounds = { let canvasBounds = {
left: 0, left: 0,
top: 0, top: 0,
width: canvasSize.width, width: canvasSize.width,
height: canvasSize.height height: canvasSize.height
}; };
var hReduction = horizontalReduction * Math.min(1000, canvasSize.width); const hReduction = horizontalReduction * Math.min(1000, canvasSize.width);
var vReduction = verticalReduction * Math.min(1000, canvasSize.height); const vReduction = verticalReduction * Math.min(1000, canvasSize.height);
canvasBounds = { canvasBounds = {
left: canvasBounds.left + hReduction, left: canvasBounds.left + hReduction,
top: canvasBounds.top + vReduction, top: canvasBounds.top + vReduction,
@ -131,37 +122,16 @@
height: canvasBounds.height - 2 * vReduction height: canvasBounds.height - 2 * vReduction
}; };
var startPoint = { return {
x: 0, topLeft: {
y: 0 x: canvasBounds.left,
y: canvasBounds.top
},
bottomRight: {
x: canvasBounds.left + canvasBounds.width,
y: canvasBounds.top + canvasBounds.height
}
}; };
var startPointImageBounds = {
x: startPoint.x,
y: startPoint.y
};
var endPointImageBounds = {
x: startPoint.x + imageSize.width,
y: startPoint.y + imageSize.height
};
var startPointCanvasImageBounds = cornerstone.pixelToCanvas(eventData.element, startPointImageBounds);
var endPointCanvasImageBounds = cornerstone.pixelToCanvas(eventData.element, endPointImageBounds);
var imageBoundsWidth = Math.abs(startPointCanvasImageBounds.x - endPointCanvasImageBounds.x);
var imageBoundsHeight = Math.abs(startPointCanvasImageBounds.y - endPointCanvasImageBounds.y);
hReduction = horizontalReduction * imageBoundsWidth;
vReduction = verticalReduction * imageBoundsHeight;
var imageBounds = {
left: startPointCanvasImageBounds.x + hReduction,
top: startPointCanvasImageBounds.y + vReduction,
width: imageBoundsWidth - 2 * hReduction,
height: imageBoundsHeight - 2 * vReduction
};
return cornerstoneMath.rect.getIntersectionRect(canvasBounds, imageBounds);
} }
function onImageRendered(e, eventData) { function onImageRendered(e, eventData) {
@ -171,33 +141,33 @@
return; return;
} }
var viewport = cornerstone.getViewport(eventData.enabledElement.element); const viewport = cornerstone.getViewport(eventData.enabledElement.element);
if (!viewport) { if (!viewport) {
return; return;
} }
var canvasSize = { const canvasSize = {
width: eventData.enabledElement.canvas.width, width: eventData.enabledElement.canvas.width,
height: eventData.enabledElement.canvas.height height: eventData.enabledElement.canvas.height
}; };
var imageSize = { const imageSize = {
width: eventData.enabledElement.image.width , width: eventData.enabledElement.image.width ,
height: eventData.enabledElement.image.height height: eventData.enabledElement.image.height
}; };
// Distance between intervals is 10mm // Distance between intervals is 10mm
var verticalIntervalScale = (10.0 / eventData.enabledElement.image.rowPixelSpacing) * eventData.viewport.scale; const verticalIntervalScale = (10.0 / eventData.enabledElement.image.rowPixelSpacing) * eventData.viewport.scale;
var horizontalIntervalScale = (10.0 / eventData.enabledElement.image.rowPixelSpacing) * eventData.viewport.scale; const horizontalIntervalScale = (10.0 / eventData.enabledElement.image.rowPixelSpacing) * eventData.viewport.scale;
// 0.1 and 0.05 gives margin to horizontal and vertical lines // 0.1 and 0.05 gives margin to horizontal and vertical lines
var hscaleBounds = computeScaleBounds(eventData, canvasSize, imageSize, 0.1, 0.05); const hscaleBounds = computeScaleBounds(eventData, canvasSize, imageSize, 0.25, 0.05);
var vscaleBounds = computeScaleBounds(eventData, canvasSize, imageSize, 0.05, 0.1); const vscaleBounds = computeScaleBounds(eventData, canvasSize, imageSize, 0.05, 0.15);
if (!canvasSize.width || !canvasSize.height || !imageSize.width || !imageSize.height || !hscaleBounds || !vscaleBounds) { if (!canvasSize.width || !canvasSize.height || !imageSize.width || !imageSize.height || !hscaleBounds || !vscaleBounds) {
return; return;
} }
var config = { const config = {
hscaleBounds: hscaleBounds, hscaleBounds: hscaleBounds,
vscaleBounds: vscaleBounds, vscaleBounds: vscaleBounds,
verticalMinorTick: verticalIntervalScale, verticalMinorTick: verticalIntervalScale,
@ -225,18 +195,17 @@
} }
}, },
color: 'white', // TODO: fix this later color: 'white', // TODO: fix this later
lineWidth: cornerstoneTools.toolStyle.getToolWidth() lineWidth: cornerstoneTools.toolStyle.getToolWidth(),
shadowColor: 'black',
shadowBlur: 4
}; };
var context = eventData.enabledElement.canvas.getContext('2d'); const context = eventData.enabledElement.canvas.getContext('2d');
context.setTransform(1, 0, 0, 1, 0, 0); context.setTransform(1, 0, 0, 1, 0, 0);
context.save(); context.save();
// Draw frame lines drawScalebars(context, config);
drawFrameLines(context, config);
context.restore(); context.restore();
} }
///////// END IMAGE RENDERING /////// ///////// END IMAGE RENDERING ///////