Kann nicht auf einem HTML5 Canvas mit Phonegap 2.7 zeichnen

Ich habe eine einfache Schublade Beispiel online gefunden. Es funktioniert gut auf dem PC.

Wenn ich es laufe, mit Phonegap 2.7, auf meinem Galaxy S4 (4.2.2), mit Android 2.2 oder 4.2.2, für das Projekt, es einfach nichts zu zeichnen.

Was mache ich falsch ?

<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 “Kann nicht auf einem HTML5 Canvas mit Phonegap 2.7 zeichnen”

Ich erlebe das gleiche Problem auf Galaxy S4. HTML Canvas Zeichnung zeigt nicht in Webview, aber es funktioniert im Safari Browser. Galaxy S2, S3 haben nicht das gleiche Problem.

In meinem Fall, wenn ich Hardware beschleunigen deaktivieren, Leinwand funktioniert.

 appView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null); 

Aber es ist sehr langsam. Es hat nichts mit PhoneGap zu tun. Wahrscheinlich hat Samsung einen weiteren Fehler bei ihrer Implementierung gemacht.

Meine Galaxy S4 "Bugs out", wenn ich versuche, ein Bild auf die Koordinaten zu ziehen 0,0.

Ich habe das nur realisiert, weil ich Elemente in die Leinwand ziehe und was auch immer Farbe zu diesen Koordinaten gezogen wird, deckt den ganzen Bildschirm ab.

Wenn ich an einen Punkt ziehe, wo es kein Bild gibt, das die 0,0 Koordinaten in der Leinwand abdeckt, läuft meine Anwendung normal. Auch niemals im Desktop-Browser passiert. Sehr eigenartig.

Ich laufe gerade:

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

Am Ende meiner Zeichnungsfunktion, und es hat es für mich gelöst. Lohnt sich wenigstens.

Meine Freundin Galaxy S3 hat das aber nicht gemacht.

Bist du mit Phonegap Build oder Eclipse auf? Wenn Eclipse, hast du dein Projekt richtig eingerichtet?

Ersetzen Sie $(document).ready(function () { mit $(document).on("deviceready",function () { weil phonegap das deviceready-Ereignis verwendet, um zu signalisieren, wenn es initialisiert hat.

Speichern Sie auch die jQuery JS-Datei in Ihrem Projekt. Wenn die HTTP-Anforderung fehlschlägt oder Ihr Android-Gerät keine Verbindung hat, wird die App nicht geladen, da sie jQuery nicht laden kann.

Ersetzen Sie also <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

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

Ich habe den Code oben mit diesen Modifikationen (plus ich fügte einige Debug) und es funktioniert gut auf meinem HTC HD2 mit Android 2.2.3 und meine Nexus 7 läuft Android 4.2.2

Hier ist eine Zip-Datei mit dem Eclipse-Projekt, das ich erstellt habe, um es zu testen und daraus resultierende Android APK. Probieren Sie es auf Ihren Geräten und sehen, ob es funktioniert.

Du solltest mit Crosswalk in Verbindung treten. Es ersetzt die Standard-Android-Webview, die sehr inkonsistent ist (jeder Anbieter in der Regel nachträglich seine eigenen) und es ist schwer zu halten Ihre Anwendung konsistent unter allen Android-Versionen und Lieferanten.

Crosswalk hat eine Cordova kompatible Version und bei all meinen Tests ist die Leistungssteigerung spürbar.

https://crosswalk-project.org/

Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.