Skip to content Skip to sidebar Skip to footer

Increase Text Size In Konva.js Map When User Zooms Out

so my question is the following. Using Javascript, HTML, CSS and the library Konvas.js, I'm drawing in a grid, creating segments. Each of those segments as a real value, as presen

Solution 1:

You just need to scale (or increase fontSize) the text every time you zoom your canvas.

It can be something like this:

// find current absolute scalingconst absoluteScale = text.getAbsoluteScale();

// now we want to have absolute scale = 1,// then how much do we need to change current scale of the text?const deltaX = 1 / absoluteScale.x;
const deltaY = 1 / absoluteScale.y;

text.scaleX(text.scaleX() * deltaX);
text.scaleY(text.scaleY() * deltaY);

Also, you may need to set offsetX and offsetY or change x and y to make sure that the text stays on a consistent position.

Post a Comment for "Increase Text Size In Konva.js Map When User Zooms Out"