KonvaJS

Question

我有一组文本节点，我希望能够使用转换器调整组的大小，但每个内部文本节点的字体大小保持不变。默认行为是转换器将在调整大小事件期间放大或缩小字体大小。

Here is an example of what I mean, the font is scaled up in size.

如何在使用转换器调整大小时保持 Konva 组中每个文本节点的字体大小？

Answer 1

可能很难调整缩放组内文本的字体大小。

您可以尝试将“reversed”比例设置为text no，这样文字就不会被拉伸。例如，如果您将 scaleX 分组为 0.5，则可以将文本的 scaleX 设置为 2。在这种情况下，绝对比例将为 1。然后您可以手动调整文本的 fontSize 以适应可用的 space.

但我认为还有一个更简单的选择。您可以将它附加到一个不可见的矩形中，而不是直接将变换器附加到组中。然后只需使用该矩形的大小来调整组元素的位置。因此，您将避免更改组的规模，并且数学会简单得多。

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

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

// generate table
const table = new Konva.Group();
layer.add(table);

const ROWS = 10;
for (var i = 0; i < ROWS; i++) {
  const row = new Konva.Group()
  table.add(row);
  row.add(new Konva.Text({
    text: 'Row ' + i,
    name: 'text',
    verticalAlign: 'middle'
  }))
  row.add(new Konva.Line({
    points: [0, 0, 50, 0],
    y: 11,
    stroke: 'black'
  }));
}

// update size from passed params
function updateTable({x, y, width, height }) {
  table.setAttrs({ x, y });
  
  const rowHeight = height / table.children.length;
  table.children.forEach((rowGroup, index) => {
    rowGroup.y(rowHeight * index);
    rowGroup.findOne('Text').setAttrs({
      height: rowHeight
    })
    rowGroup.findOne('Line').setAttrs({
      points: [0, 0, width, 0],
      y: rowHeight
    });
  })
}
updateTable({
  x: 50,
  y: 50,
  width: 200,
  height: 200
});

// create resizing target
const resizer = new Konva.Rect({
  ...table.getClientRect(),
  fill: 'rgba(0,0,0,0.1)'
});
layer.add(resizer);

// create transformer
const tr = new Konva.Transformer({
  nodes: [resizer],
  ignoreStroke: true,
  boundBoxFunc: (oldBox, newBox) => {
    if (newBox.width < 5 || newBox.height < 5) {
      return oldBox;
    }
    return newBox;
  }
})
layer.add(tr);

// handle resizing
resizer.on('transform', () => {
  updateTable({
    x: resizer.x(),
    y: resizer.y(),
    width: resizer.width() * resizer.scaleX(),
    height: resizer.height() * resizer.scaleY(),
  })
})

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

KonvaJS - 文本节点组中的字体缩放

KonvaJS - Font Scaling in Group of Text Nodes

javascript