1
有一個「簽名板」我爲建設一個就業申請一個奇怪的問題...HTML5畫布繪製應用... X，Y是正確的，但圖紙是關閉
的問題是，當你在畫布的左側，畫出的線條和光標排列在一起...隨着您向右側移動X和絃被繪製並且光標的x和絃不對齊，兩次與火狐打交道時長，當您移動從左至右，我沒有乘在我的代碼「*」只減。
HTML 我沒有離開OTH呃腳本/ 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 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);
}
最後的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 choord方差成倍增長就像是......在Y choord在整個精細且沒有差異。把我的頭髮拉出來！
編輯：我包括圖像，以告訴你我在說什麼大（r）黑點是光標的大概位置頂圖像是非常現貨，底部圖像，你可以看到光標遠離它應該在的位置左側。
編輯2：根據要求這已投入的jsfiddle ... HERE
我建議把所有這些代碼的jsfiddle – rochal
做感謝提示那個...我總是忘記它，但是當別人包括它時就愛它。 – Jared