至今头条

图片区域点击处理

2024-10-27 15:17 由 翻滚的咸鱼 发表于 #移动端开发

如果给你一张这样的图片，要求你点击到黑色圆圈时改变点击的圆圈颜色（选中状态）
设计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()
        }
    }