将动态文本路径转换为图像

Question

我正在使用以下代码将动态 textPath 转换为图像

        var simpleText = new Kinetic.TextPath({
        x: 400,
        y: 0,
        fill: '#333',
        fontSize: '24',
        fontFamily: 'Arial',
        text: 'Lorem Ipsum Lorem Ipsum ',
        data: 'M70,70 A50,50 0 1,1 69,70'
      });

      var textImgSrc = simpleText.toDataURL(); // base64 image of text
      var textImgObj = new Image();
      textImgObj.src = textImgSrc; 
      console.log(textImgObj.src);

但在控制台中它没有给我其他图像 "data:,"

Answer 1

您必须为 TextPath 设置位置和大小属性：

var textImgSrc = simpleText.toDataURL({
    x : 0,
    y : 50,
    width : 130,
    height : 130
}); // base64 image of text

http://jsbin.com/newuro/1/edit?html,js,output

将动态文本路径转换为图像

Convert Kinetic textPath to image

kineticjs