touchmove在畫布上畫兩條線而不是一條線

我正在用jQuery Mobile UI框架製作PhoneGap應用程序。我需要一個用戶可以在屏幕上繪製東西的頁面。我使用this作爲參考，它在Ripple仿真器中很好用。不過，在我的實際設備上，Nexus 4，而不是每touchmove一行，我得到兩條線。我在做什麼有什麼問題？touchmove在畫布上畫兩條線而不是一條線

編輯：我在github上發現了一個類似的問題。這似乎是Android瀏覽器的問題。這兩條線是由於重疊的畫布元素。唯一的解決方案是使畫布尺寸小於256像素。這裏的鏈接： https://github.com/jquery/jquery-mobile/issues/5107

這裏是我的代碼

// start canvas code 

var canvas = null; //canvas object 
var context = null; //canvas's context object 
var clearBtn = null; //clear button object 
var buttonDown = false; 

function captureDraw(){ 
    canvas = document.getElementById('canvas'); 
    clearBtn = document.getElementById('clearBtn'); 

    setCanvasDimension(); 
    initializeEvents(); 

    context = canvas.getContext('2d'); 
} 

function setCanvasDimension() { 
    //canvas.width = 300; 
    // canvas.width = window.innerWidth; 
    // canvas.height = window.innerHeight; //setting the height of the canvas 
} 

function initializeEvents() { 
    canvas.addEventListener('touchstart', startPaint, false); 
    canvas.addEventListener('touchmove', continuePaint, false); 
    canvas.addEventListener('touchend', stopPaint, false); 

    clearBtn.addEventListener('touchend', clearCanvas,false); 
} 

function clearCanvas() { 
    context.clearRect(0,0,canvas.width,canvas.height); 
} 

function startPaint(evt) { 
    if(!buttonDown) 
    { 
    context.beginPath(); 
    context.moveTo(evt.touches[0].pageX, evt.touches[0].pageY); 
    buttonDown = true; 
    } 
    evt.preventDefault(); 
} 

function continuePaint(evt) { 
    if(buttonDown) 
    { 
    context.lineTo(evt.touches[0].pageX,evt.touches[0].pageY); 
    context.stroke(); 
    } 
} 

function stopPaint() { 
    buttonDown = false; 
} 

// end canvas code

謝謝！

來源

2013-03-22 javaCity

不是一個實際的答案，但我發現這是自Android 4.1.1以來的一個已知錯誤。有很多解決方案，比如覆蓋offset-x: visible到canvas元素的父div，但它對我來說不起作用。有關更多信息，請參閱https://code.google.com/p/android/issues/detail?id=35474。

其他解決方案是保持您的畫布尺寸低於256像素。這當然是一個奇怪的錯誤！

來源

2013-03-22 21:56:07 javaCity

touchmove在畫布上畫兩條線而不是一條線

回答

相關問題