如何避免在ImageView的黑色区域绘制线条？

核心原因 #

自定义绘图View没有和带缩放的ImageView做坐标同步，导致绘图坐标未匹配ImageView缩放后的实际可见区域，从而画到了ImageView外的黑色区域。

具体解决步骤 #

• 同步缩放矩阵：获取自定义ImageView的缩放矩阵getImageMatrix()，在绘图View的onDraw方法中，先将Canvas应用这个矩阵，再进行绘制操作：

  // 获取ImageView的缩放矩阵
  Matrix imageMatrix = customImageView.getImageMatrix();
  // 将矩阵应用到绘图Canvas
  canvas.save();
  canvas.concat(imageMatrix);
  // 执行Paint绘制逻辑（线条、圆形）
  paint.setColor(Color.RED);
  canvas.drawLine(startX, startY, endX, endY, paint);
  canvas.drawCircle(circleX, circleY, radius, paint);
  canvas.restore();
  

• 限制绘图范围：获取ImageView的可见区域，在绘图时裁剪Canvas到该区域，避免绘制到外部：

  Rect clipRect = new Rect();
  customImageView.getClipBounds(clipRect);
  canvas.clipRect(clipRect);
  // 之后执行绘制
  

• 匹配布局层级：确保绘图View和ImageView布局边界严格对齐，比如用FrameLayout叠加两者，保证尺寸一致：

  <FrameLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <com.yourpackage.CustomZoomImageView
          android:id="@+id/zoom_image_view"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>
      <com.yourpackage.DrawingView
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>
  </FrameLayout>
  

• 监听缩放事件：如果ImageView支持手势缩放，在缩放回调中通知绘图View重新绘制，确保绘图始终跟随缩放后的图像位置。

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