Question

有没有人知道如何创建一个响应阶段（基本上是4000像素宽，但是会缩放到设备的宽度），以使添加到它的所有图像都自动缩放并保持比例？

使用“ toDataURL”功能时，以原始大小（只有4000px）下载了舞台，并且还匹配了图片吗？

致谢！

Answer 1

您可以在阶段使用scale来实现响应行为。所有节点（和图像）将在画布上缩放。

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已满

1 个答案: