Cordova应用PNG透明层触发下层图片缩放平移及超出区域裁剪问题

1. 实现相框区域操作触发下层照片手势 #

给上层相框元素添加CSS属性 pointer-events: none 即可，该属性会让元素完全不拦截、不响应任何触摸/鼠标事件，所有操作事件会直接穿透到下层的照片元素：

/* 给你的相框img元素添加该类 */
.frame-image {
  pointer-events: none;
}

你原有基于hammer.js的手势逻辑完全不需要修改，加完样式就能正常响应相框区域的操作。

2. 裁剪/模糊照片超出相框的区域 #

普通隐藏超出区域 #

将底图和相框放在同一个父容器内，给父容器设置和相框可视区域一致的宽高，再添加overflow: hidden属性，照片缩放平移超出父容器的部分就会自动被隐藏。
如果相框是不规则形状，你可以额外给父容器添加clip-path属性，将属性值设置为和相框镂空区域一致的路径，就能实现不规则形状的裁剪。

超出区域做模糊处理 #

如果需要保留超出区域但做模糊效果，可以在父容器外再叠加一层遮罩层，给遮罩层添加backdrop-filter: blur(8px)属性，同时把遮罩层和相框镂空对齐即可。

内容的提问来源于stack exchange，提问作者Lapoco