1

我正在使用 jQuery Mobile UI 框架制作一个 PhoneGap 应用程序。我需要一个用户可以在屏幕上绘制内容的页面。我将此用作参考，它在 Ripple Emulator 中效果很好。但是，在我的实际设备 Nexus 4 上，每次 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

谢谢！

4

1 回答 1

0

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

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

于 2013-03-22T21:56:07.340 回答