Resize Konva Label on Zoom

Question

I have a simple setup where use clicks location and creates a label with text. What i would like to be able to do is resize on zoom, so that label is relative size always. Currently label is huge when i zoom in covering key areas.

code:

createTag() {
        return new Konva.Tag({
        // omitted for brevity
        })
}

createLabel(x: number, y: number) {
    return new Konva.Label({
        x: x,
        y: y,
        opacity: 0.75
    });
}
  
createText() {
    return new Konva.Text({
    // omitted for brevity
    });
}

createMarker(point: any) {
    var label = createLabel(point.x, point.y);
    var tag = createTag();
    var text = createText();

    label.add(tag);
    label.add(text);

    this.layer.add(label);
    this.stage.add(this.layer);
}

Mouse click event listener

this.stage.on('click', function (e) {
    // omitted for brevity
    var pointer = this.getRelativePointerPosition();
    createMarker(pointer);
    // omitted for brevity
}

this.stage.on('wheel', function (e) {
    // zoom code
});

How can i resize the labels to be relative size of the canvas?

Answer 1

There are many possible solutions. If you are changing scale of the whole stage, then you can just apply reversed scale to the label, so its absolute scale will be always 1.

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
});

var layer = new Konva.Layer();
stage.add(layer);

var circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 50,
  fill: 'green',
});
layer.add(circle);


// tooltip
var tooltip = new Konva.Label({
  x: circle.x(),
  y: circle.y(),
  opacity: 0.75,
});
layer.add(tooltip);

tooltip.add(
  new Konva.Tag({
    fill: 'black',
    pointerDirection: 'down',
    pointerWidth: 10,
    pointerHeight: 10,
    lineJoin: 'round',
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 10,
    shadowOffsetY: 10,
    shadowOpacity: 0.5,
  })
);

tooltip.add(
  new Konva.Text({
    text: 'Try to zoom with wheel',
    fontFamily: 'Calibri',
    fontSize: 18,
    padding: 5,
    fill: 'white',
  })
);


var scaleBy = 1.01;
stage.on('wheel', (e) => {
  e.evt.preventDefault();
  var oldScale = stage.scaleX();

  var pointer = stage.getPointerPosition();

  var mousePointTo = {
    x: (pointer.x - stage.x()) / oldScale,
    y: (pointer.y - stage.y()) / oldScale,
  };

  var newScale =
    e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;

  stage.scale({ x: newScale, y: newScale });
  
  // apply reversed scale to label
  // so its absolte scale is still 1
  tooltip.scale({ x: 1 / newScale, y: 1 / newScale })

  var newPos = {
    x: pointer.x - mousePointTo.x * newScale,
    y: pointer.y - mousePointTo.y * newScale,
  };
  stage.position(newPos);
});

<script src="https://unpkg.com/konva@8.3.0/konva.min.js"></script>
<div id="container"></div>