1

私はこの奇妙な問題に直面しています..! 私は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() のオプションのパラメーターであるため、削除しましたが、このエラーが表示されるようになりました..

キャッチされていない TypeError: 未定義の kinetic.js:28 Kinetic.Node.toDataURL kinetic.js:28 Kinetic.Node.toImage kinetic.js:28 add_text canvas.js:83 (無名関数) canvas.js のプロパティ 'bufferCanvas' を読み取ることができません: 352 f.event.dispatch jquery.min.js:3 h.handle.i

私のコードの何が問題なのですか？

4

1 に答える 1

2

それがバグなのか機能なのかはわかりません。しかし、問題は次のとおりです。画像は次の座標を持つ長方形から取得されます: {x:0 y:0}; 幅と高さ - toImage パラメーターとして挿入するもの。(twidth, theight)

しかし、テキストには座標 {x : 50, y : 50} があります。つまり、上の「絵」長方形の外側です。あなたが言うように、幅と高さを増やすと：

var twidth = 500;
var theight = 100;

すべて問題なく、テキストは表示されますが、画像は空白で大きくなります。

だから...「x」と「y」のパラメータをtoImage関数に挿入するだけです：

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

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

于 2013-05-05T04:25:46.410 に答える