Question

我正在使用jQuery Mobile UI框架制作PhoneGap应用程序。我需要一个页面，用户可以在屏幕上绘制内容。我使用this作为参考，它在Ripple Emulator中运行良好。然而，在我的实际设备上，Nexus 4，而不是每个touchmove一行，我得到两行。我在做什么有问题吗？

编辑：我在github上发现了类似的问题。这似乎是Android浏览器的问题。这两行是由于重叠的画布元素。唯一的解决方案是使画布尺寸小于256px。这是链接： 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

谢谢！

Answer 1

不是一个真正的答案，但我发现这是Android 4.1.1以来的一个已知错误。有许多解决方案，比如将offset-x: visible覆盖到canvas元素的父div，但它对我不起作用。有关详细信息，请参阅https://code.google.com/p/android/issues/detail?id=35474。

其他解决方案是将画布尺寸保持在256px以下。这肯定是一个奇怪的错误！

touchmove在画布上绘制两条线而不是一条线

1 个答案: