在浏览器和电子平台上，绘画可以工作，但在android平台上试图在canvas上绘画却不行，这是为啥呢？

Posted 2023-05-06

【中文标题】在浏览器和电子平台上，绘画可以工作，但在android平台上试图在canvas上绘画却不行，这是为啥呢？

【英文标题】：In browser and electron platform, painting works, but in android platform trying to draw on canvas does not, why is this?在浏览器和电子平台上，绘画可以工作，但在android平台上试图在canvas上绘画却不行，这是为什么呢？

【发布时间】：2021-08-17 07:14:57

【问题描述】：

正如我在问题中所问的那样，在科尔多瓦应用程序中，在浏览器和电子平台中，绘画作品，但在试图在画布上绘画的安卓平台中却没有。点击画布，而不是绘图，我拖动屏幕。

代码如下。

这里是html：

       <div class="centerPainting">

            <h1>Painting: hold down the mouse button to draw in the rectangle below.</h1><div id="container"><canvas id="imageView"  >
                    <p>Unfortunately, your platform does not support the canvas element.</p>

                </canvas>

            </div>

        </div>

这是 CSS：

#container  
  position: relative; 


#imageView  
  border: 1px solid #000; 


.centerPainting 

    margin: auto;
    width: 300px;
    padding: 10px;

    /* The CSS below stops users from being able to select text. */
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */

这里是 javascript：

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() 
    
    var canvas, context, tool;  
    
    init();


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

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

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

    // Pencil tool instance.
    tool = new tool_pencil();

    // 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);
  

  // This painting tool works like a drawing pencil which tracks the mouse 
  // movements.
  function tool_pencil () 
    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.stroke();
      
    ;

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

  // The general-purpose event handler. This function just determines the mouse 
  // position relative to the canvas element.
  function ev_canvas (ev) 
    if (ev.layerX || ev.layerX == 0)  // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
     else if (ev.offsetX || ev.offsetX == 0)  // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    

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

我该如何解决这个问题？

更新：Morrison Chang 发表评论后，我将代码更改为：

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

但还是不行。

更新 2：我添加了多个事件侦听器，就像这个开发人员所做的那样：

adding multiple event listeners to one element

所以，我添加了这段代码：

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

还有这段代码：

    this.touchstart = function (ev) 
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
    ; 

    this.touchmove = function (ev) 
      if (tool.started) 
        context.lineTo(ev._x, ev._y);
        context.stroke();
      
    ;

    this.touchend = function (ev) 
      if (tool.started) 
        tool.mousemove(ev);
        tool.started = false;
      
    ;

但还是不行。

【问题讨论】：

见：mouseup, mouse down not working in android webview

我认为您看到的答案是使用 jQuery 功能，请在 Javascript 中研究多个侦听器。

Maybe try "canvastouch-action:none;"

Someone_who_likes_SE，那没用。不过还是谢谢。

【参考方案1】：

需要检查的几件事：

尝试在您的 ev_canvas() 方法中添加警报，以查看代码是否在您的触摸事件中到达那里。

您提到屏幕正在被拖动。您可能希望将视口设置为在您的 index.html 中不移动，如果您还没有这样做的话：

<meta name="viewport" content="initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1, viewport-fit=cover">