Tuval öğesinin çift görüntüsü

Question

Çizilen çizgiler yalnızca Tuval Öğesinde değil, aynı zamanda sayfanın üst kısmında tekrar görüntülenir.

Bu, bir dokunma olayı serbest bırakıldığında gerçekleşir.

Burada kaynak kodunu ve sonucu bulabilirsiniz (PhoneGap ve Jquery Mobile kullanılır).

Bu sorunun nedeninin sebebi hakkında bir fikri olan var mı?

http://gomami.ch/bugs/screenshot.png http://gomami.ch/bugs/screenshot.png

JavaScript (sonra jQuery/PhoneGap için içerir başlığında yüklü):

//********************************************************* 
// Wait for Cordova to Load 
//********************************************************* 
document.addEventListener("deviceready", onDeviceReady, false); 
function onDeviceReady() { 
    canvas("aufprallstelleA","test"); 
} 

// function to setup a new canvas for drawing 
function canvas(canvas, element){ 
    //define and resize canvas 
    width = $(window).width(); 
    width = (width/100)*90; 
    height = width/1.6901408; 
    $("#content").width(width); 
    $("#"+element).height(height); 
    $("#"+element).width(width); 
    var html = 'This is de Canvas field wehre you can draw<br><canvas id="'+ 
       canvas+'" width="'+width+'" height="'+height+ 
       '" style="border:black solid 1px;background-size: 100%; background-repeat: no-repeat;background-image: url(\'images/allgemein/aufprallstelle.PNG\');"></canvas>'; 
    $("#"+element).html(html);  
    // setup canvas 
    ctx=document.getElementById(canvas).getContext("2d"); 
    ctx.strokeStyle = "red"; 
    ctx.lineWidth = 5;   
    // setup to trigger drawing on mouse or touch 
    $("#"+canvas).on("touchstart", start); 
    $("#"+canvas).on("touchmove", move); 
} 

function start(e){ 
    e = e.originalEvent; 
    x = e.changedTouches[0].pageX-20; 
    y = e.changedTouches[0].pageY-$(this).position().top; 
    ctx.moveTo(x,y); 
} 

function move(e){ 
    e.preventDefault(); 
    e = e.originalEvent; 
    x = e.changedTouches[0].pageX-20; 
    y = e.changedTouches[0].pageY-$(this).position().top; 
    ctx.lineTo(x,y); 
    ctx.stroke(); 
} 

function clearcanvas(id) { 
    var canvas = document.getElementById(id); 
    var context = canvas.getContext('2d'); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
}  

HTML:

<div data-role="page" id="main"> 
    <div data-role="header" id="header"> 
    <div id="header_anzeige"> 
    </div> 
    </div> 
    <div data-role="content" id="content" > 
    <div id="test" style="margin-top:265px;"></div><br> 
    Hello, this is JQuery Mobile running in PhoneGap 2 
    </div> 
</div> 
copyright 
</div> 
</div> 

Answer 1

onDeviceReady muhtemelen iki kez denir. İki kez oluşturulmasını önlemek için tuvali değişkende kaydetmeyi denediniz mi? İlk çağrılanın muhtemelen hatalı olduğunu unutmayın, bu nedenle pencere boyutu büyük olasılıkla yanlış olacaktır.

var theCanvas; 
function onDeviceReady() { 
    if(!theCanvas){ 
     canvas("aufprallstelleA","test"); 
    } 
} 

function canvas(canvas, element){ 
    //define and resize canvas 
    width = $(window).width(); 

    [...] 

    $("#"+canvas).on("touchmove", move); 
    return $("#"+canvas); 
} 

DÜZENLEME: Biraz araştırma yaptım, sorun iki kez çağrılan olaydan geliyor gibi görünüyor. Bunu doğrulayabilirseniz, bir geçici çözüm arayabiliriz. Bu div gizli:

Answer 2

Ben CSS taşması bir div ile tuval çevreleyen ve uygulamak https://github.com/jquery/jquery-mobile/issues/5107

Answer 3

denemede bahsetmişti olarak yerine nispi baskının yerini mutlak tuval positionning sorunu çözdük.