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是一个画布框架。画布是位图图像，与SVG等矢量元素不同。因此，应该“模糊”。从技术上讲，要解决此问题，您可以在缩放事件上使用更高的pixelRatio重绘阶段：

Konva.pixelRatio = 4
stage.draw();

该代码将为canvas元素生成更多像素。但是在这种情况下，页面在RAM中可能会很重，因为Konva将不得不产生非常大的画布。在大多数移动应用中，您不需要原生缩放，可以使用自适应设计。要缩放舞台，可以使用Konva方法。

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

1 个答案: