jquery mobile phonegap fillText最大宽度属性不起作用答案

【问题标题】：jquery mobile phonegap fillText max width property not workingjquery mobile phonegap fillText最大宽度属性不起作用
【发布时间】：2014-11-10 04:14:56
【问题描述】：

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

风格

#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 mobile 后检查过它，我遇到了同样的问题...所以问题出在 android 或 phoneGAP...

如何解决

【问题讨论】：

更正了 context2.fillText(topTxt,50,50,100,100,maxWidth);到 context2.fillText(topTxt,50,50,maxWidth);还是不行

标签： javascript android jquery-mobile cordova canvas

【解决方案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()

【讨论】：