3

webview (チタン モバイル) で使用しているキャンバス要素があります。単純なイベント ハンドラーに問題があります。キャンバスに触れて線を描き始めると、約1秒後に線がキャンバスの中心点にジャンプし、正常に動作します。タッチを約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); }
4

1 に答える 1

2

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

それはぎこちなく、ハムフィストで、エレガントではありませんが、私にとってはうまくいきました. うまくいけば、それはあなたを助けます.

于 2012-10-29T18:18:32.983 に答える