KineticJS toImage宽度和高度问题

我遇到了这个奇怪的问题..！我有一个kineticJS文本元素，我将它转换成图像..这里是代码KineticJS toImage宽度和高度问题

var simpleText = new Kinetic.Text({ 
    x: 50, 
    y: 50, 
    text: $("#text").val(), 
    fontSize: $("#fontSize").val(), 
    fontFamily: $("#fontName").val(), 
    fill: $("#fontColor").val(), 
}); 

var twidth = simpleText.getWidth(); 
var theight = simpleText.getHeight(); 

simpleText.toImage({ 
    width:twidth, 
    height:theight, 
    callback: function(img){ 
     var textImg = new Kinetic.Image({ 
      image: img, 
      x: 0, 
      y: 0, 
      width: twidth, 
      height: theight, 
      name: 'image', 
      stroke: 'red', 
      strokeWidth: 2, 
      strokeEnabled: false 
     }); 

     addElement(textImg, textImg.getWidth(), textImg.getHeight()); 
    } 
});

所以这里存在的问题..！

var twidth = simpleText.getWidth(); 
var theight = simpleText.getHeight();

如果我只是把数字形式的宽度和高度，一切工作正常和文本转换，这样

var twidth = 500; 
var theight = 100;

的东西，但是如果我用simpleText.getWidth（）和simpleText.getHeight （），没有任何反应，图像被创建，但它没有那个TEXT。正如我在文档中看到，宽度和高度都是toImage（）可选参数，可以让我现在删除，但现在它显示这个错误..

Uncaught TypeError: Cannot read property 'bufferCanvas' of undefined kinetic.js:28 Kinetic.Node.toDataURL kinetic.js:28 Kinetic.Node.toImage kinetic.js:28 add_text canvas.js:83 (anonymous function) canvas.js:352 f.event.dispatch jquery.min.js:3 h.handle.i

任何想法什么是错我的代码？

来源

2013-05-03 casper123

我不舒服是它的缺陷或功能。但问题是：图片是从矩形取得的，坐标为：{x：0 y：0};宽度和高度 - 你插入的图像参数。（twidth，theight）

但文本有坐标{x：50，y：50}。所以它在上面的“图片”rectagle之外。正如你说，如果尤尔增加宽度和高度：

var twidth = 500; 
var theight = 100;

一切都很好，你会看到文本，但图像会大空的空间。

所以......刚插入 “X” 和 “Y” PARAMS到toImage功能：

simpleText.toImage({ 
    width:twidth, 
    height:theight, 
    x : 50, 
    y : 50, 
    callback: function(img){ 
     $('body').append($(img)); 
    } 
});

例如：http://jsfiddle.net/lavrton/hgax2/

来源

2013-05-05 04:25:46 lavrton

感谢的人！它的工作:) – casper123 2013-05-07 05:56:36

KineticJS toImage宽度和高度问题

回答

相关问题