如何在画布上将文本包装在图像上

Question

我无法将文字包装在图像的上方。我改变了画布的大小，以适应长文本，但结果不是我想要的。

var stage = new Kinetic.Stage({
    container: 'container',
    width: 300,
    height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);

var image = new Image();
image.onload = function () {

    var image1 = new Kinetic.Image({
        x: 0,
        y: 0,
        width: 300,
        height: 300,
        image: image,
    });
    layer.add(image1);

    layer.draw();

}
image.crossOrigin = "anonymous";
image.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";

$("#save").click(function () {
    stage.toDataURL({
        callback: function (dataUrl) {
            var img = new Image();
            img.onload = function () {
                $("body").append("<p>Right-click the image below & then 'save-as'</p>");
                document.body.appendChild(img);
            }
            img.src = dataUrl;
            //          window.open(dataUrl);
        }
    });
});

$("#addbutton").click(function () {

    // simple label
    var label = new Kinetic.Label({
        x: 20,
        y: 20,
        draggable: true
    });

    label.add(new Kinetic.Tag({
        fill: 'green'
    }));

    label.add(new Kinetic.Text({
        text: $("#newtext").val(),
        fontFamily: 'Verdana',
        fontSize: 18,
        padding: 10,
        fill: 'white'
    }));

    layer.add(label);

    layer.draw();

});

Answer 1

尝试在文本形状的构造函数中添加一个宽度属性，在这种情况下，由于图像的宽度为300，所以如下所示：

label.add(new Kinetic.Text({
    text: $("#newtext").val(),
    fontFamily: 'Verdana',
    width: 300,
    fontSize: 18,
    padding: 10,
    fill: 'white'
}));

和一个实用的例子：http://jsfiddle.net/CLk3Y/1/