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() 的可选参数，所以我现在删除了，但现在它显示了这个错误..

未捕获的类型错误：无法读取未定义的 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 参数插入的内容。（宽度，高度）

但是文本有坐标 {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 回答