图片区域点击处理
如果给你一张这样的图片,要求你点击到黑色圆圈时改变点击的圆圈颜色(选中状态)
设计UI会给一套选中图,尺寸一致,只有选中的圆圈不同
直观的实现方案,使用三个透明View,固定在三个圆圈上方位置,点击时设置点击选中的状态
弊端就是如果圆圈多了,需要固定多个View,并且如果圆圈位置发生了改变,每个固定在圆圈上方的View都要跟着修改
优化方案实现
通过 getPixel api拿到 Bitmap 的像素信息,在通过颜色值判断,你点击的区域是否为选中区域,如果只是改变颜色,比较简单,都不用选中的状态图片,直接修改图片的rgb就能实现
这里做个demo,点击时判断区域,如果是圆圈位置,就弹个toast
mBinding.ivImg.setOnTouchListener { _, event ->
if (event.action == MotionEvent.ACTION_DOWN) {
click(event.x.toInt(), event.y.toInt())
}
true
}
private fun click(x: Int, y: Int) {
resources.getDrawable(R.drawable.ic_test_click_bg, requireContext().theme)?.toBitmap()?.let {
checkClick(it, x, y) {
Toast.makeText(requireContext(), "click", Toast.LENGTH_SHORT).show()
}
}
}
private inline fun checkClick(it: Bitmap, x: Int, y: Int, clickBack: () -> Unit) {
val pixel = it.getPixel(x, y)
Log.d("click", "x $x y $y,pixel $pixel")
if (pixel != 0) {
clickBack.invoke()
}
}