javascript - 在不损失质量的情况下缩小 Konvajs 阶段

Question

考虑在其中放置一些文本的大型 (2000x1000) 舞台。舞台缩小到 1000x500，使文本不可读。然后我们尝试通过放大来放大文本。

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

实际:无论我们放大多少，文本仍然不可读(模糊)。

运行代码段后尝试放大页面(在桌面上使用 native 浏览器缩放):

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 公开的公共(public)方法？

在 fabric.js 中可以这样做 ( complete example here ):

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

Answer 1

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

Konva.pixelRatio = 4
stage.draw();

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