Magnifier positioning in reftest analyzer

When reftest analyzer shows magnified pixels, there is a seemingly random offset between the mouse position and the magnified position. The reason for this is that reftest analyzer assumes all images have 800 * 1000 pixels but actually the test images have varying sizes.
This commit is contained in:
Jani Pehkonen 2020-03-10 19:09:15 +02:00
parent af8d0b9597
commit e0daabd2dd
2 changed files with 12 additions and 6 deletions

View File

@ -104,7 +104,7 @@ Original author: L. David Baron <dbaron@dbaron.org>
<input type="checkbox" id="differences"> Circle differences <input type="checkbox" id="differences"> Circle differences
</label> </label>
</form> </form>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800px" height="1130px" viewbox="0 0 800 1130" id="svg"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="1000" id="svg">
<defs> <defs>
<!-- use sRGB to avoid loss of data --> <!-- use sRGB to avoid loss of data -->
<filter id="showDifferences" x="0%" y="0%" width="100%" height="100%" <filter id="showDifferences" x="0%" y="0%" width="100%" height="100%"

View File

@ -285,13 +285,13 @@ window.onload = function() {
var img = new Image(); var img = new Image();
img.onload = function() { img.onload = function() {
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
canvas.width = 800; canvas.width = img.naturalWidth;
canvas.height = 1000; canvas.height = img.naturalHeight;
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0); ctx.drawImage(img, 0, 0);
whenReady(ctx.getImageData(0, 0, 800, 1000)); whenReady(ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight));
}; };
img.src = gPath + src; img.src = gPath + src;
} }
@ -323,13 +323,19 @@ window.onload = function() {
} }
cell.style.display = ""; cell.style.display = "";
getImageData(item.images[0], function(data) { getImageData(item.images[0], function(data) {
gImage1Data = data gImage1Data = data;
syncSVGSize(gImage1Data);
}); });
getImageData(item.images[1], function(data) { getImageData(item.images[1], function(data) {
gImage2Data = data gImage2Data = data
}); });
} }
function syncSVGSize(imageData) {
ID("svg").setAttribute("width", imageData.width);
ID("svg").setAttribute("height", imageData.height);
}
function showImage(i) { function showImage(i) {
if (i == 1) { if (i == 1) {
ID("image1").style.display = ""; ID("image1").style.display = "";
@ -397,7 +403,7 @@ window.onload = function() {
var py = y + j; var py = y + j;
var p1 = gMagPixPaths[i + dx_hi][j + dy_hi][0]; var p1 = gMagPixPaths[i + dx_hi][j + dy_hi][0];
var p2 = gMagPixPaths[i + dx_hi][j + dy_hi][1]; var p2 = gMagPixPaths[i + dx_hi][j + dy_hi][1];
if (px < 0 || py < 0 || px >= 800 || py >= 1000) { if (px < 0 || py < 0 || px >= gImage1Data.width || py >= gImage1Data.height) {
p1.setAttribute("fill", "#aaa"); p1.setAttribute("fill", "#aaa");
p2.setAttribute("fill", "#888"); p2.setAttribute("fill", "#888");
} else { } else {