实现图片放大缩小，点击热点响应事件

最近实现一个功能，类似百度地图。条件：一张图片。要求图片可以任意放大缩小移动，点击放缩后图片的热点时弹出popwindow，并且给热点区域添加阴影，显示出热点区。
实现思路：
1.先要实现图片的任意放缩
2.获得热点区域的坐标
3.点击热点区域响应事件
4.点击热点区域弹出popwindows，并指定popwindow的显示位置
5.给热点区域添加背景色
解决方法：
1.网上实现图片任意缩放功能的代码有很多，参考的博客http://yq135314.iteye.com/blog/1997676
2.参考以上博客，下载了DreameWeaver,获取热点坐标
3.获得手指点击时的坐标，根据放缩比例得到原坐标（放缩前），然后判断原坐标是否在热点区域。如在响应事件。
4.得到当前手指点击坐标，在该坐标处添加一个控件，比如button,popwindow的位置就相对于button来设定。
5.给当前图片的热点区域画矩形，并保存为bitmap，然后把这个图形作为放缩操作的图形。
遇到问题：
1.点击热点区域时在该热点区域弹出popwindow。pop的位置有两种，相对于某一view位置和绝对位置。在此处需要使用前者，但是热点区域并没有view，这就需要动态添加view。判断点击区域是否是热点区，若是，则获取当前坐标，并在该点处添加btn,使pop相对btn显示。
2.给图片热点区添加阴影。
//创建原图片bitmap，

（错误）mSourceBitmap = BitmapFactory.decodeStream(hotImgStream);//报异常Immutable bitmap passed to Canvas constructor 不允许直接修改res中的文件。

（正确）mSourceBitmap = BitmapFactory.decodeStream(hotImgStream) .copy( Bitmap.Config.ARGB_8888, true);
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mSourceBitmap != null) {
               Canvas c = new Canvas(mSourceBitmap );
               paint = new Paint();
               paint.setStyle(Paint.Style.FILL);
              paint.setColor(Color.BLACK);
              // 绘制矩形
             canvas.drawRect(10, 10, 100, 100, paint);
            canvas.drawBitmap(mSourceBitmap, mMatrix, null);
        } else {
            LogUtils.d(TAG, "mBlockBitmap is null !");
        }
    }
//运行结果：一张空白图片，因为新建的一张画布，虽然 Canvas c = new Canvas(mSourceBitmap );但没有对画布保存，所以显示一张空白画布。正确步骤如下：
mSourceBitmap = BitmapFactory.decodeStream(hotImgStream).copy( Bitmap.Config.ARGB_8888, true);
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mSourceBitmap != null) {
            mBlockBitmap = Bitmap.createBitmap(mSourceBitmap.getWidth(), mSourceBitmap.getHeight(), Bitmap.Config.ARGB_8888); //创建一个bitmap
            Canvas c = new Canvas(mBlockBitmap); //创建一个新画布
            c.drawBitmap(mSourceBitmap, 0, 0, null); //画上背景
            paint = new Paint();
            //这样写画出的矩形是实心的不透明的，setRGB就可以显示成功，不知道为什么
            // paint.setAlpha(1);
            // paint.setColor(Color.BLUE);
            paint.setARGB(50, 128, 138, 135);
            pt = new int[mHotAreas.size()][4];
            pt = getLocat(mHotAreas);
            for (int i = 0; i < mHotAreas.size(); i++) {
                c.drawRect(pt[i][0], pt[i][1], pt[i][2], pt[i][3], paint); //画矩形
            }
            c.save(Canvas.ALL_SAVE_FLAG); //保存画布
            canvas.drawBitmap(mBlockBitmap, mMatrix, null); //显示带热点阴影的图
        } else {
            LogUtils.d(TAG, "mBlockBitmap is null !");
        }
    }
效果图：

心得：最近一直在告诫自己，进度慢不要紧，重要的是想清楚，思路清晰。就像我在画热点阴影的时候，思路想通了，觉得逻辑上行得通，可是画出的是一张空白，不知道这个空白画布是哪来的，折腾了好久，才发现原来是见了一张空白画布。做任何事，先有个清晰的思路，然后在跟着思路一步步走下去，即时后来出错了，也能大概判断错在哪里，这样比盲目效仿效率更高！敲代码如此，做人做事也一样！

实现图片放大缩小，点击热点响应事件相关推荐

vue项目一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
点击图片放大缩小功能
1.点击图片放大缩小的思路图片部分: <table><div><img style="width:62px;height:83px;display:block ...
html如何控制图片自动放缩,如何用js控制图片放大缩小
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...
移动端查看预览图片放大缩小
方法一之前介绍过一款移动端vue适用的插件大全 https://blog.csdn.net/MtangEr/article/details/85339092 里边有一篇是查看图片放大缩小的 htt ...
【Axure交互教程】滑块控制图片放大缩小效果
作品名称:滑块控制图片放大缩小效果作品编号:Case007 软件版本:Axure9 作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Cas ...
Android实现图片放大缩小
蓝蓝的天蓝蓝的天,白云朵朵. White clouds in the blue sky. 目录视图摘要视图订阅新版极客头条上线,每天一大波干货任玉刚:Android开发者的职场规划 ...
css3 图片放大缩小闪烁效果
直接把图片替换就可以了,我的图片是透明的,所以body设置为黑色的,不不要可以去掉 <!doctype html> <html lang="en"> < ...
图片放大缩小旋转左移右移镜像倒影android
图片放大缩小旋转左移右移镜像倒影 demo: TestImage 1. 将 meinv.jpg 图片拷贝到以下目录TestImage\app\src\main\res\mipmap-hdpi 1.An ...
iphone iPhone开发中如何将制作图片放大缩小代码实现案例
1:原文摘自:http://mobile.51cto.com/iphone-285108.htm iPhone开发中如何将制作图片放大缩小案例是本文要介绍的内容,主要是来学习iphone开发中动画的制 ...

实现图片放大缩小，点击热点响应事件

实现图片放大缩小，点击热点响应事件相关推荐

最新文章

热门文章