如何定义ImageView边界，避免绘制的圆形超出其范围？（Kotlin）

咱们先理清楚核心问题：你不能直接用ImageView的宽高来判断边界，因为SVG会根据ImageView的scaleType（比如CENTER_CROP、FIT_CENTER等）进行缩放适配，实际显示的图像区域和ImageView的视图边界可能不一致。下面是具体的实现步骤和代码修改建议：

1. 先算出SVG图像在ImageView中的实际显示区域 #

首先得等ImageView加载完SVG后，计算出图像内容的真实绘制矩形（RectF）。可以借助ViewTreeObserver确保视图布局完成后再计算：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val layout: RelativeLayout = findViewById(R.id.layout1)
    val imageBody: ImageView = findViewById(R.id.your_imageview_id) // 替换成你的ImageView ID

    // 等ImageView布局完成后计算SVG的实际边界
    imageBody.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
        override fun onGlobalLayout() {
            imageBody.viewTreeObserver.removeOnGlobalLayoutListener(this)
            val svgDrawable = imageBody.drawable ?: return
            val svgBounds = calculateSvgDisplayBounds(imageBody, svgDrawable)
            // 创建自定义视图并传入SVG边界
            val customDrawView = CustomDrawView(this@MainActivity, svgBounds)
            // 让自定义视图和ImageView重叠，这样圆会画在SVG上面
            customDrawView.layoutParams = RelativeLayout.LayoutParams(
                RelativeLayout.LayoutParams.MATCH_PARENT,
                RelativeLayout.LayoutParams.MATCH_PARENT
            )
            layout.addView(imageBody)
            layout.addView(customDrawView)
        }
    })
}

// 辅助函数：根据ImageView的scaleType计算SVG的实际显示区域
private fun calculateSvgDisplayBounds(imageView: ImageView, drawable: Drawable): RectF {
    val viewW = imageView.width.toFloat()
    val viewH = imageView.height.toFloat()
    val drawableW = drawable.intrinsicWidth.toFloat()
    val drawableH = drawable.intrinsicHeight.toFloat()

    // 根据scaleType计算缩放比例
    val scaleX = viewW / drawableW
    val scaleY = viewH / drawableH
    val scale = when(imageView.scaleType) {
        ImageView.ScaleType.CENTER_CROP -> max(scaleX, scaleY)
        ImageView.ScaleType.FIT_CENTER, ImageView.ScaleType.FIT_XY, ImageView.ScaleType.CENTER_INSIDE -> min(scaleX, scaleY)
        ImageView.ScaleType.CENTER -> 1.0f
        else -> min(scaleX, scaleY) // 默认适配逻辑
    }

    // 计算缩放后的SVG尺寸和位置
    val scaledW = drawableW * scale
    val scaledH = drawableH * scale
    val left = (viewW - scaledW) / 2
    val top = (viewH - scaledH) / 2
    return RectF(left, top, left + scaledW, top + scaledH)
}

2. 在自定义视图中限制圆形的绘制范围 #

把计算好的SVG边界传给自定义视图，触摸时判断整个圆形是否完全在SVG区域内，再决定是否绘制：

class CustomDrawView(context: Context, private val svgBounds: RectF) : View(context) {
    private val circlePaint = Paint().apply {
        color = Color.RED
        style = Paint.Style.STROKE
        strokeWidth = 4f
        isAntiAlias = true
    }
    private val drawnCircles = mutableListOf<Circle>()
    private val circleRadius = 30f // 你定义的圆半径

    data class Circle(val x: Float, val y: Float)

    override fun onTouchEvent(event: MotionEvent): Boolean {
        if (event.action == MotionEvent.ACTION_DOWN) {
            val touchX = event.x
            val touchY = event.y
            // 判断整个圆是否完全在SVG边界内
            val circleLeft = touchX - circleRadius
            val circleTop = touchY - circleRadius
            val circleRight = touchX + circleRadius
            val circleBottom = touchY + circleRadius

            if (circleLeft >= svgBounds.left && circleRight <= svgBounds.right &&
                circleTop >= svgBounds.top && circleBottom <= svgBounds.bottom) {
                drawnCircles.add(Circle(touchX, touchY))
                invalidate() // 触发重绘
            }
            return true
        }
        return super.onTouchEvent(event)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        drawnCircles.forEach { circle ->
            canvas.drawCircle(circle.x, circle.y, circleRadius, circlePaint)
        }
    }
}

关键注意点 #

• 为什么要计算SVG边界？：比如当你用CENTER_CROP时，SVG会被裁剪填满ImageView，实际显示的图像区域可能比ImageView小（上下或左右被裁剪），直接用ImageView的边界判断会导致圆画到裁剪掉的区域里。
• 判断整个圆的边界：不能只判断圆心是否在SVG内，要确保圆的四个边缘都在SVG区域内，这样整个圆才不会超出图像范围。
• 视图层级：要把自定义视图放在ImageView的上层，这样绘制的圆才会显示在SVG图像上方。

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