android - touch html 5 canvas 麻烦

Question

我有一个 canvas 元素，我在 webview (titanium mobile) 中使用我的简单事件处理程序有问题。当我触摸 Canvas 开始绘制一条线时，该线在绘制大约 1 秒后跳到 Canvas 的中心点，然后工作正常。如果我按住触摸约 1 秒。然后绘制效果很好...？我很困惑，谁能帮我解决这个问题。这是我正在使用的代码，我在网上找到了这个资源并对其进行了修改。

// Keep everything in anonymous function, called on window load.
if(window.addEventListener) {
window.addEventListener('load', function () {
var canvas, context, canvaso, contexto;

// The active tool instance.
var tool;



var tool_default = 'bluepen';

function init () {
// Find the canvas element.
canvaso = document.getElementById('markup');
if (!canvaso) {
  alert('Error: I cannot find the canvas element!');
  return;
}

if (!canvaso.getContext) {
  alert('Error: no canvas.getContext!');
  return;
}

// Get the 2D canvas context.
contexto = canvaso.getContext('2d');
if (!contexto) {
  alert('Error: failed to getContext!');
  return;
}

// Add the temporary canvas.
var container = canvaso.parentNode;
canvas = document.createElement('canvas');
if (!canvas) {
  alert('Error: I cannot create a new canvas element!');
  return;
}

canvas.id     = 'markupTemp';
canvas.width  = canvaso.width;
canvas.height = canvaso.height;
canvas.display = 'none';
container.appendChild(canvas);

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

// Get the tool select input.
var tool_select = document.getElementById('dtool');
if (!tool_select) {
  alert('Error: failed to get the dtool element!');
  return;
}
tool_select.addEventListener('change', ev_tool_change, false);






// Activate the default tool.
if (tools[tool_default]) {
  tool = new tools[tool_default]();
  tool_select.value = tool_default;
}

// Attach the mousedown, mousemove and mouseup event listeners.
  canvas.addEventListener('mousedown', ev_canvas, false);
  canvas.addEventListener('mousemove', ev_canvas, false);
  canvas.addEventListener('mouseup',   ev_canvas, false);
canvas.addEventListener( 'touchstart', ev_canvas, false);
canvas.addEventListener( 'touchmove', ev_canvas, false);
canvas.addEventListener( 'touchend', ev_canvas, false);
  }


function settool(t){

tool = this;

};


  // The general-purpose event handler. This function just determines the mouse 
  // position relative to the canvas element.
  function ev_canvas (ev) {
  ev.preventDefault();

  ev._x = ev.layerX;
  ev._y = ev.layerY;

// Call the event handler of the tool.
 var func = tool[ev.type];
 if (func) {
  func(ev);
 }
 }

  // The event handler for any changes made to the tool selector.
  function ev_tool_change (ev) {
 if (tools[this.value]) {
  tool = new tools[this.value]();
 }
 }

 // This function draws the #imageTemp canvas on top of #markup, after which 
 // #imageTemp is cleared. This function is called each time when the user 
 // completes a drawing operation.
 function img_update () {
    contexto.drawImage(canvas, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
 }

 // This object holds the implementation of each drawing tool.
 var tools = {};

  // The drawing pencil.
 tools.bluepen = function () {
 var tool = this;
this.started = false;

// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
    ev.preventDefault();
    context.beginPath();
    context.moveTo(ev._x, ev._y);
    tool.started = true;
};


// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button).
this.mousemove = function (ev) {
  if (tool.started) {
      ev.preventDefault();
    context.lineTo(ev._x, ev._y);
        context.lineJoin = "round";
    context.lineWidth = 1;
    context.strokeStyle = '#2e3092';
    context.stroke();
     }
};

// This is called when you release the mouse button.
this.mouseup = function (ev) {
  if (tool.started) {
      ev.preventDefault();
    tool.mousemove(ev);
    tool.started = false;
    img_update();
  }
};

};

 // The red Pen.
tools.redpen = function () {
var tool = this;
this.started = false;

// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
    context.beginPath();
    context.moveTo(ev._x, ev._y);
    tool.started = true;
};

// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button).
this.mousemove = function (ev) {
  if (tool.started) {
    context.lineTo(ev._x, ev._y);
       context.lineJoin = "round";
    context.lineWidth = 1;
    context.strokeStyle = '#ed1c24';
    context.stroke();
  }
};

// This is called when you release the mouse button.
this.mouseup = function (ev) {
  if (tool.started) {
    tool.mousemove(ev);
    tool.started = false;
    img_update();
  }
};
};



// The Highlighter
tools.highlighter = function () {
var tool = this;
this.started = false;

// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
    context.beginPath();
    context.moveTo(ev._x, ev._y);
    tool.started = true;
};

// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button).
this.mousemove = function (ev) {
  if (tool.started) {
    context.lineTo(ev._x, ev._y);
    context.lineJoin = "round";
    context.lineWidth = 20;
    context.strokeStyle = '#f9e100';
    context.stroke();

  }
};

// This is called when you release the mouse button.
this.mouseup = function (ev) {
  if (tool.started) {
    tool.mousemove(ev);
    tool.started = false;
    img_update();
  }
};
};

// The Eraser
tools.eraser = function () {
var tool = this;
this.started = false;

// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
    context.beginPath();
    context.moveTo(ev._x, ev._y);
    tool.started = true;
};

// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button).
this.mousemove = function (ev) {
  if (tool.started) {
    context.lineTo(ev._x, ev._y);
    context.lineJoin = "round";
    context.lineWidth = 40;
    context.strokeStyle = '#fff';

    context.stroke();

  }
  };

  // This is called when you release the mouse button.
  this.mouseup = function (ev) {
  if (tool.started) {
    tool.mousemove(ev);
    tool.started = false;
    img_update();
  }
 };
 }; 




init();

}, false); }

Answer 1

我在 Acer ICS 平板电脑上的普通 Android 浏览器上遇到了这个确切的问题(事实上，这就是我发现你的问题的方式)。我无法在 iPad 上的 Safari 或我的 Gingerbread 手机上的库存浏览器上重现该问题。我不知道这是浏览器错误还是什么，但我设法找到了一个可能对您有帮助的解决方法。

var tool;
var touchflag = false;  //Add this property
...
...
function ev_canvas (ev) {
    ev.preventDefault();

    //Two new lines here
    if (ev.type == 'touchstart') this.touchflag = true;
    if (ev.type == 'touchend') this.touchflag = false;

    ev._x = ev.layerX;
    ev._y = ev.layerY;
    ...
 }

 ...
 ...
 this.mousemove = function (ev) {
     // if (tool.started) { //Change this
     if (tool.started && !touchflag) { // to this
        ev.preventDefault();
        context.lineTo(ev._x, ev._y);
     ...
     }
 };

它笨拙、笨拙且不优雅，但它对我有用。希望它能帮助你。