Zoom and pan image with events from another image

Question

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!

Answer 1

1. Try settingpointer-events: none for the transparent frame image.
2. You can use CSS clip-path property. I often use Clippy for this purpose.