Проблема KineticJS toImage с шириной и высотой

Я столкнулся с этой странной проблемой ..! У меня есть текстовый элемент кинетического JS, и я конвертирую его в изображение. Вот код

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(), ничего не происходит, изображение создается, но не имеет этого ТЕКСТА. Как я видел в документации, ширина и высота являются необязательными параметрами для toImage(), поэтому я удалил их сейчас, но теперь он показывает эту ошибку.

Uncaught TypeError: Не удается прочитать свойство 'bufferCanvas' неопределенного кинетического.js:28 Kinetic.Node.toDataURL кинетический.js:28 Kinetic.Node.toImage кинетический.js:28 add_text canvas.js:83 (анонимная функция) canvas.js: 352 f.event.dispatch jquery.min.js:3 h.handle.i

есть идеи, что не так с моим кодом?


javascript html kineticjs
person casper123    schedule 03.05.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я не уверен, это ошибка или функция. Но проблема в том, что картинка берется из прямоугольника с такими координатами: {x:0 y:0}; ширина и высота - то, что вы вставляете в качестве параметров toImage. (ширина, высота)

Но текст имеет координаты {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/

person lavrton    schedule 05.05.2013