KonvaJS

Question

有没有人知道如何创建一个响应式舞台（基本上是 4000 像素宽，但会缩放到设备的宽度），以便添加到其中的所有图像都自动按比例缩放维护？

并且在使用"toDataURL"功能时，舞台以原始尺寸（即4000px）下载并匹配图片？

此致！

Answer 1

您可以在舞台上使用 scale 来实现响应式行为。所有节点（和图像）都将在 canvas 上缩放。

function onResize() {
  const availableWidth = window.innerWidth;
  const availableHeight = window.innerHeight - 50;

  const scale = availableWidth / VIRTUAL_WIDTH;

  stage.setAttrs({
    width: availableWidth,
    height: availableHeight,
    scaleX: scale,
    scaleY: scale
  });
  stage.draw();
}

要获得 toDataURL 的原始大小，您必须选择：

1 在导出到 base 64 之前调整舞台大小

 const oldSize = stage.size();
 // change size into required size
 stage.size({
  width: 4000,
  height: 2000
 })

 const url = stage.toDataURL();
 // restore size
 stage.size(oldSize);

2 或者使用特殊的属性 pixelRaio 来改变图像的大小。:

// VIRTUAL_WIDTH = 4000
const pixelRatio = VIRTUAL_WIDTH / stage.width();
const url = stage.toDataURL({ pixelRatio });

https://jsbin.com/goqemewolo/3/edit?js,output

KonvaJS - 响应阶段和 toDataURL 完整

KonvaJS - responsive stage and toDataURL full