KonvaJS - 响应阶段和完整的 toDataURL答案

【问题标题】：KonvaJS - responsive stage and toDataURL fullKonvaJS - 响应阶段和完整的 toDataURL
【发布时间】：2019-06-08 19:01:14
【问题描述】：

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

而当使用“toDataURL”功能时，舞台是以原始大小（也就是4000px）下载的，还匹配了图片？

问候！

【问题讨论】：

标签： konvajs

【解决方案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

【讨论】：

太棒了！ :) 非常感谢。