在缩放时调整 Konva 标签大小

Question

我有一个简单的设置，其中使用点击位置并创建带有文本的标签。 我想做的是在缩放时调整大小，以便标签始终是相对大小。当前，当我放大覆盖关键区域时，标签很大。

代码：

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);
}

鼠标点击事件监听器

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
});

如何将标签的大小调整为画布的相对大小？

Answer 1

有许多可能的解决方案。如果要更改整个舞台的比例，则只需对标签应用反向比例，因此其绝对比例将始终为 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>