jquery mobile phonegap fillText max width property not working

问题

i am working on an app that types text on to the image..so i dont want the text to go out of the image. here is my code:

style

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

    width: 100%;
}

html code

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

script

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

    });

});

notice max width is set. so the text should not go out of the width provided

It works fine in the browser but as soon as u convert it to a phonegap app the width is no longer applied and text goes out out the image:

see the app here:

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

here is my git:

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

i have checked it after removing jquery mobile and i have the same issue...so the problem is either with android or phoneGAP...

How to get around it

回答1:

I think you are using the fillText wrong because it is defined as follows:

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

and you are calling it with: context2.fillText(topTxt,50/*x*/,50/*y*/,100/*max-width*/,100,**maxWidth**); So the last two aren't actually used. See definition here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text#fillText()

来源：https://stackoverflow.com/questions/26836652/jquery-mobile-phonegap-filltext-max-width-property-not-working

标签

javascript

android

jquery-mobile

cordova

canvas