Podwójny wyświetlacz elementu z płótna

Question

Wyrysowane linie pojawiają się nie tylko w elemencie Canvas, ale także u góry strony, które jest wyświetlane ponownie.

Dzieje się tak, gdy wydarzenie dotykowe zostanie zwolnione.

Tutaj można znaleźć kod źródłowy i wynik (używane są PhoneGap i Jquery Mobile).

Czy ktoś ma pojęcie, jaka jest przyczyna tego błędu?

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

JavaScript (załadowany w nagłówku po obejmuje do jQuery/PhoneGap):

//********************************************************* 
// 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 jest prawdopodobnie wywoływana dwukrotnie. Czy próbowałeś zapisać płótno w zmiennej, aby uniknąć podwójnego tworzenia? Zwróć uwagę, że pierwszym, który zostanie wywołany, jest prawdopodobnie uszkodzony, więc rozmiar okna najprawdopodobniej będzie nieprawidłowy.

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

EDIT: Zrobiłem trochę badań, to jednak wydaje się, że problem jest z imprezy miano dwukrotnie. Jeśli możesz to potwierdzić, możemy poszukać obejścia.

Answer 2

mam rozwiązać ten problem przez positionning płótno w absolutny zamiast względnego positionning jak to wspomniano na https://github.com/jquery/jquery-mobile/issues/5107

Answer 3

starają się otoczyć płótno z div i zastosować CSS overflow: hidden do tego div.