gridfinder
Advanced tools
Comparing version 1.2.0 to 1.6.0
@@ -1,2 +0,2 @@ | ||
exports['perfect clicks findGrid 1'] = { | ||
exports['findGrid perfect clicks findGrid 1'] = { | ||
"name": "findGrid", | ||
@@ -63,3 +63,3 @@ "behavior": [ | ||
exports['very good clicks findGrid 1'] = { | ||
exports['findGrid very good clicks findGrid 1'] = { | ||
"name": "findGrid", | ||
@@ -98,3 +98,3 @@ "behavior": [ | ||
exports['60x60 https://i.redd.it/9xy7jbjw4wv11.jpg findGrid 1'] = { | ||
exports['findGrid 60x60 https://i.redd.it/9xy7jbjw4wv11.jpg findGrid 1'] = { | ||
"name": "findGrid", | ||
@@ -130,3 +130,3 @@ "behavior": [ | ||
"x": -32.72710453284037, | ||
"y": 54.904605293934864 | ||
"y": 54.04341830541574 | ||
} | ||
@@ -167,3 +167,3 @@ } | ||
"x": 29.798889916743384, | ||
"y": -6.7170746171452835 | ||
"y": -7.406024207960582 | ||
} | ||
@@ -204,3 +204,3 @@ } | ||
"x": 29.971137835337277, | ||
"y": -8.439535132208892 | ||
"y": -9.12848472302419 | ||
} | ||
@@ -248,3 +248,3 @@ } | ||
exports['256x256 https://i.redd.it/m6l4go8l56v51.jpg findGrid 1'] = { | ||
exports['findGrid 256x256 https://i.redd.it/m6l4go8l56v51.jpg findGrid 1'] = { | ||
"name": "findGrid", | ||
@@ -304,3 +304,3 @@ "behavior": [ | ||
"x": -46.265848670757045, | ||
"y": 124.15260142817063 | ||
"y": 116.82385603587807 | ||
} | ||
@@ -333,3 +333,3 @@ } | ||
"x": -4.140417879597938, | ||
"y": -4.144304349458366 | ||
"y": -4.144304349458214 | ||
} | ||
@@ -366,3 +366,3 @@ } | ||
"x": 6.03567415207084, | ||
"y": -11.316532661543476 | ||
"y": -12.576214544428069 | ||
} | ||
@@ -403,3 +403,3 @@ } | ||
"x": 20.997841504778442, | ||
"y": 20.33121445967015 | ||
"y": 17.95427024556227 | ||
} | ||
@@ -479,4 +479,4 @@ } | ||
"offset": { | ||
"x": 5.9309692671397745, | ||
"y": 6.128854537268141 | ||
"x": 6.207256655360515, | ||
"y": 6.110142328299374 | ||
} | ||
@@ -487,1 +487,199 @@ } | ||
} | ||
exports['findOffset works findOffset 1'] = { | ||
"name": "findOffset", | ||
"behavior": [ | ||
{ | ||
"given": { | ||
"points": [ | ||
{ | ||
"x": 2597.300613496932, | ||
"y": 1813.9973492199026 | ||
}, | ||
{ | ||
"x": 5119.018404907975, | ||
"y": 2562.9583759811503 | ||
}, | ||
{ | ||
"x": 5119.018404907975, | ||
"y": 2830.9352571159084 | ||
} | ||
] | ||
}, | ||
"expect": { | ||
"x": 0.11247443762749754, | ||
"y": -0.036339227679566946 | ||
} | ||
}, | ||
{ | ||
"given": { | ||
"points": [ | ||
{ | ||
"x": 5119.018404907975, | ||
"y": 2830.935257115908 | ||
}, | ||
{ | ||
"x": 5112.147239263804, | ||
"y": 2562.95837598115 | ||
}, | ||
{ | ||
"x": 3600.490797546012, | ||
"y": 2549.215971820393 | ||
} | ||
] | ||
}, | ||
"expect": { | ||
"x": 0.21881390593049826, | ||
"y": 0.03653497248357479 | ||
} | ||
}, | ||
{ | ||
"given": { | ||
"points": [ | ||
{ | ||
"x": 1288.880666049953, | ||
"y": 4604.322132248466 | ||
}, | ||
{ | ||
"x": 2573.617021276596, | ||
"y": 1811.061000713393 | ||
}, | ||
{ | ||
"x": 3601.406105457909, | ||
"y": 2557.035783615935 | ||
} | ||
] | ||
}, | ||
"expect": { | ||
"x": -0.36540240518070277, | ||
"y": 0.13963885926477815 | ||
} | ||
}, | ||
{ | ||
"given": { | ||
"points": [ | ||
{ | ||
"x": 1288.880666049953, | ||
"y": 4604.322132248466 | ||
}, | ||
{ | ||
"x": 2573.617021276596, | ||
"y": 1811.061000713393 | ||
}, | ||
{ | ||
"x": 3601.406105457909, | ||
"y": 2557.035783615935 | ||
}, | ||
{ | ||
"x": 5114.079555966698, | ||
"y": 1811.061000713393 | ||
} | ||
] | ||
}, | ||
"expect": { | ||
"x": -0.2541628122111206, | ||
"y": 0.1199793227968371 | ||
} | ||
}, | ||
{ | ||
"given": { | ||
"points": [ | ||
{ | ||
"x": 1288.880666049953, | ||
"y": 4604.322132248466 | ||
}, | ||
{ | ||
"x": 2573.617021276596, | ||
"y": 1811.061000713393 | ||
}, | ||
{ | ||
"x": 3601.406105457909, | ||
"y": 2557.035783615935 | ||
}, | ||
{ | ||
"x": 5114.079555966698, | ||
"y": 1811.061000713393 | ||
}, | ||
{ | ||
"x": 4102.867715078631, | ||
"y": 3332.020696964687 | ||
} | ||
] | ||
}, | ||
"expect": { | ||
"x": -0.22978723404276025, | ||
"y": 0.100122851174865 | ||
} | ||
}, | ||
{ | ||
"given": { | ||
"points": [ | ||
{ | ||
"x": 1288.880666049953, | ||
"y": 4604.322132248466 | ||
}, | ||
{ | ||
"x": 2573.617021276596, | ||
"y": 1811.061000713393 | ||
}, | ||
{ | ||
"x": 3601.406105457909, | ||
"y": 2557.035783615935 | ||
}, | ||
{ | ||
"x": 5114.079555966698, | ||
"y": 1811.061000713393 | ||
}, | ||
{ | ||
"x": 4102.867715078631, | ||
"y": 3332.020696964687 | ||
}, | ||
{ | ||
"x": 3327.881591119334, | ||
"y": 1790.3394789661 | ||
}, | ||
{ | ||
"x": 3601.406105457909, | ||
"y": 3323.732088265769 | ||
}, | ||
{ | ||
"x": 2565.328399629972, | ||
"y": 3323.732088265769 | ||
}, | ||
{ | ||
"x": 1284.736355226642, | ||
"y": 3854.203044996466 | ||
}, | ||
{ | ||
"x": 2047.289546716003, | ||
"y": 3858.347349345924 | ||
}, | ||
{ | ||
"x": 2043.145235892692, | ||
"y": 4608.466436597925 | ||
}, | ||
{ | ||
"x": 2569.472710453284, | ||
"y": 4608.466436597925 | ||
}, | ||
{ | ||
"x": 5114.079555966698, | ||
"y": 2561.180087965393 | ||
}, | ||
{ | ||
"x": 5122.368177613321, | ||
"y": 2822.271261981283 | ||
}, | ||
{ | ||
"x": 5114.079555966698, | ||
"y": 3323.732088265769 | ||
} | ||
] | ||
}, | ||
"expect": { | ||
"x": -0.29078014184412193, | ||
"y": 0.3313983669465718 | ||
} | ||
} | ||
] | ||
} |
import Point from "./Point.js"; | ||
export function findGrid(points) { | ||
/** Find the grid that best matches the provided points. | ||
* | ||
* @param points {{x: number, y: number}[]} A list of points. | ||
* @param options | ||
* @returns {{ | ||
* cellSize: {width: number, height: number}, | ||
* offset: {x: number, y: number}, | ||
* }} | ||
* cellSize: An object the describes the estimated width and height of the grid cells. | ||
* offset: An object the describes the estimated width and height of the grid cells. | ||
*/ | ||
export function findGrid(points, { | ||
/** If `true` the returned guess will always be square. | ||
* | ||
* If you know the grid is square pass `true` and that assumption will be known to produce a better result. If `true` the returned `cellSize.width` will always equal `cellSize.height`. | ||
* | ||
* Note: The current algorithm always returns square grids, however it will likely support non-square grids in the future as a non-breaking change. If you rely on a square grid being returned set this to `true` to avoid being broken in the future. | ||
*/ | ||
assumeSquare = false, | ||
/** If `true` the `offset` field of the output will be set. | ||
* | ||
* It may be slightly more efficient to calculate the offset at the same time as finding the grid. Therefore if you need both leave this as true. However if you don't need the offset pass false. | ||
* | ||
* Note: The offset can always be calculated as `findOffset({points, cellSize: findGrid(points, ...).cellSize)`. | ||
*/ | ||
calculateOffset = true, | ||
} = {}) { | ||
let left = points[0].x; | ||
@@ -40,14 +67,38 @@ let right = points[0].x; | ||
let px = candidates[0].px; | ||
let cellSize = candidates[0].px; | ||
return { | ||
cellSize: {width: cellSize, height: cellSize}, | ||
offset: calculateOffset? | ||
findOffset({ | ||
cellSize, | ||
points, | ||
reference: origin, | ||
}) : null, | ||
} | ||
} | ||
let off = relPoints | ||
.map(p => p.roundError(px)) | ||
/** Find the offset of the grid. | ||
* | ||
* @returns {{x: number, y: number}} The estimated origin of the grid. | ||
*/ | ||
export function findOffset({ | ||
/// The size of cells. | ||
cellSize, | ||
/// A list of known intersections. | ||
points, | ||
/// A point that is near an intersection. If not provided a suitable reference will be selected. | ||
reference = null, | ||
}) { | ||
reference = reference || points.reduce((a, b) => ({x: Math.min(a.x, b.x), y: Math.min(a.y, b.y)})); | ||
reference = new Point(reference.x, reference.y); | ||
let {x, y} = points | ||
.map(({x, y}) => new Point(x, y).sub(reference).roundError(cellSize)) | ||
.reduce((a, b) => a.add(b)) | ||
.div(points.length) | ||
.add(origin.roundError(px)); | ||
return { | ||
cellSize: {width: px, height: px}, | ||
offset: {x: off.x, y: off.y}, | ||
} | ||
.add(reference.roundError(cellSize)); | ||
return {x, y}; | ||
} |
@@ -5,103 +5,197 @@ import * as gridfinder from "./lib.js"; | ||
it("perfect clicks", () => { | ||
snapshot(gridfinder.findGrid, | ||
[[ | ||
{x: 0, y: 0}, | ||
{x: 100, y: 100}, | ||
{x: 200, y: 200}, | ||
]], | ||
[[ | ||
{x: 0, y: 0}, | ||
{x: 72, y: 144}, | ||
{x: 288, y: 72}, | ||
]]); | ||
}); | ||
describe("findGrid", () => { | ||
it("perfect clicks", () => { | ||
snapshot(gridfinder.findGrid, | ||
[[ | ||
{x: 0, y: 0}, | ||
{x: 100, y: 100}, | ||
{x: 200, y: 200}, | ||
]], | ||
[[ | ||
{x: 0, y: 0}, | ||
{x: 72, y: 144}, | ||
{x: 288, y: 72}, | ||
]]); | ||
}); | ||
it("very good clicks", () => { | ||
snapshot(gridfinder.findGrid, | ||
[[ | ||
{x: 0, y: 0}, | ||
{x: 110, y: 98}, | ||
{x: 312, y: 302}, | ||
]]); | ||
}); | ||
it("very good clicks", () => { | ||
snapshot(gridfinder.findGrid, | ||
[[ | ||
{x: 0, y: 0}, | ||
{x: 110, y: 98}, | ||
{x: 312, y: 302}, | ||
]]); | ||
}); | ||
it("60x60 https://i.redd.it/9xy7jbjw4wv11.jpg", () => { | ||
snapshot(gridfinder.findGrid, | ||
[[ | ||
// Big grid! | ||
{x: 595.977798334875, y: 428.898055242918}, | ||
{x: 595.977798334875, y: 306.6018226234514}, | ||
{x: 721.7187789084181, y: 306.6018226234514}, | ||
{x: 721.7187789084181, y: 431.48177846727293}, | ||
]], [[ | ||
// Actually I want half the size! | ||
{x: 595.977798334875, y: 428.898055242918}, | ||
{x: 595.977798334875, y: 306.6018226234514}, | ||
{x: 721.7187789084181, y: 306.6018226234514}, | ||
{x: 721.7187789084181, y: 431.48177846727293}, | ||
{x: 657.1258094357077, y: 375.50110860624955}, | ||
]], [[ | ||
// Half the size another way. | ||
{x: 595.977798334875, y: 428.898055242918}, | ||
{x: 595.977798334875, y: 306.6018226234514}, | ||
{x: 721.7187789084181, y: 306.6018226234514}, | ||
{x: 721.7187789084181, y: 431.48177846727293}, | ||
{x: 657.9870490286771, y: 429.75929631770305}, | ||
]], [[ | ||
{x: 1511.4754856614245, y: 1746.5968996639313}, | ||
{x: 1580.3746530989824, y: 1917.9838735461417}, | ||
{x: 1575.2072155411654, y: 2163.43757985986}, | ||
{x: 1575.2072155411654, y: 1979.9932309306596}, | ||
{x: 1637.2164662349676, y: 1919.7063556957116} | ||
]]); | ||
it("60x60 https://i.redd.it/9xy7jbjw4wv11.jpg", () => { | ||
snapshot(gridfinder.findGrid, | ||
[[ | ||
// Big grid! | ||
{x: 595.977798334875, y: 428.898055242918}, | ||
{x: 595.977798334875, y: 306.6018226234514}, | ||
{x: 721.7187789084181, y: 306.6018226234514}, | ||
{x: 721.7187789084181, y: 431.48177846727293}, | ||
]], [[ | ||
// Actually I want half the size! | ||
{x: 595.977798334875, y: 428.898055242918}, | ||
{x: 595.977798334875, y: 306.6018226234514}, | ||
{x: 721.7187789084181, y: 306.6018226234514}, | ||
{x: 721.7187789084181, y: 431.48177846727293}, | ||
{x: 657.1258094357077, y: 375.50110860624955}, | ||
]], [[ | ||
// Half the size another way. | ||
{x: 595.977798334875, y: 428.898055242918}, | ||
{x: 595.977798334875, y: 306.6018226234514}, | ||
{x: 721.7187789084181, y: 306.6018226234514}, | ||
{x: 721.7187789084181, y: 431.48177846727293}, | ||
{x: 657.9870490286771, y: 429.75929631770305}, | ||
]], [[ | ||
{x: 1511.4754856614245, y: 1746.5968996639313}, | ||
{x: 1580.3746530989824, y: 1917.9838735461417}, | ||
{x: 1575.2072155411654, y: 2163.43757985986}, | ||
{x: 1575.2072155411654, y: 1979.9932309306596}, | ||
{x: 1637.2164662349676, y: 1919.7063556957116} | ||
]]); | ||
}) | ||
it("256x256 https://i.redd.it/m6l4go8l56v51.jpg", () => { | ||
snapshot(gridfinder.findGrid, | ||
[[ | ||
{x: 2597.300613496932, y: 1813.9973492199026}, | ||
{x: 5119.018404907975, y: 2562.9583759811503}, | ||
{x: 5119.018404907975, y: 2830.9352571159084}, | ||
]], [[ | ||
{x: 5119.018404907975, y: 2830.935257115908}, | ||
{x: 5112.147239263804, y: 2562.958375981150}, | ||
{x: 3600.490797546012, y: 2549.215971820393}, | ||
]], [[ | ||
// Selects a too small grid! | ||
{x: 1288.880666049953, y: 4604.322132248466}, | ||
{x: 2573.617021276596, y: 1811.061000713393}, | ||
{x: 3601.406105457909, y: 2557.035783615935}, | ||
]], [[ | ||
// Larger, but still too small. | ||
{x: 1288.880666049953, y: 4604.322132248466}, | ||
{x: 2573.617021276596, y: 1811.061000713393}, | ||
{x: 3601.406105457909, y: 2557.035783615935}, | ||
{x: 5114.079555966698, y: 1811.061000713393}, | ||
]], [[ | ||
// Perfection. | ||
{x: 1288.880666049953, y: 4604.322132248466}, | ||
{x: 2573.617021276596, y: 1811.061000713393}, | ||
{x: 3601.406105457909, y: 2557.035783615935}, | ||
{x: 5114.079555966698, y: 1811.061000713393}, | ||
{x: 4102.867715078631, y: 3332.020696964687}, | ||
]], [[ | ||
// Lots and lots of points, good result. | ||
{x: 1288.880666049953, y: 4604.322132248466}, | ||
{x: 2573.617021276596, y: 1811.061000713393}, | ||
{x: 3601.406105457909, y: 2557.035783615935}, | ||
{x: 5114.079555966698, y: 1811.061000713393}, | ||
{x: 4102.867715078631, y: 3332.020696964687}, | ||
{x: 3327.881591119334, y: 1790.339478966100}, | ||
{x: 3601.406105457909, y: 3323.732088265769}, | ||
{x: 2565.328399629972, y: 3323.732088265769}, | ||
{x: 1284.736355226642, y: 3854.203044996466}, | ||
{x: 2047.289546716003, y: 3858.347349345924}, | ||
{x: 2043.145235892692, y: 4608.466436597925}, | ||
{x: 2569.472710453284, y: 4608.466436597925}, | ||
{x: 5114.079555966698, y: 2561.180087965393}, | ||
{x: 5122.368177613321, y: 2822.271261981283}, | ||
{x: 5114.079555966698, y: 3323.732088265769}, | ||
]]); | ||
}) | ||
}) | ||
it("256x256 https://i.redd.it/m6l4go8l56v51.jpg", () => { | ||
snapshot(gridfinder.findGrid, | ||
[[ | ||
{x: 2597.300613496932, y: 1813.9973492199026}, | ||
{x: 5119.018404907975, y: 2562.9583759811503}, | ||
{x: 5119.018404907975, y: 2830.9352571159084}, | ||
]], [[ | ||
{x: 5119.018404907975, y: 2830.935257115908}, | ||
{x: 5112.147239263804, y: 2562.958375981150}, | ||
{x: 3600.490797546012, y: 2549.215971820393}, | ||
]], [[ | ||
// Selects a too small grid! | ||
{x: 1288.880666049953, y: 4604.322132248466}, | ||
{x: 2573.617021276596, y: 1811.061000713393}, | ||
{x: 3601.406105457909, y: 2557.035783615935}, | ||
]], [[ | ||
// Larger, but still too small. | ||
{x: 1288.880666049953, y: 4604.322132248466}, | ||
{x: 2573.617021276596, y: 1811.061000713393}, | ||
{x: 3601.406105457909, y: 2557.035783615935}, | ||
{x: 5114.079555966698, y: 1811.061000713393}, | ||
]], [[ | ||
// Perfection. | ||
{x: 1288.880666049953, y: 4604.322132248466}, | ||
{x: 2573.617021276596, y: 1811.061000713393}, | ||
{x: 3601.406105457909, y: 2557.035783615935}, | ||
{x: 5114.079555966698, y: 1811.061000713393}, | ||
{x: 4102.867715078631, y: 3332.020696964687}, | ||
]], [[ | ||
// Lots and lots of points, good result. | ||
{x: 1288.880666049953, y: 4604.322132248466}, | ||
{x: 2573.617021276596, y: 1811.061000713393}, | ||
{x: 3601.406105457909, y: 2557.035783615935}, | ||
{x: 5114.079555966698, y: 1811.061000713393}, | ||
{x: 4102.867715078631, y: 3332.020696964687}, | ||
{x: 3327.881591119334, y: 1790.339478966100}, | ||
{x: 3601.406105457909, y: 3323.732088265769}, | ||
{x: 2565.328399629972, y: 3323.732088265769}, | ||
{x: 1284.736355226642, y: 3854.203044996466}, | ||
{x: 2047.289546716003, y: 3858.347349345924}, | ||
{x: 2043.145235892692, y: 4608.466436597925}, | ||
{x: 2569.472710453284, y: 4608.466436597925}, | ||
{x: 5114.079555966698, y: 2561.180087965393}, | ||
{x: 5122.368177613321, y: 2822.271261981283}, | ||
{x: 5114.079555966698, y: 3323.732088265769}, | ||
]]); | ||
describe("findOffset", () => { | ||
it("perfect", () => { | ||
assert.deepEqual( | ||
gridfinder.findOffset({ | ||
cellSize: 99, | ||
points: [ | ||
{x: 0, y: 0}, | ||
], | ||
}), | ||
{x: 0, y: 0}) | ||
assert.deepEqual( | ||
gridfinder.findOffset({ | ||
cellSize: 99, | ||
points: [ | ||
{x: 10, y: 10}, | ||
], | ||
}), | ||
{x: 10, y: 10}) | ||
assert.deepEqual( | ||
gridfinder.findOffset({ | ||
cellSize: 100, | ||
points: [ | ||
{x: 98, y: 202}, | ||
{x: 402, y: 298}, | ||
], | ||
}), | ||
{x: 0, y: 0}) | ||
assert.deepEqual( | ||
gridfinder.findOffset({ | ||
cellSize: 100, | ||
points: [ | ||
{x: 103, y: 215}, | ||
{x: 407, y: 311}, | ||
], | ||
}), | ||
{x: 5, y: 13}) | ||
}); | ||
it("works", () => { | ||
snapshot(gridfinder.findOffset, { | ||
points: [ | ||
{x: 2597.300613496932, y: 1813.9973492199026}, | ||
{x: 5119.018404907975, y: 2562.9583759811503}, | ||
{x: 5119.018404907975, y: 2830.9352571159084}, | ||
], | ||
}, { | ||
points: [ | ||
{x: 5119.018404907975, y: 2830.935257115908}, | ||
{x: 5112.147239263804, y: 2562.958375981150}, | ||
{x: 3600.490797546012, y: 2549.215971820393}, | ||
], | ||
}, { | ||
points: [ | ||
{x: 1288.880666049953, y: 4604.322132248466}, | ||
{x: 2573.617021276596, y: 1811.061000713393}, | ||
{x: 3601.406105457909, y: 2557.035783615935}, | ||
], | ||
}, { | ||
points: [ | ||
{x: 1288.880666049953, y: 4604.322132248466}, | ||
{x: 2573.617021276596, y: 1811.061000713393}, | ||
{x: 3601.406105457909, y: 2557.035783615935}, | ||
{x: 5114.079555966698, y: 1811.061000713393}, | ||
], | ||
}, { | ||
points: [ | ||
{x: 1288.880666049953, y: 4604.322132248466}, | ||
{x: 2573.617021276596, y: 1811.061000713393}, | ||
{x: 3601.406105457909, y: 2557.035783615935}, | ||
{x: 5114.079555966698, y: 1811.061000713393}, | ||
{x: 4102.867715078631, y: 3332.020696964687}, | ||
], | ||
}, { | ||
points: [ | ||
{x: 1288.880666049953, y: 4604.322132248466}, | ||
{x: 2573.617021276596, y: 1811.061000713393}, | ||
{x: 3601.406105457909, y: 2557.035783615935}, | ||
{x: 5114.079555966698, y: 1811.061000713393}, | ||
{x: 4102.867715078631, y: 3332.020696964687}, | ||
{x: 3327.881591119334, y: 1790.339478966100}, | ||
{x: 3601.406105457909, y: 3323.732088265769}, | ||
{x: 2565.328399629972, y: 3323.732088265769}, | ||
{x: 1284.736355226642, y: 3854.203044996466}, | ||
{x: 2047.289546716003, y: 3858.347349345924}, | ||
{x: 2043.145235892692, y: 4608.466436597925}, | ||
{x: 2569.472710453284, y: 4608.466436597925}, | ||
{x: 5114.079555966698, y: 2561.180087965393}, | ||
{x: 5122.368177613321, y: 2822.271261981283}, | ||
{x: 5114.079555966698, y: 3323.732088265769}, | ||
], | ||
}); | ||
}) | ||
}) | ||
@@ -41,2 +41,1 @@ export default class Point { | ||
} | ||
@@ -82,26 +82,28 @@ import Point from "./Point.js"; | ||
let {cellSize, offset} = findGrid(points); | ||
console.log({cellSize, offset}); | ||
let px = cellSize.width; | ||
let {cellSize: {width, height}, offset} = findGrid(points); | ||
console.log({width, height, offset}); | ||
instructions.textContent = ` | ||
Grid cells are ${Math.round(px*100)/100}px. | ||
Grid cells are ${Math.round(width*100)/100}px. | ||
Offset ${Math.round(offset.x)}, ${Math.round(offset.y)}. | ||
Map is ${Math.round(canvas.width/px)}x${Math.round(canvas.height/px)} cells. | ||
Map is ${Math.round(canvas.width/width)}x${Math.round(canvas.height/height)} cells. | ||
`; | ||
ctx.beginPath(); | ||
ctx.strokeStyle = "red"; | ||
ctx.lineWidth = Math.max(1, px/40); | ||
ctx.setLineDash([px/2]); | ||
ctx.lineWidth = Math.max(1, width/40); | ||
for (let x = offset.x; x < canvas.width; x += px) { | ||
ctx.moveTo(x, offset.y - px/4); | ||
ctx.beginPath(); | ||
ctx.setLineDash([height/2]); | ||
for (let x = offset.x; x < canvas.width; x += height) { | ||
ctx.moveTo(x, offset.y - height/4); | ||
ctx.lineTo(x, canvas.height); | ||
} | ||
for (let y = offset.y; y < canvas.height; y += px) { | ||
ctx.moveTo(offset.x - px/4, y); | ||
ctx.stroke(); | ||
ctx.beginPath(); | ||
ctx.setLineDash([width/2]); | ||
for (let y = offset.y; y < canvas.height; y += width) { | ||
ctx.moveTo(offset.x - width/4, y); | ||
ctx.lineTo(canvas.width, y); | ||
} | ||
ctx.stroke(); | ||
@@ -108,0 +110,0 @@ |
{ | ||
"name": "gridfinder", | ||
"version": "1.2.0", | ||
"version": "1.6.0", | ||
"license": "Apache 2.0", | ||
@@ -5,0 +5,0 @@ "homepage": "https://gridfinder.kevincox.ca", |
36061
1218