缩小Konvajs阶段而不会降低质量

Question

考虑使用一个大型（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中可以这样做（complete example here）：

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

Answer 1

Konva是一个画布框架。 Canvas是一个位图图像，不像SVG这样的矢量元素。所以应该预期“模糊”。从技术上来解决问题，您可以在zoom事件上使用更高的pixelRatio重绘阶段：

Konva.pixelRatio = 4
stage.draw();

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