แต่ในที่นี้ต้องการให้ คลิกที่ปุ่ม ก่อนถึงจะให้มีการวาดเส้นลงไปได้ ต้องแก้ไขส่วนไหนบ้างค่ะ
signature.js :
โค้ด: เลือกทั้งหมด
var Signature = Class.create();
Object.extend(Signature.prototype, {
initialize: function (element, field) {
this.paths = [];
this.penDown = true;
this.canvas = $(element); // the drawing canvas
this.ctx = this.canvas.getContext('2d');
if ( field ) {
this.field = $(field); // an optional hidden field to store the drawing paths
}
this.showGuide = true;
// add observers here
Event.observe(document.body,'mouseup', this.mouseUp.bindAsEventListener(this));
Event.observe(this.canvas,'mousedown', this.mouseDown.bindAsEventListener(this));
Event.observe(this.canvas,'mousemove', this.mouseMove.bindAsEventListener(this));
if (this.showGuide) {
this.redraw();
}
// for touch enabled browsers -- prototype 1.5 doesn't support these events??
try {
this.canvas.addEventListener('touchstart',this.mouseDown.bindAsEventListener(this),false);
this.canvas.addEventListener('touchmove',this.mouseMove.bindAsEventListener(this),false);
document.body.addEventListener('touchend',this.mouseUp.bindAsEventListener(this),false);
document.body.addEventListener('touchmove',function(event){
Event.stop(event);
},false);
} catch( e ) {
// ignore if errors, browser doesn't support touch events
}
},
mouseDown: function(event) {
var point = this.getRelativePoint(event);
this.paths.push( [ point ] );
this.ctx.fillRect(point.x,point.y,1,1);
this.penDown = true;
this.updateField();
},
mouseUp: function(event) {
this.penDown = false;
this.ctx.closePath();
if ( Prototype.Browser.IE && event.srcElement.tagName != "INPUT" ) {
var ver = getInternetExplorerVersion();
if ( ver >= 8 && ver < 9 && document.selection ) {
document.selection.empty();
}
}
},
mouseMove: function(event) {
if ( this.penDown ) {
var lastPath = this.paths[ this.paths.length - 1 ];
var lastPoint = lastPath[ lastPath.length - 1 ];
var point = this.getRelativePoint(event);
lastPath.push( point );
this.ctx.strokeStyle = "#000000";
this.ctx.beginPath();
this.ctx.moveTo(lastPoint.x,lastPoint.y);
this.ctx.lineTo(point.x, point.y);
this.ctx.stroke();
this.ctx.closePath();
this.updateField();
}
},
getRelativePoint: function(event) {
if ( event.touches ) {
var point = { x: event.touches[0].clientX, y: event.touches[0].clientY };
} else {
var point = { x: Event.pointerX(event), y: Event.pointerY(event) }
}
this.offset = Position.cumulativeOffset(this.canvas);
point.x -= this.offset[0]; point.y -= this.offset[1];
return point;
},
clear: function() {
this.paths.length = 0;
this.redraw();
},
redraw: function() {
this.ctx.clearRect(0,0,this.canvas.getWidth(),this.canvas.getHeight());
this.draw();
},
draw: function() {
/* if ( this.showGuide ) {
var guideOffset = this.canvas.getHeight() * .8;
this.ctx.beginPath();
this.ctx.strokeStyle = "#FFCC00";
this.ctx.moveTo(10,guideOffset);
this.ctx.lineTo(290,guideOffset);
this.ctx.closePath();
this.ctx.stroke();
}
*/
if ( this.paths.length > 0) {
this.ctx.strokeStyle = "#000000";
for ( var path in this.paths ) {
this.ctx.fillRect(path[0].x,path[0].y,1,1);
this.ctx.beginPath();
this.ctx.moveTo(path[0].x,path[0].y);
for ( var point in path ) {
this.ctx.lineTo(point.x, point.y);
}
this.ctx.closePath();
this.ctx.stroke();
}
}
},
updateField: function() {
if ( this.field ) {
this.field.value = this.paths.toJSON();
}
}
});
function getInternetExplorerVersion() {
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
return rv;
}
โค้ด: เลือกทั้งหมด
function getDataID(canvas_id)
{
// alert(document.getElementById(canvas_id).getContext("2d"));
var dataURL = document.getElementById(canvas_id).toDataURL();
document.getElementById('paths').value = dataURL ;
// alert(dataURL);
}
โค้ด: เลือกทั้งหมด
Event.observe(window,"load", function() {
// write up events
var signature = new Signature('cc','paths');
$('clear').onclick = function() { signature.clear(); return false; }
});