Представьте, что у вас есть большая сцена (2000x1000) с текстом. Масштаб рабочей области уменьшается до 1000x500, что делает текст нечитаемым. Затем мы пытаемся увеличить текст, увеличивая его.
Ожидается: в какой-то момент текст должен снова стать читаемым.
Актуально: текст остается нечитаемым (размытым) независимо от того, насколько мы увеличиваем масштаб.
Попробуйте увеличить масштаб страницы (с собственным масштабированием браузера на рабочем столе) после запуска фрагмента:
const stage = new Konva.Stage({
container: 'container',
width: 2000,
height: 1000,
});
const layer = new Konva.Layer();
stage.add(layer);
const rect = new Konva.Text({
x : 50, y : 50, width: 100, height: 100,
fontSize: 12,
text: "This text should be readable when the viewport gets downscaled"
});
layer.add(rect).draw();
stage.scale({x: 0.5, y: 0.5});
stage.setAttrs({width: 1000, height: 500});
stage.draw();<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.6.0/konva.js"></script>
<div id="container"></div>Потери качества можно избежать, уменьшив масштаб только с помощью CSS, например:
const stage = new Konva.Stage({
container: 'container',
width: 2000,
height: 1000,
});
const layer = new Konva.Layer();
stage.add(layer);
const rect = new Konva.Text({
x : 50, y : 50, width: 100, height: 100,
fontSize: 12,
text: "This text should be readable when the viewport gets downscaled"
});
layer.add(rect).draw();
stage.getChildren().forEach(function(layer) {
layer.canvas._canvas.style.width = "1000px";
layer.canvas._canvas.style.height = "500px";
layer.hitCanvas.setSize(1000, 500);
layer.hitCanvas.context.scale(0.5, 0.5);
});
stage.draw();<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.6.0/konva.js"></script>
<div id="container"></div>Обратите внимание, как текст становится читаемым при определенном уровне масштабирования.
Обходной путь нарушает абстракцию Konvajs. Какие проблемы это может потенциально вызвать? Есть ли лучший способ, который использует только общедоступные методы, предоставляемые Konvajs?
В fabric.js это можно сделать следующим образом (полный пример здесь):
canvas.setDimensions({width: '1000px', height: '500px'}, {cssOnly: true});
