如何在画布上的图像上换行

debugcn 发表于 Dev

用户名

我无法将文字包裹在图片上方。我更改了画布大小以适合长文本，但结果不是我想要的。

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

});

捷普

尝试在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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。