javascript - KonvaJS - 文本节点组中的字体缩放
问题描述
我有一组文本节点,我希望能够使用转换器调整组的大小,但每个内部文本节点的字体大小保持不变。默认行为是转换器将在调整大小事件期间放大或缩小字体大小。
使用转换器调整大小时,如何保持 Konva 组中每个文本节点的字体大小?
解决方案
在缩放组内调整文本的字体大小可能很困难。
您可以尝试将“反转”比例设置为文本无,因此文本不会被拉伸。例如,如果您分组scaleX
是0.5
,则可以将scaleX
文本设置为2
。在这种情况下,绝对比例将为1
。然后您可以手动调整fontSize
文本以适应可用空间。
但我认为有一个更简单的选择。您可以将其附加到一个不可见的矩形中,而不是直接将变压器附加到组中。然后只需使用该矩形的大小来调整组元素的位置。因此,您将避免更改组的规模,并且数学会简单得多。
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>
推荐阅读
- angular - 尝试向 API(Angular、TypeScript、RxJS)发出多个请求时出现 TypeScript 可观察到的错误
- python - 用零填充 pandas 数据帧上的行,直到 N 计数
- mysql - mysql中解码Base64列显示BLOB
- rust - Near-bindgen 宏:不支持的参数类型
- javascript - 无法使用cdn加载axios
- python - 如何从 Python 列表和 str 生成唯一名称
- python-3.x - 如何使用 GUI 和 netmiko 正确使用函数
- ios - SwiftUI:多平台应用程序 swiftui 意外的平台条件
- nix - 全局覆盖包 virtualbox 来宾添加(即使在 NixOS 模块中)
- python - RelatedObjectDoesNotExist at / 用户没有客户