Konva 将形状转换为 DataUrl() 导致空白图像

Question

我的 Konva 舞台只有几层，当我尝试将所有舞台转换为图像时 - 结果正常，当我尝试转换图层时 - 结果正常。但是当我尝试转换形状，如文本、图像、Rekt toDataUrl() 时，它会给我带有形状大小的空白透明图像。这里是 JSFiddle

<div id="container"></div>
<div id="image">
  <img id="imageData" src="https://github.com/rafaesc/vue-konva/raw/master/vue-konva.png" width="100">
</div>

const stage = new Konva.Stage({
   container: 'container',
   width:400,
   height: 200
});

const layer = new Konva.Layer();
stage.add(layer);

const text = new Konva.Text({
   x: 100,
   y: 100,
   width: 200,
   height: 40,
   fill: "gray",
   stroke: "gray",
   align: 'center',
   verticalAlign: 'middle',
   text: 'Text',
   fontSize: 24
});

layer.add(text).draw();
var textToImg = text.toDataURL();
document.getElementById('imageData').src=textToImg;

有什么可能的原因或解决办法吗？谢谢

Answer 1

默认行为将在下一个 Konva 版本中修复，以自动调整位置。现在，你需要设置 x and y and toDataURL config:

var textToImg = text.toDataURL({
  x: text.x(),
  y: text.y(),
});

演示：https://jsfiddle.net/yh52esmL/

Konva 将形状转换为 DataUrl() 导致空白图像

Konva converting shapes toDataUrl() results in blank image

canvas

konvajs