2014-11-09 3 views
0

поэтому я создал мерзавец, а также приложение на сайте build.phonegapхолста удваивая в Jquery мобильных приложениях PhoneGap

git->

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

ссылка для загрузки приложения: ->

https://build.phonegap.com/apps/1171702/download/android/?qr_key=sX_SB4ptD87r8yfvQey2

приложение просто заполняет холст с синим цветом и позволяет пользователю вводить текст на холсте е введите поле ввода.

я использую jquery мобильный .. !!!

вот как я это сделать:

#container{ 
    position: relative; 
    } 
#myCanvas{ 
    border: 2px solid red; 
    position: absolute; 
    width: 100%; 
} 

<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"; 
     context2.fillText(topTxt,50,50,100,100); 
     // 
     context2.restore(); 

    }); 

});

так что по существу холст перерисовывается с каждым нажатием клавиши, и весь текст печатается на холсте.

он отлично работает во всех браузерах я есть проверить ..

НО когда я преобразовать его в приложение PhoneGap с помощью облачных сервисов я получаю небольшую проблему, и это очень расстраивает.

холст работает нормально, но как только я типа есть еще один дубликат холст в background..and это немного смещение

это холст, прежде чем вводить что-нибудь: http://i60.tinypic.com/11v00g9.png

и это это полотно после ввода: http://i61.tinypic.com/35aj8k5.png

уведомления другой холст выглядывает из-за ..

это не какой-либо другой эль ement это то же самое полотно, что и другое его лицо. Текст отображается на обоих холстах.

ЧТО проблема? Как я могу это решить?

ответ

2

Была ли та же проблема на Android, переполнение: скрытый элемент контейнера исправил мою проблему. Не совсем уверен, почему это помогло.

#container { 
    /* This fixes the double draw on Android 4.1.x and 4.2.x */ 
    overflow: hidden; 
} 
+0

да, спасибо, что это сработало ... но теперь у меня есть еще одна проблема с текстом холста textFill() maxwidth также не работает? не знаю, почему .. нет ссылки на мой вопрос http://stackoverflow.com/questions/26836652/jquery-mobile-phonegap-filltext-max-width-property-not-working – user3262344

+0

попробуйте 'переполнение: auto' и вы не должно быть другого вопроса. – vinesh