不工作jQuery Mobile的PhoneGap的fillText方法最大宽度财产 [英] jquery mobile phonegap fillText max width property not working

问题描述

我的工作该类型的文本到image..so我不希望文本走出图像的应用程序。
这里是我的code：

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:

风格

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

    width: 100%;
}

HTML code

html code

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

    });

}）;

的通知的最大宽度设置。因此文本不应该走出去提供了宽度

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

它可以在浏览器不错，但只要ü将其转换为PhoneGap的应用宽度不再应用和文字熄灭了图片：

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

这是我的git：

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

我已经删除jQuery Mobile的检查后，并我有同样的问题...这样的问题是不是与Android或PhoneGap的...

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

如何绕过它。

推荐答案

我认为你正在使用的fillText方法错误的，因为它的定义如下：

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

和你与调用它： context2.fillText（topTxt，50 / * X * / 50 / * Y * / 100 / *最大宽度* / 100，**了maxWidth **）;
所以最后两个未实际使用。
见定义在这里：的https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text#fillText()

这篇关于不工作jQuery Mobile的PhoneGap的fillText方法最大宽度财产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！