Fatal编程技术网
  • android/
  • Android Can'；t使用Phonegap 2.7在HTML5画布上绘制

Android Can'；t使用Phonegap 2.7在HTML5画布上绘制

android html cordova html5-canvas

Android Can'；t使用Phonegap 2.7在HTML5画布上绘制,android,html,cordova,html5-canvas,drawing,Android,Html,Cordova,Html5 Canvas,Drawing,我在网上找到了一个简单的抽屉示例。它在PC上运行良好 当我在Galaxy S4（4.2.2）、Android 2.2或4.2.2上使用Phonegap 2.7运行该项目时，它根本没有画任何东西 我做错了什么 <html lang="en"> <head> <meta charset="utf-8" /> <title>Desktops and Tablets</title> <script type="text/javascri

我在网上找到了一个简单的抽屉示例。它在PC上运行良好

当我在Galaxy S4（4.2.2）、Android 2.2或4.2.2上使用Phonegap 2.7运行该项目时，它根本没有画任何东西

我做错了什么

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Desktops and Tablets</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
     initialize();
  });

  // works out the X, Y position of the click inside the canvas from the X, Y position on the page
  function getPosition(mouseEvent, sigCanvas) {
     var x, y;
     if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {
        x = mouseEvent.pageX;
        y = mouseEvent.pageY;
     } else {
        x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
     }

     return { X: x - sigCanvas.offsetLeft, Y: y - sigCanvas.offsetTop };
  }

  var sigCanvas;
  var context;
  function initialize() {
    sigCanvas = document.getElementById("canvasSignature");
    context = sigCanvas.getContext("2d");
    context.strokeStyle = 'Black';
    context.lineWidth = 1;
    if ('ontouchstart' in document.documentElement) {
        var drawer = {
        isDrawing: false,
        touchstart: function (coors) {
              context.beginPath();
              context.moveTo(coors.x, coors.y);
              this.isDrawing = true;
           },
           touchmove: function (coors) {
              if (this.isDrawing) {
                 context.lineTo(coors.x, coors.y);
                 context.stroke();
              }
           },
           touchend: function (coors) {
              if (this.isDrawing) {
                 this.touchmove(coors);
                 this.isDrawing = false;
              }
           }
        };

        // create a function to pass touch events and coordinates to drawer
        function draw(event) {
            if (event.targetTouches[0] === undefined) {
                context.closePath();
                this.isDrawing = false;
                return;
            }
           // get the touch coordinates.  Using the first touch in case of multi-touch
           var coors = {
              x: event.targetTouches[0].pageX,
              y: event.targetTouches[0].pageY
           };
           // Now we need to get the offset of the canvas location
           var obj = sigCanvas;
           if (obj.offsetParent) {
              // Every time we find a new object, we add its offsetLeft and offsetTop to curleft and curtop.
              do {
                 coors.x -= obj.offsetLeft;
                 coors.y -= obj.offsetTop;
              }
              // The while loop can be "while (obj = obj.offsetParent)" only, which does return null
              // when null is passed back, but that creates a warning in some editors (i.e. VS2010).
              while ((obj = obj.offsetParent) != null);
           }

           // pass the coordinates to the appropriate handler
           drawer[event.type](coors);
        }
        // attach the touchstart, touchmove, touchend event listeners.
        sigCanvas.addEventListener('touchstart', draw, false);
        sigCanvas.addEventListener('touchmove', draw, false);
        sigCanvas.addEventListener('touchend', draw, false);
        // prevent elastic scrolling
        sigCanvas.addEventListener('touchmove', function (event) {
           event.preventDefault();
        }, false); 
     }
     else {
         // start drawing when the mousedown event fires, and attach handlers to
        // draw a line to wherever the mouse moves to
        $("#canvasSignature").mousedown(function (mouseEvent) {
           var position = getPosition(mouseEvent, sigCanvas);

           context.moveTo(position.X, position.Y);
           context.beginPath();
           $(this).mousemove(function (mouseEvent) {
              drawLine(mouseEvent, sigCanvas, context);
           }).mouseup(function (mouseEvent) {
              finishDrawing(mouseEvent, sigCanvas, context);
           }).mouseout(function (mouseEvent) {
              finishDrawing(mouseEvent, sigCanvas, context);
           });
        });

     }
  }

   // draws a line to the x and y coordinates of the mouse event inside
  // the specified element using the specified context
  function drawLine(mouseEvent, sigCanvas, context) {
      var position = getPosition(mouseEvent, sigCanvas);

     context.lineTo(position.X, position.Y);
     context.stroke();
  }

   // draws a line from the last coordiantes in the path to the finishing
  // coordinates and unbind any event handlers which need to be preceded
  // by the mouse down event
  function finishDrawing(mouseEvent, sigCanvas, context) {
     // draw the line to the finishing coordinates
     drawLine(mouseEvent, sigCanvas, context);
      context.closePath();
      // unbind any events which could draw
     $(sigCanvas).unbind("mousemove")
                 .unbind("mouseup")
                 .unbind("mouseout");
  }
</script>
</head>
<body>
<h1>Canvas test</h1>
<div id="canvasDiv">
   <canvas id="canvasSignature" width="500px" height="500px" style="border:2px solid #000000;"></canvas>
