I am doing an application in cordova where I have a image and then I put on top of it another image in PNG format with transparent background:
As you see the first picture is a photo and the second one on top is a frame with transparent background. What I am trying to do is to pinch and pan the photo behind the frame, in order to let the user choose how the painting should look like.
I was able to work with hammer.js using the following code:
hammerIt(document.getElementById("photoFromBehind"));
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;
hammertime.on("doubletap pan pinch panend pinchend", function (ev) {
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 = "";
}
//pan
if (scale != 1) {
posX = last_posX + ev.deltaX;
posY = last_posY + ev.deltaY;
max_pos_x = Math.ceil(((scale - 1) * el.clientWidth) / 2);
max_pos_y = Math.ceil(((scale - 1) * el.clientHeight) / 2);
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;
}
}
//pinch
if (ev.type == "pinch") {
scale = Math.max(0.999, Math.min(last_scale * ev.scale, 4));
}
if (ev.type == "pinchend") {
last_scale = scale;
}
//panend
if (ev.type == "panend") {
last_posX = posX < max_pos_x ? posX : max_pos_x;
last_posY = posY < max_pos_y ? posY : max_pos_y;
}
if (scale != 1) {
transform = "translate3d(" + posX + "px," + posY + "px, 0) " + "scale3d(" + scale + ", " + scale + ", 1)";
}
if (transform) {
el.style.webkitTransform = transform;
}
});
}
The problem is that I cannot move the photo from behind if my fingers are on top of the transparent area of the frame (PNG).
The question is how I can move fingers on top of the frame but the photo from behind to be the target of pinch and pan?
My second question is if is possible to hide/crop or blur all the area from the photo that is outside of the frame.
Thanks!