iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android放大镜的实现代码
  • 545
分享到

Android放大镜的实现代码

Android 2022-06-06 10:06:15 545人浏览 安东尼
摘要

快三个月了没写博客了,因为工作调动,很多经验、心得都没有时间记录下来。现在时间稍微充裕了点,我会尽量抽时间将之前想写而没写的东西补上。进入正题。去年某个时候,我偶然看到一篇文章

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

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.view.MotionEvent;
import android.view.View;


public class ShaderView extends View{
 private Bitmap bitmap;
 private ShapeDrawable drawable;
 //放大镜的半径
 private static final int RADIUS = 80;
 //放大倍数
 private static final int FACTOR = 3;
 private Matrix matrix = new Matrix();

 public ShaderView(Context context) {
  super(context);
  Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.show);
  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设置为将要放大的图片,然后就是简单的位置移动问题了。放大镜的半径和放大倍数都可以在代码里面修改,代码都有注释,应该很好理解了。

不过,一个问题如果只有一种解决方法的话,那未免有点令人沮丧,想玩点另类的都不行。
玩程序就得玩出个性,玩出激情。哈哈,废话太多,切回正题。
再来看看放大镜的另外一种实现吧 ^-^
Java代码
代码如下:
package chroya.demo.magnifier;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.view.MotionEvent;
import android.view.View;


public class PathView extends View{
 private Path mPath = new Path();
 private Matrix matrix = new Matrix();
 private 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.show);
 } 
 @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实现放大镜效果的方法实例(附源码)android 放大镜ShapeDrawable妙用分享简单实现Android放大镜效果


--结束END--

本文标题: Android放大镜的实现代码

本文链接: https://www.lsjlt.com/news/27280.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js实现放大镜效果的思路与代码
    本文实例为大家分享了js实现放大镜效果的具体代码,供大家参考,具体内容如下 样式展示: 思路 先准备两张图片,一张小图,一张大图,并且两张图片有一个整数比值 在小图片的上方设置一个...
    99+
    2024-04-02
  • vue3实现淘宝放大镜效果的示例代码
    目录实现效果实现思路完成小图盒子、遮罩、大图盒子布局实现鼠标移动到小图盒子显示遮罩和大图盒子实现鼠标移动遮罩在小图盒子移动完整代码总结实现效果 实现思路 我们实现动图的淘宝放大镜的...
    99+
    2024-04-02
  • vue3封装放大镜组件的实例代码
    目录组件基础结构 目的:实现图片放大镜功能安装vueuse功能实现 完整代码 总结组件基础结构 结尾有完整代码可直接复制使用 目的:封装图片预览组件,实现鼠标悬停切换效果 落地代...
    99+
    2024-04-02
  • JavaScript实现简易放大镜最全代码解析(ES5)
    本文实例为大家分享了JavaScript实现简易放大镜的具体代码,供大家参考,具体内容如下 完整代码: <!DOCTYPE html> <html> &...
    99+
    2024-04-02
  • 利用Android实现一个放大镜功能
    今天就跟大家聊聊有关利用Android实现一个放大镜功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。源码分析public class ShaderView extends View...
    99+
    2023-05-31
    android roi
  • Canvas实现放大镜效果完整案例分析(附代码)
    小编给大家分享一下Canvas实现放大镜效果完整案例分析(附代码),相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一张模糊的图片:鼠标点击任意位置,产生放大效果:哇...
    99+
    2023-06-09
  • JavaScript实现放大镜效果
    本文实例为大家分享了JavaScript实现放大镜效果的具体代码,供大家参考,具体内容如下 这次实现的效果如下: 这次的案例稍微有一点难度,在css和js上都需要多加思考,话不多说...
    99+
    2024-04-02
  • javaScript实现放大镜特效
    要实现的效果:鼠标放到小图片上小图片上方会出现一个小块,这个小块里面的区域会放大显示到右边大图里面(如下图所示) 这个效果主要用到的是:鼠标的坐标e.clientX,e.clien...
    99+
    2024-04-02
  • JavaScript如何实现放大镜
    这篇文章给大家分享的是有关JavaScript如何实现放大镜的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实现原理借助宽高等比例放大的两张图片,结合js中鼠标偏移量、元素偏移量、元素自身宽高等属性完成;左侧遮罩移...
    99+
    2023-06-21
  • JavaScript实现放大镜详细
    目录1、效果图2、实现原理3、总结1、效果图 2、实现原理 借助宽高等比例放大的两张图片,结合js中鼠标偏移量、元素偏移量、元素自身宽高等属性完成;左侧遮罩移动Xpx,右侧大图移...
    99+
    2024-04-02
  • 用javascript实现放大镜效果
    我们经常在一些详情页上可以见到放大镜效果,今天我们也来做一个放大镜样式。 先来看一下效果: 图中的图片选的不是很好,有些糊了,各位可以重新选择图片进行做放大镜案例 这个案例可以分为...
    99+
    2024-04-02
  • vue实现带放大镜的搜索框
    本文实例为大家分享了vue实现带放大镜的搜索框,供大家参考,具体内容如下 字体图标在input单标签中的用法: 第一步,先在main.js 中全局引入iconfont图标; 第二步...
    99+
    2024-04-02
  • js实现简单的放大镜效果
    本文实例为大家分享了js实现简单放大镜效果的具体代码,供大家参考,具体内容如下 效果 效果,鼠标在原图片移动,黄色小盒子跟随鼠标移动,黄色小盒子盖住的部分,在显示区显示 效果图如下:...
    99+
    2024-04-02
  • vue如何实现放大镜效果
    这篇文章主要为大家展示了“vue如何实现放大镜效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何实现放大镜效果”这篇文章吧。组件使用less,请确保已...
    99+
    2024-04-02
  • vue实现简单放大镜效果
    本文实例为大家分享了vue实现简单放大镜效果的具体代码,供大家参考,具体内容如下 <template> <div> <div...
    99+
    2024-04-02
  • javascript实现简单放大镜效果
    一个大盒子中有一张图片,鼠标放上去会出现一个半透明的遮罩层,鼠标移动,遮罩层跟着移动,盒子旁边还有一个放大的图片,跟着遮罩层移动的位置而改变放大图的位置,鼠标离开大盒子,遮罩层和放大...
    99+
    2024-04-02
  • HTML+CSS+JavaScript实现放大镜效果
    本文实例为大家分享了HTML+CSS+JavaScript实现放大镜效果的具体代码,供大家参考,具体内容如下 效果演示 JS 详解 HTML 和 CSS 部分放在了文章最后的源代码...
    99+
    2024-04-02
  • JavaScript怎么实现放大镜效果
    这篇文章主要介绍了JavaScript怎么实现放大镜效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。这次实现的效果如下:这次的案例稍微有一点难度,在css和js上都需要多加...
    99+
    2023-06-25
  • html5如何实现放大镜功能
    今天小编给大家分享一下html5如何实现放大镜功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。html5实现放大镜功能的方...
    99+
    2023-07-05
  • JS实现京东放大镜效果
    本文实例为大家分享了JS实现京东放大镜效果的具体代码,供大家参考,具体内容如下 需要实现的效果图如下: ①布局:布局采用一个大盒子里面首先分为上下两个部分,然后下部分又分为左右两个...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作