KineticJS toImage寬度和高度問題

Question

我遇到了這個奇怪的問題..！我有一個kineticJS文本元素，我將它轉換成圖像..這裏是代碼

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

任何想法什麼是錯我的代碼？

Answer 1

我不舒服是它的缺陷或功能。但問題是：圖片是從矩形取得的，座標爲：{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/