圖片區域點選處理

翻滚的咸鱼發表於2024-10-27

如果給你一張這樣的圖片，要求你點選到黑色圓圈時改變點選的圓圈顏色（選中狀態）
設計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()
        }
    }

相關文章