简单实现Android放大镜效果

利用之前学过的图形图像绘画技术和图片添加特效技术,我们来实现一个Android放大镜的简单应用。

最终效果如图

具体实现:

用来显示自定义的绘图类的布局文件
res/layout/main.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:id="@+id/frameLayout1"
 android:orientation="vertical"
 > 

</FrameLayout>

打开MainActivity,在文件中创建名为MyView的内部类,继承android.view.View类,并添加构造方法和重写onDraw(Canvas canvas)方法,在里面进行作图:

MainActivity:

package com.example.test; 

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Shader.TileMode;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout; 

public class MainActivity extends Activity { 

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main); 

  //获取布局文件中添加的帧布局管理器
  FrameLayout fl=(FrameLayout)findViewById(R.id.frameLayout1);
  //将自定义的MyView视图添加到帧布局
  fl.addView(new MyView(this));
 } 

 public class MyView extends View{
  private Bitmap bitmap;//源图像,也就是背景图像
  private ShapeDrawable drawable;
  private final int RADIUS=57;//放大镜的半径
  private final int FACTOR=2;//放大倍数
  private Matrix matrix=new Matrix();
  private Bitmap bitmap_magnifiter;//放大镜位图
  private int m_left=0;//放大镜的左边距
  private int m_top=0;//放大镜的顶边距 

  public MyView(Context context) {
   super(context); 

   //获取要显示的源图像
   Bitmap bitmap_source=BitmapFactory.decodeResource(getResources(), R.drawable.backgroud);
   bitmap=bitmap_source;
   BitmapShader shader=new BitmapShader(Bitmap.createScaledBitmap(
     bitmap_source, bitmap_source.getWidth()*FACTOR,
     bitmap_source.getHeight()*FACTOR, true),TileMode.CLAMP,
     TileMode.CLAMP);//创建BitmapShader对象
   /* 注:Bitmap.createScaledBitmap() 方 法根据给定的 Bitmap 创建 一个新的,缩放后的 Bitmap。
    * Shader.TileMode类型的参数包括CLAMP、MIRROR和REPEAT3个可选值,其中,CLAMP为使用
    * 边界颜色来填充剩余的空间;MIRROR为采用镜像方式;REPEAT为采用重复方式*/ 

   //圆形的drawable
   drawable=new ShapeDrawable(new OvalShape());
   drawable.getPaint().setShader(shader);
   drawable.setBounds(0, 0, RADIUS*2, RADIUS*2);//设置圆的外切矩形
   bitmap_magnifiter=BitmapFactory.decodeResource(getResources(),
     R.drawable.magnifiter);//获取放大镜图像
   m_left=RADIUS-bitmap_magnifiter.getWidth()/2;//计算放大镜默认的左边距
   m_top=RADIUS-bitmap_magnifiter.getHeight()/2;//计算放大镜默认的右边距
  } 

  @Override
  protected void onDraw(Canvas canvas) {
   canvas.drawBitmap(bitmap, 0,0, null);//绘制背景图像
   canvas.drawBitmap(bitmap_magnifiter, m_left, m_top,null);//绘制放大镜图像
   drawable.draw(canvas);//绘制放大后的图像
   super.onDraw(canvas);
  } 

  //重写onTouchEvent方法实现当用户触摸屏幕时,放大触摸点附近的图像
  @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);
   drawable.setBounds(x-RADIUS,y-RADIUS,x+RADIUS,y+RADIUS);//设置圆的外切矩形
   m_left=x-bitmap_magnifiter.getWidth()/2;//计算放大镜的左边距
   m_top=y-bitmap_magnifiter.getHeight()/2;//计算放大镜的右边距
   invalidate();//重绘画布 

   return true;
  } 

 }
} 