</div>
</body>
</html> 


台式机和平板电脑
$（文档）.ready（函数（）{
初始化（）；
});
//从页面上的X，Y位置计算画布内单击的X，Y位置
函数getPosition（mouseEvent、sigCanvas）{
变量x，y；
if（mouseEvent.pageX！=未定义&&mouseEvent.pageY！=未定义）{
x=mouseEvent.pageX；
y=mouseEvent.pageY；
}否则{
x=mouseEvent.clientX+document.body.scrollLeft+document.documentElement.scrollLeft；
y=mouseEvent.clientY+document.body.scrollTop+document.documentElement.scrollTop；
}
返回{X:X-sigCanvas.offsetLeft，Y:Y-sigCanvas.offsetTop}；
}
var sigCanvas；
var语境；
函数初始化（）{
sigCanvas=document.getElementById（“canvasSignature”）；
context=sigCanvas.getContext（“2d”）；
context.strokeStyle='Black'；
context.lineWidth=1；
if（'document.documentElement中的“ontouchstart”）{
变量抽屉={
isDrawing:错误，
touchstart：功能（coors）{
context.beginPath（）；
moveTo（coors.x，coors.y）；
this.isDrawing=true；
},
触摸移动：功能（coors）{
如果（此.isDrawing）{
lineTo（coors.x，coors.y）；
stroke（）；
}
},
touchend：功能（coors）{
如果（此.isDrawing）{
这个.touchmove（coors）；
this.isDrawing=false；
}
}
};
//创建一个将触摸事件和坐标传递给抽屉的函数
功能图（事件）{
if（event.targetTouches[0]==未定义）{
closePath（）；
this.isDrawing=false；
返回；
}
//获取触摸坐标。在多点触摸的情况下使用第一次触摸
var coors={
x:event.targetTouches[0]。第x页，
y:event.targetTouches[0]。第页
};
//现在我们需要得到画布位置的偏移量
var obj=sigCanvas；
if（对象抵销父对象）{
//每次我们找到一个新对象时，都会将其offsetLeft和offsetTop添加到curleft和curtop中。
做{
coors.x-=obj.offsetLeft；
coors.y-=obj.offsetop；
}
//while循环只能是“while（obj=obj.offsetParent）”，它返回null
//当传回null时，但这会在某些编辑器（如VS2010）中创建警告。
而（（obj=obj.offsetParent）！=null）；
}
//将坐标传递给相应的处理程序
抽屉[事件类型]（coors）；
}
//连接touchstart、touchmove、touchend事件侦听器。
sigCanvas.addEventListener（'touchstart'，draw，false）；
sigCanvas.addEventListener（'touchmove'，draw，false）；
sigCanvas.addEventListener（'touchend'，draw，false）；
//防止弹性滚动
sigCanvas.addEventListener（'touchmove'，函数（事件）{
event.preventDefault（）；
}，假）；
}
否则{
//当mousedown事件激发时开始绘图，并将处理程序附加到
//在鼠标移动到的任何位置绘制一条线
$（“#画布签名”）.mousedown（函数（mouseEvent）{
var position=getPosition（mouseEvent，sigCanvas）；
移动到（位置X，位置Y）；
context.beginPath（）；
$（this）.mousemove（函数（mouseEvent）{
抽绳（mouseEvent、sigCanvas、context）；
}).mouseup（功能（mouseEvent）{
finishDrawing（MouseeEvent、sigCanvas、context）；
}).mouseout（功能（mouseEvent）{
finishDrawing（MouseeEvent、sigCanvas、context）；
});
});
}
}
//在鼠标事件的x和y坐标内绘制一条线
//使用指定上下文的指定元素
函数绘图线（mouseEvent、sigCanvas、context）{
var position=getPosition（mouseEvent，sigCanvas）；
lineTo（位置X，位置Y）；
stroke（）；
}
//从路径中的最后一个坐标到终点绘制一条线
//协调并取消绑定任何需要在前面执行的事件处理程序
//通过鼠标按下事件
函数finishDrawing（mouseEvent、sigCanvas、context）{
//将线绘制到精加工坐标
抽绳（mouseEvent、sigCanvas、context）；
closePath（）；
//解开任何可能吸引你的事件
$（sigCanvas）.unbind（“mousemove”）
.unbind（“mouseup”）
.unbind（“mouseout”）；
}
帆布试验
您是使用Phonegap构建还是Eclipse构建？如果是Eclipse，您的项目设置是否正确

将
$（文档）.ready（函数（）{
替换为
$（文档）.on（“deviceready”，函数（）{
因为phonegap在初始化时使用deviceready事件发出信号

同时将jQuery JS文件保存在项目中；如果HTTP请求失败或Android设备没有连接，应用程序将无法加载，因为它无法加载jQuery

因此，请更换

使用

我通过这些修改尝试了上面的代码（加上添加了一些调试），它在运行安卓2.2.3的HTC HD2和运行安卓4.2.2的Nexus 7上运行良好

包含我为测试它而创建的Eclipse项目和生成的Android APK。在您的设备上试用一下，看看它是否有效。

我是experie 
appView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

context.clearRect(0,0,1,1);