2010-09-19 9 views
0

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.

Répondre

0

Il semble que vous ayez besoin d'utiliser la méthode event.preventDefault pour empêcher le comportement de zoom par défaut.

Questions connexes