运行效果如开头图片显示效果一样,测试成功。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android实现放大镜效果的方法实例(附源码)

    前言 应该有很多用过英语应用的同学都看多一个放大镜的效果,就是选中一段文字后,会有一个放大镜,这个究竟怎么实现的呢,我们今天来分析分析. 源码分析 public class ShaderView extends View { private final Bitmap bitmap; private final ShapeDrawable drawable; // 放大镜的半径 private static final int RADIUS = 80; // 放大倍数 private static

  • android 放大镜ShapeDrawable妙用分享

    首先,ShapeDrawable构造的时候可以指定描画的形状, 其次,可以通过shape.getPaint().setShader();指定Shader,shader可以接受一个图片和matrix 所以问题就顺利的解决了:) 具体实现如下:[java] 复制代码 代码如下: float scale = 1.2f; int cx = 224; int cy = 357; int r = 200; // 指定形状创建一个ShapeDrawable  ShapeDrawable shape=new S

  • Android放大镜的实现代码

    快三个月了没写博客了,因为工作调动,很多经验.心得都没有时间记录下来.现在时间稍微充裕了点,我会尽量抽时间将之前想写而没写的东西补上.进入正题.去年某个时候,我偶然看到一篇文章,讲android里面放大镜的实现.文章很乱,没有格式,基本上属于看不下去的那种.虽然体裁很有意思,但是我也没有足够的内力把它看完.不过看到一句关键的话,说是使用带圆形的Drawable.这句话就够了,他下面写的一堆东西我也懒得看,于是就自己开始尝试,然后就做出来了.现在代码贴出来分享.Java代码 复制代码 代码如下:

  • 简单实现Android放大镜效果

    利用之前学过的图形图像绘画技术和图片添加特效技术,我们来实现一个Android放大镜的简单应用. 最终效果如图 具体实现: 用来显示自定义的绘图类的布局文件 res/layout/main.xml: <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns

  • 简单实现Android倒计时效果

    本文实例为大家分享了Android倒计时效果的具体代码,供大家参考,具体内容如下 需求: a.在后台添加时,如果是今日直播,则需要添加开始时间(精确到秒): b.离开始时间超过1天,显示为:"离开时还有X天": c.离开时时间不到1天,显示为:"离开时还有XX:XX:XX": d.如果已经开始,显示为:"火热进行中". 效果图: /** * 显示剩余时间 */ private void setRestTime(final BaseViewHold

  • 简单实现js放大镜效果

    本文实例为大家分享了js放大镜效果展示的具体代码,供大家参考,具体内容如下 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div,img{ margin:0; padding:0; } img{ display:bl

  • Android自定义View实现简单的圆形Progress效果

    先给大家展示下效果图,如果感觉不错,请参考实现思路: 我们要实现一个自定义的再一个圆形中绘制一个弧形的自定义View,思路是这样的: 先要创建一个类ProgressView,继承自View类,然后重写其中的两个构造方法,一个是一个参数的,一个是两个参数的,因为我们要在xml文件中使用该自定义控件,所以必须要定义这个两个参数的构造函数.创建完了这个类后,我们先不去管它,先考虑我们实现的这个自定义View,我们想让它的哪些部分可以由使用者自己指定,比如说这个Demo中我们让他的外面圆的外边框颜色和宽

  • Android编程简单实现雷达扫描效果

    本文实例讲述了Android编程简单实现雷达扫描效果.分享给大家供大家参考,具体如下: 在eoe看到有一篇关于雷达扫描的文章,然后看了下,很简单,但是觉得还有很多可以优化的地方,下面贴出来 package com.example.wave; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; im

  • 原生JavaScript实现的简单放大镜效果示例

    本文实例讲述了原生JavaScript实现的简单放大镜效果.分享给大家供大家参考,具体如下: 原理: 其实所谓的放大就是准备两张一样的图片,除大小不一样.鼠标移动到不同位置,将会显示大图片对应的图片内容. 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜效果</title> </h

  • js实现简单放大镜效果

    用js实现简单放大镜效果,供大家参考,具体内容如下 此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边.当鼠标移动时右边的大图片也会局部移动.这里的放大并不是真正的放大,而是等比例移动.下面是实现的代码: css样式代码如下: <style> .s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;} .s_box img{width: 400px;heig

  • android控件Banner实现简单轮播图效果

    本文实例为大家分享了android控件Banner实现简单轮播图效果的具体代码,供大家参考,具体内容如下 实现这个轮播图是在Fragment里实现的,所以要想实现,首先要创建Fragment 首先是布局文件中的展示 <com.youth.banner.Banner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="500dp"

  • vue实现简单放大镜效果

    本文实例为大家分享了vue实现简单放大镜效果的具体代码,供大家参考,具体内容如下 <template> <div> <div class="imgMerror"> <div class="smallDiv" @mousemove="move($event)" @mouseenter="enter()" @mouseleave="leave()"> <im

  • js实现简单的放大镜效果

    本文实例为大家分享了js实现简单放大镜效果的具体代码,供大家参考,具体内容如下 效果 效果,鼠标在原图片移动,黄色小盒子跟随鼠标移动,黄色小盒子盖住的部分,在显示区显示 效果图如下: 核心思路 1.鼠标放置在图片上,显示区出现,鼠标离开小盒子,显示区消失 2.鼠标在图片上移动时,小盒子跟随鼠标移动,且鼠标在黄色小盒子中间位置 3.小盒子给判断,让其不能超出图片区域 4.小盒在图片上移动多少,显示区域要移动同比例的距离 5.当显示区大小发生改变,或显示区内容增大变小,原来图片上的黄色小盒子随之改变

随机推荐