概述

我相信很多用过英语应用的同学都看多一个放大镜的效果,就是选中一段文字后,会有一个放大镜,这个究竟怎么实现的呢,我们今天来分析分析。

源码分析

public class ShaderView extends View {
    private final Bitmap bitmap;
    private final ShapeDrawable drawable;
    // 放大镜的半径  

    private static final int RADIUS = 80;
    // 放大倍数  

    private static final int FACTOR = 3;
    private final Matrix matrix = new Matrix();  

    public ShaderView(Context context) {
        super(context);
        Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.demo);
        bitmap = bmp;
        BitmapShader shader = new BitmapShader(Bitmap.createScaledBitmap(bmp,
                bmp.getWidth() * FACTOR, bmp.getHeight() * FACTOR, true),
                TileMode.CLAMP, TileMode.CLAMP);
        // 圆形的drawable  

        drawable = new ShapeDrawable(new OvalShape());
        drawable.getPaint().setShader(shader);
        drawable.setBounds(0, 0, RADIUS * 2, RADIUS * 2);
    }  

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        final int x = (int) event.getX();
        final int y = (int) event.getY();
        // 这个位置表示的是,画shader的起始位置  

        matrix.setTranslate(RADIUS - x * FACTOR, RADIUS - y * FACTOR);
        drawable.getPaint().getShader().setLocalMatrix(matrix);
        // bounds,就是那个圆的外切矩形  

        drawable.setBounds(x - RADIUS, y - RADIUS, x + RADIUS, y + RADIUS);
        invalidate();
        return true;
    }  

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(bitmap, 0, 0, null);
        drawable.draw(canvas);
    }
}  

基本原理就是使用ShapeDrawable构造一个圆形的drawable,然后它的paint的shader设置为将要放大的图片,然后就是简单的位置移动问题了。放大镜的半径和放大倍数都可以在代码里面修改,代码都有注释,应该很好理解了。
不过,一个问题如果只有一种解决方法的话,那未免有点令人沮丧,想玩点另类的都不行。玩程序就得玩出个性,玩出激情。哈哈,废话太多,切回正题。再来看看放大镜的另外一种实现吧
public class PathView extends View {
    private final Path mPath = new Path();
    private final Matrix matrix = new Matrix();
    private final Bitmap bitmap;
    // 放大镜的半径  

    private static final int RADIUS = 80;
    // 放大倍数  

    private static final int FACTOR = 2;
    private int mCurrentX, mCurrentY;  

    public PathView(Context context) {
        super(context);
        mPath.addCircle(RADIUS, RADIUS, RADIUS, Direction.CW);
        matrix.setScale(FACTOR, FACTOR);  

        bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.demo);
    }  

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mCurrentX = (int) event.getX();
        mCurrentY = (int) event.getY();  

        invalidate();
        return true;
    }  

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 底图  

        canvas.drawBitmap(bitmap, 0, 0, null);
        // 剪切  

        canvas.translate(mCurrentX - RADIUS, mCurrentY - RADIUS);
        canvas.clipPath(mPath);
        // 画放大后的图  

        canvas.translate(RADIUS - mCurrentX * FACTOR, RADIUS - mCurrentY
                * FACTOR);
        canvas.drawBitmap(bitmap, matrix, null);
    }
}  


这里使用的是Path类,将canvas剪切出一块圆形区域,在其上绘制放大的部分。



android放大镜效果实现的更多相关文章

  1. Android放大镜效果的简单实现

    package com.example.myapi.pictobig; import com.example.myapi.R; import android.content.Context; impo ...

  2. Android动画效果之自定义ViewGroup添加布局动画

    前言: 前面几篇文章介绍了补间动画.逐帧动画.属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢?今天结合自定义ViewGroup来学习一下布局动画.本文将通 ...

  3. Android动画效果之Property Animation进阶(属性动画)

    前言: 前面初步认识了Android的Property Animation(属性动画)Android动画效果之初识Property Animation(属性动画)(三),并且利用属性动画简单了补间动画 ...

  4. Android动画效果之初识Property Animation(属性动画)

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  5. Android动画效果之Frame Animation(逐帧动画)

    前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...

  6. Android动画效果之Tween Animation(补间动画)

    前言: 最近公司项目下个版本迭代里面设计了很多动画效果,在以往的项目中开发中也会经常用到动画,所以在公司下个版本迭代开始之前,抽空总结一下Android动画.今天主要总结Tween Animation ...

  7. 关于jQuery中实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  8. 利用JS实现购物网站商品放大镜效果

    大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...

  9. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Python安装与使用的常见问题

    1. Python安装问题 到Python官网下载Python最新版本 Windows x86-64 executable installer (64为操作系统选择这个) Windows x86 ex ...

  2. TensorFlow实验环境搭建

    初衷: 由于系统.平台的原因,网上有各种版本的tensorflow安装教程,基于linux的.mac的.windows的,各有不同,tensorflow的官网也给出了具体的安装命令.但实际上,即使te ...

  3. Activtiy完全解析(三、View的显示过程measure、layout、draw)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/52840065 本文出自:[openXu的博客]   在Activity完全解析的第一篇文章A ...

  4. ROS机器人程序设计(原书第2版)补充资料 (伍) 第五章 计算机视觉

    ROS机器人程序设计(原书第2版)补充资料 (伍) 第五章 计算机视觉 书中,大部分出现hydro的地方,直接替换为indigo或jade或kinetic,即可在对应版本中使用. 计算机视觉这章分为两 ...

  5. Django extra 和 annotate

    >>> qs=Question.objects.extra(select={'anum': 'SELECT COUNT(*) FROM questions_answer WHERE ...

  6. 从Cell类型转变成数据型

    我们有一个如下的cell数据 cdata = {'1' '11' '111' '1111' '11111'}; 现在要把他转变成double型的数组,很自然会想到的方法是cell2mat,可悲的是会遇 ...

  7. SQLite Update 语句(http://www.w3cschool.cc/sqlite/sqlite-update.html)

    SQLite Update 语句 SQLite 的 UPDATE 查询用于修改表中已有的记录.可以使用带有 WHERE 子句的 UPDATE 查询来更新选定行,否则所有的行都会被更新. 语法 带有 W ...

  8. Ubuntu 安装 texlive2013 及中文支持

    分享一下安装和配置经验. 1.材料准备 texlive的安装包:可以百度下,这里也提供一个下载地址: http://mirror.hust.edu.cn/CTAN/systems/texlive/Im ...

  9. Cocos2D:变换(transforms)在图形编程中扮演的角色

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交 ...

  10. 剑指offer面试题5 从头到尾打印链表(c)