首页 > 其他分享 >图片区域点击处理

图片区域点击处理

时间:2024-10-27 15:10:17浏览次数:4  
标签:event pixel 点击 区域 选中 圆圈 click 图片

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

 

标签:event,pixel,点击,区域,选中,圆圈,click,图片
From: https://www.cnblogs.com/LiuZhen/p/18508456

相关文章

  • 秋天早安祝福语大全 漂亮的早上好问候图片带字暖心一句
    淡淡的云儿淡淡的风,淡淡的祝福轻轻的送,只愿朋友心轻松,每日脸上有笑容,入秋时节,祝愿你美好相伴,健康常在。入秋时节,祝福送上,愿你年年圆满如意,月月事事顺心,日日喜悦无忧,时时高兴欢喜,刻刻充满朝气,幸福永远停驻在你心里。 太阳升,清晨到,天已亮,鸡已叫,快点醒来去晨练,天天保持好身......
  • CesiumJS 案例 P7:添加指定长宽的图片图层(原点分别为图片图层的中心点、左上角顶点、右
    CesiumJSCesiumJSAPI:https://cesium.com/learn/cesiumjs/ref-doc/index.htmlCesiumJS是一个开源的JavaScript库,它用于在网页中创建和控制3D地球仪(地图)一、添加指定长宽的图片图层(原点为图片图层的中心点)<!DOCTYPEhtml><htmllang="en"><head>......
  • 如何进行图片懒加载
    ​进行图片懒加载需要遵循以下步骤:一、了解懒加载的基础;二、选择合适的技术实现;三、确保向后兼容;四、优化用户体验;五、持续测试和评估。懒加载的首要任务是减少不必要的网络请求,提高页面加载速度。一、了解懒加载的基础在实施懒加载之前,我们需要了解其基本概念和背后的动机。......
  • 使用opencvjs提取图片中的红色印章
    首先看下效果:首先对于纯红色的印章提取,也就是通过提取红色的像素然后得到印章的结果,然后通过在红色的图像中寻找圆圈检测来进行圈定印章的位置源码位置:https://github.com/xxss0903/extractstamp第一步是提取红色内容functionextractStampWithColorToOpencvMat(img,......
  • 小北在GitHub上克隆项目(超详细的图文并解)之用 Python 对图片和视频进行高清修复
    前言    估计友友们应该在网上看过很多用AI修复的高清视频,最近我也有相关需求,需要修复几张图片。于是便去GitHub上寻找相关开源项目,结果还真找到一个,效果还很不错,小北这里特意分享出来给友友们~Real-ESRGAN对于算法小白的上手还是比较容易的,即便不懂算法知识,也......
  • qml圆形图片,qml圆形头像制作
    代码比较简单,就不细讲了,大家直接看下面源码吧!如果对你有所帮助,可以帮角角点个关注嘛?importQtQuickimportQtQuick.EffectsimportQt5Compat.GraphicalEffectsWindow{width:640height:480visible:truetitle:qsTr("RoundImageTest")//原......
  • Vue2 - 完美解决html2canvas截图不全问题,截屏导出的图片显示不全只有一部分或缺一块,vu
    前言该解决方案任意前端技术栈通用,不仅限Vue。在vue2(手机H5移动端/微信公众号H5页面)项目开发中,使用html2canvas截屏时发现有一部分未截取到少了一块截图不完整,导出保存图片时发现截图只有一半显示不全,另外还有一个问题就是截图时截取当前可视区域的问题(出现滚动条只保......
  • CesiumJS 案例 P6:添加图片图层、添加图片图层并覆盖指定区域
    CesiumJSCesiumJSAPI:https://cesium.com/learn/cesiumjs/ref-doc/index.htmlCesiumJS是一个开源的JavaScript库,它用于在网页中创建和控制3D地球仪(地图)一、添加图片图层<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"......
  • html添加图片的代码是什么
    在现代网页设计和开发中,图片是不可或缺的元素之一。它们可以增加视觉吸引力,传达信息,或者仅仅为了装饰效果。本文将详细解释如何在HTML文档中添加图片,包括基础的<img>标签用法,图片格式的选择,以及高级功能如图片响应式设计和懒加载等。对于初学者和中级网页开发者,这篇文章提供了一......
  • JS实现点击抽奖效果
    代码:<!DOCTYPEhtml><htmllang="zh-CN"><head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <title>Document</title&......