Skip to content

Commit

Permalink
Fix mask and measurement bugs when image is rotated. This fixes #303
Browse files Browse the repository at this point in the history
  • Loading branch information
@ankitrohatgi
ankitrohatgi committed Jan 11, 2024
1 parent 2640a8c commit 3b5fdf4
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 22 deletions.
33 changes: 19 additions & 14 deletions app/javascript/tools/maskTools.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@ wpd.BoxMaskTool = (function() {
var isDrawing = false,
topImageCorner, topScreenCorner,
ctx = wpd.graphicsWidget.getAllContexts(),
moveTimer, screen_pos,
moveTimer, screen_pos, canvas_pos,

mouseMoveHandler =
function() {
wpd.graphicsWidget.resetHover();
ctx.hoverCtx.strokeStyle = "rgb(0,0,0)";
ctx.hoverCtx.strokeRect(topScreenCorner.x, topScreenCorner.y,
screen_pos.x - topScreenCorner.x,
screen_pos.y - topScreenCorner.y);
canvas_pos.x - topScreenCorner.x,
canvas_pos.y - topScreenCorner.y);
},

mouseUpHandler =
Expand All @@ -46,8 +46,9 @@ wpd.BoxMaskTool = (function() {
isDrawing = false;
wpd.graphicsWidget.resetHover();
ctx.dataCtx.fillStyle = "rgba(255,255,0,1)";
let canvasPos = wpd.graphicsWidget.canvasPx(pos.x, pos.y);
ctx.dataCtx.fillRect(topScreenCorner.x, topScreenCorner.y,
pos.x - topScreenCorner.x, pos.y - topScreenCorner.y);
canvasPos.x - topScreenCorner.x, canvasPos.y - topScreenCorner.y);
ctx.oriDataCtx.fillStyle = "rgba(255,255,0,1)";
ctx.oriDataCtx.fillRect(topImageCorner.x, topImageCorner.y,
imagePos.x - topImageCorner.x,
Expand All @@ -68,13 +69,13 @@ wpd.BoxMaskTool = (function() {
return;
isDrawing = true;
topImageCorner = imagePos;
topScreenCorner = pos;
topScreenCorner = wpd.graphicsWidget.canvasPx(pos.x, pos.y);
};

this.onMouseMove = function(ev, pos, imagePos) {
if (isDrawing === false)
return;
screen_pos = pos;
canvas_pos = wpd.graphicsWidget.canvasPx(pos.x, pos.y);
clearTimeout(moveTimer);
moveTimer = setTimeout(mouseMoveHandler, 2);
};
Expand Down Expand Up @@ -115,9 +116,9 @@ wpd.PenMaskTool = (function() {
var strokeWidth, ctx = wpd.graphicsWidget.getAllContexts(),
isDrawing = false,
moveTimer,
screen_pos, image_pos, mouseMoveHandler = function() {
screen_pos, canvas_pos, image_pos, mouseMoveHandler = function() {
ctx.dataCtx.strokeStyle = "rgba(255,255,0,1)";
ctx.dataCtx.lineTo(screen_pos.x, screen_pos.y);
ctx.dataCtx.lineTo(canvas_pos.x, canvas_pos.y);
ctx.dataCtx.stroke();

ctx.oriDataCtx.strokeStyle = "rgba(255,255,0,1)";
Expand All @@ -135,12 +136,13 @@ wpd.PenMaskTool = (function() {
this.onMouseDown = function(ev, pos, imagePos) {
if (isDrawing === true)
return;
var lwidth = parseInt(document.getElementById('paintThickness').value, 10);
let lwidth = parseInt(document.getElementById('paintThickness').value, 10);
let canvasPos = wpd.graphicsWidget.canvasPx(pos.x, pos.y);
isDrawing = true;
ctx.dataCtx.strokeStyle = "rgba(255,255,0,1)";
ctx.dataCtx.lineWidth = lwidth * wpd.graphicsWidget.getZoomRatio();
ctx.dataCtx.beginPath();
ctx.dataCtx.moveTo(pos.x, pos.y);
ctx.dataCtx.moveTo(canvasPos.x, canvasPos.y);

ctx.oriDataCtx.strokeStyle = "rgba(255,255,0,1)";
ctx.oriDataCtx.lineWidth = lwidth;
Expand All @@ -152,6 +154,7 @@ wpd.PenMaskTool = (function() {
if (isDrawing === false)
return;
screen_pos = pos;
canvas_pos = wpd.graphicsWidget.canvasPx(pos.x, pos.y);
image_pos = imagePos;
clearTimeout(moveTimer);
moveTimer = setTimeout(mouseMoveHandler, 2);
Expand Down Expand Up @@ -186,12 +189,12 @@ wpd.EraseMaskTool = (function() {
var strokeWidth, ctx = wpd.graphicsWidget.getAllContexts(),
isDrawing = false,
moveTimer,
screen_pos, image_pos, mouseMoveHandler = function() {
screen_pos, canvas_pos, image_pos, mouseMoveHandler = function() {
ctx.dataCtx.globalCompositeOperation = "destination-out";
ctx.oriDataCtx.globalCompositeOperation = "destination-out";

ctx.dataCtx.strokeStyle = "rgba(255,255,0,1)";
ctx.dataCtx.lineTo(screen_pos.x, screen_pos.y);
ctx.dataCtx.lineTo(canvas_pos.x, canvas_pos.y);
ctx.dataCtx.stroke();

ctx.oriDataCtx.strokeStyle = "rgba(255,255,0,1)";
Expand All @@ -209,15 +212,16 @@ wpd.EraseMaskTool = (function() {
this.onMouseDown = function(ev, pos, imagePos) {
if (isDrawing === true)
return;
var lwidth = parseInt(document.getElementById('eraseThickness').value, 10);
let lwidth = parseInt(document.getElementById('eraseThickness').value, 10);
let canvasPos = wpd.graphicsWidget.canvasPx(pos.x, pos.y);
isDrawing = true;
ctx.dataCtx.globalCompositeOperation = "destination-out";
ctx.oriDataCtx.globalCompositeOperation = "destination-out";

ctx.dataCtx.strokeStyle = "rgba(0,0,0,1)";
ctx.dataCtx.lineWidth = lwidth * wpd.graphicsWidget.getZoomRatio();
ctx.dataCtx.beginPath();
ctx.dataCtx.moveTo(pos.x, pos.y);
ctx.dataCtx.moveTo(canvasPos.x, canvasPos.y);

ctx.oriDataCtx.strokeStyle = "rgba(0,0,0,1)";
ctx.oriDataCtx.lineWidth = lwidth;
Expand All @@ -230,6 +234,7 @@ wpd.EraseMaskTool = (function() {
return;
screen_pos = pos;
image_pos = imagePos;
canvas_pos = wpd.graphicsWidget.canvasPx(pos.x, pos.y);
clearTimeout(moveTimer);
moveTimer = setTimeout(mouseMoveHandler, 2);
};
Expand Down
11 changes: 4 additions & 7 deletions app/javascript/tools/measurementTools.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,18 +126,15 @@ wpd.AddMeasurementTool = (function() {

// need to rotate the values to the current rotation before translating to screenPx
const currentRotation = wpd.graphicsWidget.getRotation();
const {
x: px,
y: py
} = wpd.graphicsWidget.getRotatedCoordinates(0, currentRotation,
plist[(pointsCaptured - 1) * 2], plist[(pointsCaptured - 1) * 2 + 1]);

const px = plist[(pointsCaptured - 1) * 2];
const py = plist[(pointsCaptured - 1) * 2 + 1];
var prevScreenPx = wpd.graphicsWidget.screenPx(px, py);

ctx.hoverCtx.beginPath();
ctx.hoverCtx.strokeStyle = "rgb(0,0,0)";
ctx.hoverCtx.moveTo(prevScreenPx.x, prevScreenPx.y);
ctx.hoverCtx.lineTo(pos.x, pos.y);
let canvasPos = wpd.graphicsWidget.canvasPx(pos.x, pos.y);
ctx.hoverCtx.lineTo(canvasPos.x, canvasPos.y);
ctx.hoverCtx.stroke();
}
};
Expand Down
17 changes: 16 additions & 1 deletion app/javascript/widgets/graphicsWidget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,18 @@ wpd.graphicsWidget = (function() {
}
}

// get canvas coords from screen coords
function canvasPx(screenX, screenY) {
if (rotation === 0) {
return {
x: screenX,
y: screenY
};
} else {
return getRotatedCoordinates(rotation, 0, screenX, screenY);
}
}

// get screen pixel when image pixel is provided
function screenPx(imageX, imageY) {
return {
Expand Down Expand Up @@ -346,7 +358,9 @@ wpd.graphicsWidget = (function() {
}

function resetHover() {
$hoverCanvas.width = $hoverCanvas.width;
// canvas could be rotated, so get max screenX and screenY
let canvasDims = screenPx(originalWidth, originalHeight);
hoverCtx.clearRect(0, 0, canvasDims.x, canvasDims.y);
}

function toggleExtendedCrosshair(ev) { // called when backslash is hit
Expand Down Expand Up @@ -857,6 +871,7 @@ wpd.graphicsWidget = (function() {
resetHover: resetHover,
imagePx: imagePx,
screenPx: screenPx,
canvasPx: canvasPx,
screenLength: screenLength,

updateZoomOnEvent: updateZoomOnEvent,
Expand Down

0 comments on commit 3b5fdf4

Please sign in to comment.