Skip to content

Instantly share code, notes, and snippets.

@xjamundx
Created February 26, 2011 16:18
Show Gist options
  • Save xjamundx/845351 to your computer and use it in GitHub Desktop.
Save xjamundx/845351 to your computer and use it in GitHub Desktop.
Signature Drawing Canvas Panel in Sencha Touch
(function() {
var clicked, canvas, ctx, coords, offsetX, offsetY, oldX, oldY;
app.views.Signature = Ext.extend(Ext.Panel, {
layout: {
type: 'vbox',
pack: "center",
align: "center"
},
items: [{
scroll: false,
html: "<canvas width='500' id='canvas' height='100'/>"
}, {
xtype: 'button',
text: 'Submit',
handler: function(b, e) {
var img = canvas.toDataURL();
Ext.Ajax.request({
url: 'img.php',
method: 'POST',
params: {
img: img
}
});
}
}],
scroll: false,
listeners: {
activate: function() {
setupCanvas();
canvas.ontouchmove = handleMove;
canvas.onmousemove = handleMouseMove;
}
}
});
window.onmousedown = function() {
clicked = true;
}
window.onmouseup = function() {
oldX = oldY = clicked = false;
}
window.ontouchend = function() {
oldX = oldY = clicked = false;
}
function handleMouseMove(e) {
var x = e.offsetX,
y = e.offsetY;
if (clicked) drawCircle(x, y);
}
function handleMove(e) {
var x, y, i;
for (i = 0; i < e.targetTouches.length; i++) {
x = e.targetTouches[i].clientX - offsetX;
y = e.targetTouches[i].clientY - offsetY;
drawCircle(x, y);
}
}
function setupCanvas() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext("2d");
coords = getCumulativeOffset(canvas);
offsetX = coords.x;
offsetY = coords.y;
drawBg(ctx);
}
function drawBg() {
ctx.beginPath();
ctx.moveTo(0, 75);
ctx.lineTo(500, 75);
ctx.stroke();
ctx.font = "36pt Arial";
ctx.fillStyle = "rgb(180,33,33)";
ctx.fillText("X", 10, 75);
}
function drawCircle(x, y) {
ctx.strokeStyle = "rgb(55,55,255)";
ctx.beginPath();
if (oldX && oldY) {
ctx.moveTo(oldX, oldY);
ctx.lineTo(x, y);
ctx.stroke();
ctx.closePath();
}
oldX = x;
oldY = y;
}
// see: http://stackoverflow.com/questions/160144/find-x-y-of-an-html-element-with-javascript
function getCumulativeOffset(obj) {
var left, top;
left = top = 0;
if (obj.offsetParent) {
do {
left += obj.offsetLeft;
top += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return {
x : left,
y : top
};
};
})();
@mayankagarwal1988
Copy link

can you please explain fully i tried to write the above code in launch function but it didn't work.
I' am new to sencha touch can you please help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment