Question

我正在开发一个应用程序，在图像上键入文本。所以我不希望文本超出图像。这是我的代码：

风格

#container{
overflow: hidden;
z-index: 0;
}
#myCanvas{
    z-index: 1000;
    border: 2px solid red;

    width: 100%;
}

html代码

<div id="container">
    <canvas id="myCanvas"></canvas>
</div>

脚本

$(document).ready(function(){
 var context2= $("#myCanvas")[0].getContext('2d');
 $("#myCanvas,#container").height((3*window.innerWidth)/4);
    context2.fillStyle = "#0000ff"; 
    context2.fillRect(0,0,context2.canvas.width,context2.canvas.height);

    $("#toptext").on("keyup",function(){
        //save blue style of fill rectangle
        context2.save();
        var topTxt=$(this).val();
        //clear the rectangle
        context2.clearRect (0,0,context2.canvas.width,context2.canvas.height);
        //draw the canvas again to get fresh frame
        context2.fillRect(0,0,context2.canvas.width,context2.canvas.height);
        //change fill style to white
        context2.fillStyle = "#ffffff"; 
        var maxWidth=50;
        context2.font="bold 25px verdana";
        context2.fillText(topTxt,50,50,100,100,**maxWidth**);
        //
        context2.restore();

    });

}）;

注意设置最大宽度。所以文字不应超出提供的宽度

它在浏览器中运行良好但是只要你将其转换为一个phonegap应用程序，就不再应用宽度并且文本会从图像中消失：

在此处查看应用：

https://build.phonegap.com/apps/1171739/download/android/?qr_key=JrAyvaQENkAkowwmdDjC

这是我的git：

https://github.com/prantikv/image-typer/tree/gitless

我删除了jquery手机后检查了它，我有同样的问题...所以问题是android或phoneGAP ...

如何解决这个问题

Answer 1

我认为您使用的是fillText错误，因为它定义如下：

void fillText(
    in DOMString textToDraw,
    in float x,
    in float y,
    [optional] in float maxWidth
);

并且您通过以下方式调用它：context2.fillText(topTxt,50/*x*/,50/*y*/,100/*max-width*/,100,**maxWidth**); 所以最后两个实际上并没有使用。请参阅此处的定义：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text#fillText()

jquery mobile phonegap fillText max width属性不起作用

1 个答案: