使用来自另一个图像的事件缩放和平移图像

Posted 2023-05-09

【中文标题】使用来自另一个图像的事件缩放和平移图像

【英文标题】：Zoom and pan image with events from another image

【发布时间】：2021-12-02 22:25:23

【问题描述】：

我正在科尔多瓦做一个应用程序，我有一个图像，然后我在它上面放了另一个具有透明背景的 PNG 格式的图像：

如您所见，第一张图片是照片，而顶部的第二张图片是具有透明背景的框架。 我正在尝试做的是在框架后面捏和平移照片，以便让用户选择绘画的外观。

我能够使用以下代码使用hammer.js：

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;
      
    );
  

问题是如果我的手指在框架的透明区域 (PNG) 顶部，我无法从后面移动照片。

问题是我如何在框架顶部移动手指，但后面的照片成为捏和平移的目标？

我的第二个问题是是否可以隐藏/裁剪或模糊框架外照片的所有区域。

谢谢！

【参考方案1】：

尝试为透明框图像设置pointer-events: none。 您可以使用 CSS clip-path 属性。为此，我经常使用Clippy。

【讨论】：

谢谢，第一个问题的解决方案是完美的。但是我可以为第二个问题做些什么，因为我在透明框架中有许多不受管制的形状。我可以自动生成剪辑路径吗？

很抱歉，我无法为您提供帮助。我最好的建议是让你以某种方式“调节”这些形状。