Question

我有几层Konva舞台，当我尝试将所有舞台转换为图像时-结果正常，当我尝试转换层时-结果正常。但是，当我尝试将诸如Text，Image，Rekt之类的形状转换为DataUrl（）时，它为我提供了具有形状大小的空白透明图像。这是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和y和toDataURL配置：

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

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

Konva将形状转换为DataUrl（）会生成空白图像

1 个答案: