在不损失质量的情况下缩小 Konvajs 舞台

Question

考虑有一个大型 (2000x1000) 舞台，其中包含一些文字。舞台缩小到 1000x500，使文本无法阅读。然后我们尝试通过放大来放大文本。

预期：文本应该在某个时候再次变得可读。

实际：无论我们放大多少，文本仍然不可读（模糊）。

运行 sn-p 后尝试放大页面（在桌面上使用原生浏览器缩放）：

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 中可以这样做 (complete example here)：

canvas.setDimensions({width: '1000px', height: '500px'}, {cssOnly: true});

Answer 1

Konva 是一个画布框架。与 SVG 等矢量元素不同，Canvas 是位图图像。所以应该预料到“模糊”。从技术上讲，要解决此问题，您可以在缩放事件中使用更高的 pixelRatio 重绘舞台：

Konva.pixelRatio = 4
stage.draw();

该代码将为画布元素生成更多像素。但在这种情况下，页面在 RAM 中可能非常重，因为 Konva 必须生成非常大的画布。在大多数移动应用程序中，您不需要原生缩放，您可以使用响应式设计。对于缩放舞台，您可以使用 Konva 方法。