У меня странная проблема с 'Signature Pad', которую я создаю для заявления о приеме на работу ...
Проблема в том, что когда вы находитесь на левой стороне холста, рисуется линия илиния курсора вверх ... при перемещении к правой стороне рисуемая хорда X и хорда курсора не совпадают. Разница между ними увеличивается при перемещении слева направо. У меня нет умноженияв моем коде '*' только вычитание при работе с Firefox.
HTML Я оставил другие скрипты / div, которые, скорее всего, будут использоваться после запуска, так что вы можетесм. полный код ... Я также включаю js для тех, хотя они не должны иметь никакого эффекта в данный момент.
<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>-->
Подпись / Рисование 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);
}
Сбросить подпись js ...
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 (использует библиотеку Canvas2Image)
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);
}
Наконец 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;
}
Я просто не могу найти, что вызываетдисперсия X-хорды экспоненциально растет, как она есть ... Y-хорда хороша во всем и не имеет дисперсии.Вытаскиваю здесь свои волосы !!!
РЕДАКТИРОВАТЬ: я включаю изображения, чтобы показать вам, о чем я говорю, большие (r) черные точки - приблизительное положение курсора, верхнее изображение в значительной степени пятноНа нижнем изображении видно, что курсор находится далеко слева от того места, где он должен быть.
РЕДАКТИРОВАТЬ 2: Какпросил, чтобы это было помещено в jsFiddle ... ЗДЕСЬ