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

时间:2014-05-03 21:37:47

标签: javascript jquery kineticjs word-wrap

我无法将文字包裹在图像的顶部。我改变了画布大小以适应长文本,但结果并不是我想要的。

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();

});

1 个答案:

答案 0 :(得分:0)

尝试在Text形状的构造函数中添加width属性,在这种情况下,因为图像的宽度为300,所以它将如下所示:

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

一个有效的例子:http://jsfiddle.net/CLk3Y/1/