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

未捕获的TypeError：无法读取未定义的属性“bufferCanvas” kinetic.js：28 Kinetic.Node.toDataURL kinetic.js：28 Kinetic.Node.toImage kinetic.js：28 add_text canvas.js：83（匿名 function）canvas.js：352 f.event.dispatch jquery.min.js：3 h.handle.i

我的代码有什么问题吗？

Answer 1

我不是害羞是错误还是功能。但问题是：图片是从这个坐标的矩形中获取的：{x：0 y：0};宽度和高度 - 您插入的图像参数。（twidth，theight）

但是文字有coords {x：50，y：50}。所以它在上面的“图片”rectagle之外。如你所说，如果你增加宽度和高度：

var twidth = 500;
var theight = 100;

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

所以...只需将“x”和“y”参数插入到图像函数：

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

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

KineticJS toImage宽度和高度问题

1 个答案: