Trung tâm cá nhân
sách gpt4 ai đã đi

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

In lại 作者：行者123 更新时间：2023-11-28 14:18:26 29 4
mua khóa gpt4 Nike

考虑在其中放置一些文本的大型 (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();

可以通过仅使用 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();

请注意在一定缩放级别下文本如何变得可读。

解决方法破坏了 Konvajs 抽象。它可能会导致什么问题？有没有更好的方法，只使用 Konvajs 公开的公共(public)方法？

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

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

1 Câu trả lời

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

Konva.pixelRatio = 4
stage.draw();

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

关于javascript - 在不损失质量的情况下缩小 Konvajs 阶段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55517853/

29 4 0
Bài viết được đề xuất: css - IE7 和 IE8 之间 Web 应用程序的小问题
Bài viết được đề xuất: html - 具有可伸缩性的水平图像滚动
Bài viết được đề xuất: javascript - 由 anchor 触发时切换类别
Bài viết được đề xuất: javascript - 在 JavaScript 中，如何检查输入中是否仅存在一个 "@"？
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com