Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


No se puede dibujar en un lienzo HTML5 con Phonegap 2.7

He encontrado un ejemplo simple cajón en línea. Funciona bien en la PC.

Cuando lo ejecuto, usando Phonegap 2.7, en mi Galaxy S4 (4.2.2), con Android 2.2 o 4.2.2, para el proyecto, simplemente no dibuja nada en absoluto.

Qué estoy haciendo mal ?

<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 (ie 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> 

4 Solutions collect form web for “No se puede dibujar en un lienzo HTML5 con Phonegap 2.7”

Estoy experimentando el mismo problema en el Galaxy S4. El dibujo de lienzo HTML no se muestra en la vista web, pero funciona en el navegador Safari. Galaxy S2, S3 no tienen el mismo problema.

En mi caso, cuando desactivo aceleración de hardware, funciona lienzo.

 appView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null); 

Pero es muy lento. No tiene nada que ver con PhoneGap. Probablemente Samsung hizo otro error en su implementación.

Mi Galaxy S4 "falla" cuando trato de dibujar cualquier imagen a las coordenadas 0,0.

Sólo me di cuenta de esto porque arrastrar elementos alrededor dentro del lienzo y cualquier color que se está dibujando a esas coordenadas cubre toda la pantalla.

Cuando arrastre hasta un punto en el que no hay ninguna imagen que cubre las coordenadas 0,0 en el lienzo, mi aplicación se ejecuta normalmente. También nunca ocurrió en el navegador de escritorio. Muy extraño.

Acabo de correr:

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

Al final de mi función de dibujo, y lo resolvió para mí. Vale la pena probarlo al menos.

Sin embargo, el Galaxy S3 de mi amigo no lo hizo.

¿Está construyendo con Phonegap Build o Eclipse? Si Eclipse, ¿tiene su proyecto configurado correctamente?

Reemplace $(document).ready(function () { con $(document).on("deviceready",function () { porque phonegap utiliza el evento deviceready para señalar cuando se ha inicializado.

También guarde el archivo JQuery JS dentro de su proyecto; Si la solicitud HTTP falla o su dispositivo Android no tiene una conexión, la aplicación no se cargará porque no puede cargar jQuery.

Por lo tanto, sustituya <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Con <script type="text/javascript" src="jquery.min.js"></script>

He intentado el código anterior con estas modificaciones (además he añadido algunos depurar) y funciona bien en mi HTC HD2 con Android 2.2.3 y mi Nexus 7 con Android 4.2.2

Aquí hay un archivo zip que contiene el proyecto Eclipse que creé para probarlo y el resultado de APK Android. Pruébelo en sus dispositivos y compruebe si funciona.

Debe considerar el uso de Crosswalk. Reemplaza la webview predeterminada de android, que es muy incosistente (cada proveedor suele complementar su propia) y es difícil mantener la aplicación coherente entre todas las versiones y proveedores de Android.

Crosswalk tiene una versión compatible con Cordova y en todas mis pruebas el aumento de rendimiento es notable.

https://crosswalk-project.org/

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.