Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix grid pattern offset for Konva v8

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-07-16 10:06:35 +10:00
parent 838ee68614
commit 3aace97004
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Grid.js
View File

@ -51,19 +51,19 @@ function Grid({ stroke }) {
const scale = gridCellPixelSize.width / 300; const scale = gridCellPixelSize.width / 300;
patternProps.fillPatternScaleX = scale; patternProps.fillPatternScaleX = scale;
patternProps.fillPatternScaleY = scale; patternProps.fillPatternScaleY = scale;
patternProps.fillPatternOffsetX = gridCellPixelSize.width / 2; patternProps.fillPatternOffsetX = gridCellPixelSize.width / scale / 2;
patternProps.fillPatternOffsetY = gridCellPixelSize.height / 2; patternProps.fillPatternOffsetY = gridCellPixelSize.height / scale / 2;
} else if (grid.type === "hexVertical") { } else if (grid.type === "hexVertical") {
// Hex tile pattern is 153 DPI to better fit hex tiles // Hex tile pattern is 153 DPI to better fit hex tiles
const scale = gridCellPixelSize.width / 153; const scale = gridCellPixelSize.width / 153;
patternProps.fillPatternScaleX = scale; patternProps.fillPatternScaleX = scale;
patternProps.fillPatternScaleY = scale; patternProps.fillPatternScaleY = scale;
patternProps.fillPatternOffsetY = gridCellPixelSize.radius / 2; patternProps.fillPatternOffsetY = gridCellPixelSize.radius / scale / 2;
} else if (grid.type === "hexHorizontal") { } else if (grid.type === "hexHorizontal") {
const scale = gridCellPixelSize.height / 153; const scale = gridCellPixelSize.height / 153;
patternProps.fillPatternScaleX = scale; patternProps.fillPatternScaleX = scale;
patternProps.fillPatternScaleY = scale; patternProps.fillPatternScaleY = scale;
patternProps.fillPatternOffsetY = -gridCellPixelSize.radius / 2; patternProps.fillPatternOffsetY = -gridCellPixelSize.radius / scale / 2;
patternProps.fillPatternRotation = 90; patternProps.fillPatternRotation = 90;
} }