Vous avez déjà un problème étrange avec un « Signature Pad » Je construis une demande d'emploi ...application HTML5 dessin toile ... x, y correcte, mais le dessin est hors
Le problème est que lorsque vous sont sur le côté gauche de la toile la ligne en cours et la ligne de curseur vers le haut ... que vous vous déplacez vers le côté droit du l'accord de X étant tirage au sort et la corde x du curseur ne sont pas alignés. la différence entre la deux grandit lorsque vous vous déplacez de gauche à droite. Je n'ai pas la multiplication dans mon code « * » ne soustraction lorsqu'ils traitent avec Firefox.
HTML Je l'ai fait sortir de la OTH er scripts/divs qui seront très probablement utilisés une fois lancé là-bas afin que vous puissiez voir le code complet ... J'inclus également les js pour ceux-là même si elles ne devraient avoir aucun effet pour le moment.
<div id="container">
<canvas id="imageView">
<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 fill out a paper Signature release.
</p>
<p>
Supported browsers:<br />
<a href="http://www.opera.com/browser/download/">Opera Browser</a>
<a href="http://www.mozilla.org/en-US/firefox/features/">Firefox</a>
<a href="http://www.apple.com/safari/download/">Safari</a>
<a href="http://www.konqueror.org/download/">Konqueror (Linux PC)</a>
</p>
</canvas><!--
<div id="SigCover"></div>
<div id="SigCoverText"><span><br /> Signature Saved</span></div>
<div class="ClearBoth"></div>-->
</div>
<form action="">
<input type="button" value="Save Signature" onclick="SaveImage()" />
<input type="button" value="Reset Signature" onclick="ResetSignature()" />
</form>
<div id="ImageToSave"></div>
<!--<script type="text/javascript" src="@Url.Content("~/Scripts/Signature/canvas2image.js")"></script>-->
<script type="text/javascript" src="@Url.Content("~/Scripts/Signature/Signature.js")"></script><!--
<script type="text/javascript" src="@Url.Content("~/Scripts/Signature/SaveSignature.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Signature/ResetSignature.js")"></script>-->
Signature/Dessin js ...
var points = new Array();
if (window.addEventListener) {
window.addEventListener('load', function() {
var canvas, context, tool;
function init() {
// Find the canvas element.
canvas = document.getElementById('imageView');
if (!canvas) {
alert('Error: I cannot find the canvas element!');
return;
}
if (!canvas.getContext) {
alert('Error: no canvas.getContext!');
return;
}
// Get the 2D canvas context.
context = canvas.getContext('2d');
if (!context) {
alert('Error: failed to getContext!');
return;
}
// Pencil tool instance.
tool = new tool_pencil();
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
}
// This painting tool works like a drawing pencil which tracks the mouse
// movements.
function tool_pencil() {
var tool = this;
this.started = false;
// 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;
}
};
}
// The general-purpose event handler. This function just determines the mouse
// position relative to the canvas element.
function ev_canvas(ev) {
if (navigator.appName == 'Microsoft Internet Explorer' || navigator.vendor == 'Google Inc.' || navigator.vendor == 'Apple Computer, Inc.') { // IE or Chrome
ev._x = ev.offsetX;
ev._y = ev.offsetY;
} else if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX - this.offsetLeft;
ev._y = ev.layerY - this.offsetTop;
} 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);
}
points.push(ev);
}
init();
}, false);
}
Réinitialiser js Signature ...
function ResetSignature() {
var canvasReset = document.getElementById('imageView');
var contextReset = canvasReset.getContext('2d');
contextReset.fillStyle = '#000000';
contextReset.fillRect(0, 0, $('imageView').css('width'), $('imageView').css('height'));
canvasReset.width = canvasReset.width;
canvasReset.width = canvasReset.width;
alert(points.length);
points = new Array();
}
js Enregistrer Signature (utilise Canvas2Image lib)
function SaveImage() {
var CanvasToSave = document.getElementById('imageView');
var oImg = Canvas2Image.saveAsPNG(CanvasToSave, true);
$('#ImageToSave').html(oImg);
$('#SigCover').css('z-index', 102);
$('#SigCover').css('left', 23);
$('#SigCover').css('width', 402);
$('#SigCover').css('height', 152);
$('#SigCoverText').css('z-index', 101);
$('#SigCoverText').css('left', 23);
$('#SigCoverText').css('width', 400);
$('#SigCoverText').css('height', 150);
alert(points.length);
}
Enfin, le CSS
#imageView
{
background-color: #FFFFFF;
width: 400px;
height: 150px;
z-index: 100;
}/*
#SigCover
{
background-color: Gray;
opacity: .5;
width: 0px;
height: 0px;
position: absolute;
top: 57px;
left: -4000px;
z-index: -1;
float: left;
}
#SigCoverText
{
background-color: Gray;
opacity: .5;
width: 0px;
height: 0px;
position: absolute;
top: 57px;
left: -4000px;
z-index: -1;
float: left;
}
Je ne peux pas trouver ce qui cause la variance X choord à croître de façon exponentielle comme il est ... la choord Y est très bien et dispose d'aucun écart . Tirer mes cheveux ici !!!
EDIT: J'inclus des images pour vous montrer de quoi je parle les grands points (r) noirs sont l'emplacement approximatif du curseur l'image supérieure est à peu près sur place et l'image du bas, vous pouvez voir que le le curseur est loin à gauche de l'endroit où il devrait être.
EDIT 2: Comme cela a été demandé la mise en jsFiddle ... HERE
Je vous suggère de mettre tout ce code dans jsFiddle – rochal
merci pour suggérer Terminé que ... Je l'oublie toujours, mais j'adore quand les autres l'incluent. – Jared