I'm developing an application in which I'm pasting images, doing drawing and painting on canvas. This app can also have pinch zoomin zoomout feature by HammerJS, the canvas can drag/pan it to different location. My problem is: I can't get the correct canvas coordinates after scaling or dragging the canvas. I want to draw finger paint after the canvas is scaled or dragged but unable to retrieve the right place where i've touched..:( Also I'm new bee. Here is the code for pinch zoom in and zoom out
var scaleFoctor = 1;
function hammerIt(elm) {
hammertime = new Hammer(elm, {});
hammertime.get('pinch').set({
enable: true
});
var posX = 0,
posY = 0,
scale = 1,
last_scale = 1,
last_posX = 0,
last_posY = 0,
max_pos_x = 0,
max_pos_y = 0,
transform = "",
el = elm;
if($('#pinchZoomInZoomOut').find('#pinchZoomInZoomOutBg').hasClass('btnIconHighLight')) {
hammertime.on('doubletap pan pinch panend pinchend panleft panright tap press', function(ev) {
//console.log("ev.type -- "+ev.type);
if (ev.type == "doubletap") {
transform =
"translate3d(0, 0, 0) " +
"scale3d(2, 2, 1) ";
scale = 2;
last_scale = 2;
try {
if (window.getComputedStyle(el, null).getPropertyValue('-webkit-transform').toString() != "matrix(1, 0, 0, 1, 0, 0)") {
transform =
"translate3d(0, 0, 0) " +
"scale3d(1, 1, 1) ";
scale = 1;
last_scale = 1;
}
} catch (err) {}
el.style.webkitTransform = transform;
transform = "";
}
if($('#pinchZoomInZoomOut').find('#pinchZoomInZoomOutBg').hasClass('btnIconHighLight')) {
//pan
if (scale != 1) {
//console.log("pan ev.type -- "+ev.type);
posX = last_posX + ev.deltaX;
posY = last_posY + ev.deltaY;
//console.log("posX - "+posX);
//console.log("posY - "+posY);
max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
//console.log("max_pos_x - "+max_pos_x);
//console.log("max_pos_y - "+max_pos_y);
if (posX > max_pos_x) {
posX = max_pos_x;
}
if (posX < -max_pos_x) {
posX = -max_pos_x;
}
if (posY > max_pos_y) {
posY = max_pos_y;
}
if (posY < -max_pos_y) {
posY = -max_pos_y;
}
}
}else{
}
//pinch
if (ev.type == "pinch") {
startDrawing = false;
scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
scaleFoctor = scale;
//console.log("pinch scale -- "+scale);
}
if(ev.type == "pinchend"){
//console.log("pinchend stopped 1 ")
last_scale = scale;
//console.log("pinchend last_scale -- "+last_scale);
scaleFoctor = scale;
}
//panend
if(ev.type == "panend"){
//console.log("pinchend stopped 2 ")
last_posX = posX < max_pos_x ? posX : max_pos_x;
last_posY = posY < max_pos_y ? posY : max_pos_y;
}
if (scale != 1) {
///console.log("pinchend stopped")
transform =
"translate3d(" + posX + "px," + posY + "px, 0) " +
"scale3d(" + scale + ", " + scale + ", 1)";
}
if (transform) {
el.style.webkitTransform = transform;
}
});
}
and below code is for getting touch points and drawing on canvas
// listen for touch events
$("#wrapperCanvas").touchstart(function (e) {
// var x = e.clientX;
// var y = e.clientY;
//alert("X coords: " + x + ", Y coords: " + y);
if($('#pinchZoomInZoomOut').find('#pinchZoomInZoomOutBg').hasClass('btnIconHighLight')) {
console.log("touchstart Zoom enabled startDrawing -- "+startDrawing);
console.log("touchstart Zoom enabled startDrawing -- "+scaleFoctor);
startDrawing = false;
pinchZoomInZoomOutOn();
}else{
startDrawing = true;
console.log("touchstart marker enabled startDrawing -- "+startDrawing);
newCtx = document.getElementById('drawOnScreen').getContext("2d");
e.preventDefault();
var canvas = document.getElementById("drawOnScreen");
var rect = canvas.getBoundingClientRect();
//clipBounds_canvas = canvas.getClipBounds();
var out = {x:0, y:0};
if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
console.log("touch.pageX - "+touch.pageX);
console.log("touch.pageY - "+touch.pageY);
if(scaleFoctor != 1){
out.x = touch.pageX/scaleFoctor;
out.y = touch.pageY/scaleFoctor;
}else{
out.x = touch.pageX/scaleFoctor - rect.left;
out.y = touch.pageY/scaleFoctor - rect.top;
}
}
var startX = parseInt(out.x);
var startY = parseInt(out.y);
Draw(startX, startY, false);
}
//start drawing on canvas
});
$("#wrapperCanvas").touchmove(function (e) {
//started drawing on canvas
if (startDrawing) {
e.preventDefault();
var canvas = document.getElementById("drawOnScreen");
//var ctx2 = canvas.getContext("2d");
var rect = canvas.getBoundingClientRect();
var out = {x:0, y:0};
if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
//out.x = touch.pageX/scaleFoctor - rect.left;
//out.y = touch.pageY/scaleFoctor - rect.top;
if(scaleFoctor != 1){
out.x = touch.pageX/scaleFoctor;
out.y = touch.pageY/scaleFoctor;
}else{
out.x = touch.pageX/scaleFoctor - rect.left;
out.y = touch.pageY/scaleFoctor - rect.top;
}
}
var startX = parseInt(out.x);//parseInt(e.clientX - offsetX);
var startY = parseInt(out.y);//parseInt(e.clientY - offsetY);
Draw(startX, startY, true);
}
});
$("#wrapperCanvas").touchend(function (e) {
//handleMouseUp(e);
startDrawing = false;
cPush();
});
Please help me to draw on canvas after zoomin/zoomout.
