Est-il possible d'utiliser l'étiquette pour capturer une signature électronique à l'aide d'un stylet? J'ai un exemple qui fonctionne sur Desktop Opera, mais il échoue sur la version Windows Mobile de l'opéra. Lorsque j'appuie sur la zone de dessin, Opera "zoome" simplement l'écran.Utilisation de Canvas Tag dans Opera 9.5 Mobile sur Windows Mobile 6.1 Treo 800w
ici est mon html Peinture Toile - Exemple 5
outil Dessin: Crayon
<div id="container">
<canvas id="imageView" width="400" height="300" tabindex="1">
<p>Unfortunately, your browser is currently unsupported by our web
application. We are sorry for the inconvenience. Please use one of the
supported browsers listed below, or draw the image you want using an
offline tool.</p>
<p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a
href="http://www.mozilla.com">Firefox</a>, <a
href="http://www.apple.com/safari">Safari</a>, and <a
href="http://www.konqueror.org">Konqueror</a>.</p>
</canvas>
</div>
//
voici mon javascript:
// Conserver tout en mode anonyme, appelé sur le chargement de la fenêtre. si (window.addEventListener) { window.addEventListener ('charge', function() {var toile, contexte, canvaso, Contexto;
// L'instance d'outil actif outil var;. var = tool_default 'crayon';
fonction init() { // Trouver l'élément canvas canvaso = document.getElementById ('imageView'); si (canvaso!) { d'alerte ("erreur:. Je ne trouve pas le élément de canevas! '); retour; }
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 = 'imageTemp';
canvas.width = canvaso.width;
canvas.height = canvaso.height;
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 ('click', ev_canvas, false); canvas.addEventListener ('mousedown', ev_canvas, false); canvas.addEventListener ('mousemove', ev_canvas, false); canvas.addEventListener ('mouseup', ev_canvas, false); }
// Le gestionnaire d'événements à usage général. Cette fonction détermine simplement la position de la souris par rapport à l'élément canvas. fonction ev_canvas (ev) { si (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);
}
}
// Le gestionnaire d'événements pour toutes les modifications apportées au sélecteur d'outil. fonction ev_tool_change (ev) { if (outils [cette.valeur]) { tool = new toolsthis.value; }}
// Cette fonction dessine la toile #imageTemp au-dessus de #imageView, après quoi // #imageTemp est effacé.Cette fonction est appelée à chaque fois que l'utilisateur // termine une opération de dessin. function img_update() { contexto.drawImage (canevas, 0, 0); context.clearRect (0, 0, canvas.width, canvas.height); }
// Cet objet contient l'implémentation de chaque outil de dessin. var outils = {};
// Le crayon de dessin. tools.pencil = function() { var outil = ceci; // this.started = false; this.started = true;
//Mike Butcher added
this.click = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
alert(ev._x);
};
// 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;
img_update();
}
};
};
init();
}, faux); }
Veuillez nous aider si vous avez des commentaires. J'ai essayé tout ce que je peux penser pour les deux dernières semaines.