Android开发：如何在拼贴相框的两张图片之间添加Zigzag锯齿分隔层

1. 基础视图层选型 #

优先用自定义ViewGroup作为父容器承载业务逻辑，层级结构如下：

• 底层承载2个支持交互的图片子View，独立处理自身的缩放、旋转、位移操作
• 上层直接在父容器的onDraw方法绘制锯齿分隔线，避免修改图片本身的内容
  图片的交互逻辑可以直接复用成熟的手势实现：用ScaleGestureDetector处理缩放，GestureDetector处理双击、单指滑动，额外记录双指触摸的初始角度和当前角度差实现旋转能力即可。

2. 锯齿（Zigzag）分隔线绘制逻辑 #

这部分是核心功能，需要适配图片变换后的实时边界：

• 提前定义可配置参数：锯齿高度zigzagHeight、锯齿宽度zigzagWidth、锯齿方向（水平适配上下拼贴、垂直适配左右拼贴）
• 左右拼贴场景的垂直锯齿绘制示例代码：

// 先声明锯齿画笔
private val zigzagPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
    color = Color.WHITE // 可自定义颜色
    style = Paint.Style.FILL
    strokeWidth = 2f
}

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    // 获取左图变换后的真实边界坐标，需要用Matrix的mapPoints方法计算，不要直接用View的原生left/right属性
    val leftImgRightX = leftImage.getTransformedRightX()
    val topY = leftImage.getTransformedTopY()
    val bottomY = leftImage.getTransformedBottomY()

    val zigzagPath = Path()
    zigzagPath.moveTo(leftImgRightX, topY)
    var currentY = topY
    // 循环绘制所有锯齿
    while (currentY < bottomY) {
        zigzagPath.lineTo(leftImgRightX + zigzagHeight, currentY + zigzagWidth / 2)
        zigzagPath.lineTo(leftImgRightX, currentY + zigzagWidth)
        currentY += zigzagWidth
    }
    canvas.drawPath(zigzagPath, zigzagPaint)
}

• 上下拼贴的水平锯齿只需要把X、Y的计算逻辑反过来即可。
  注意：每次图片有缩放、旋转、位移操作后，调用父容器的invalidate()触发重绘，保证分隔线永远贴合两张图的相邻边界

3. 触摸事件冲突处理 #

• 父容器的onInterceptTouchEvent中判断手指落点属于哪张图片的显示区域，不拦截事件直接分发给对应子View处理
• 如果需要支持选中态效果，可以在子View消费ACTION_DOWN事件时标记选中状态，父容器重绘时额外绘制选中边框即可

4. 高清导出逻辑 #

用户编辑完成导出成品图时，不要直接截取当前View的显示内容，会损失清晰度：

1. 创建和目标输出分辨率一致的空Bitmap和对应Canvas
2. 按照两张图的变换参数（缩放比、旋转角度、位移值），等比例映射到高分辨率画布上绘制两张原图
3. 按照相同比例映射锯齿参数，在两张图的分界处绘制锯齿分隔线
4. 最终把画布对应的Bitmap压缩保存即可

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