欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义控件实现望远镜效果

程序员文章站 2023-11-23 21:54:22
android自定义控件今天要讲到的就是望远镜效果,那么什么是望远镜效果,我们不妨看看下方的动图,看完后,相信大家就有一定的认识了。 1.着色器 对于这种效果来说,其实实现起来...

android自定义控件今天要讲到的就是望远镜效果,那么什么是望远镜效果,我们不妨看看下方的动图,看完后,相信大家就有一定的认识了。

Android自定义控件实现望远镜效果

1.着色器

对于这种效果来说,其实实现起来挺简单的,但我们将会用到在三维软件中的着色器shader,它是用来给空白图形上色的。用过ps的人,相信大家都知道里面有一个印章工具,印章的样式可以是图像,颜色,渐变色等。在android里面,shader的效果其实与他类似。

public shader setshader(shader shader)

上面是shader的专用函数,也是画笔paint中的函数,我们今天要用到的是bitmapshader,也即是图片来填充,它的基本用法如下:

public bitmapshader(bitmap bitmap,tilemode tilex,tilemode tiley)

tilex用来指定当x轴超出单张图片大小时所使用的重复策略

tiley用来指定当y轴超出单张图片大小时所使用的重复策略

而这两个值的取值有三种,分别是:

tilemode.clamp:用边缘色彩来填充多余空间,clamp就是以x轴填充x边缘颜色,以y轴填充y轴边缘颜色,而xy非图片相交区域以填充y轴的颜色继续填充。(这里估计博主故意把猫右边缘填充了黑色,y边缘填充了红色,框起来的地方是原图)

Android自定义控件实现望远镜效果

tilemode.repeat:重复原图像来填充多余空间,其实这个模式最好理解,就是复制粘贴,x不够的空白区域填充原图,y不够的也用原图像填充。

Android自定义控件实现望远镜效果

tilemode.mirror:重复使用镜像模式的图像来填充多余空间,有可能有的小伙伴不懂mirror镜像模式,其实镜像模式就是想镜子一样翻转了图像,如下图所示:

Android自定义控件实现望远镜效果

2.望远镜效果实现

原理已经剖析清楚了,接着,我们就来实现开头的望远镜效果,首先,还是自定义控件,毕竟这一个专栏都是自定义控件,基本每篇都少不了这个步骤,代码如下:

public class bitmapshaderview extends view {
 private paint paint;//画笔工具
 private bitmap bgbitmap,bitmap;//隐藏图像以及原图像
 private int mx=-1,my=-1;//捕获手指的位置坐标
 public bitmapshaderview(context context) {
  super(context);
 }
 
 public bitmapshaderview(context context, @nullable attributeset attrs) {
  super(context, attrs);
  this.paint=new paint();//初始化画笔工具
  this.bitmap= bitmapfactory.decoderesource(getresources(),r.drawable.background);//获取原图像
 }
 
 public bitmapshaderview(context context, @nullable attributeset attrs, int defstyleattr) {
  super(context, attrs, defstyleattr);
 }
}

详细注解,应该可以理解了,这里就不在做过多的赘述,接下来,我们需要捕获手指下按,移动以及离开屏幕的手指所在位置,也就是重写ontouchevent()函数:

public boolean ontouchevent(motionevent event) {
 switch (event.getaction()){
  case motionevent.action_down://手指按下事件
   this.mx=(int)event.getx();
   this.my=(int)event.gety();
   postinvalidate();//重绘
   return true;
  case motionevent.action_move://手指移动事件
   this.mx=(int)event.getx();
   this.my=(int)event.gety();
   break;
  case motionevent.action_up://手指抬起
  case motionevent.action_cancel://手指离开事件
   this.mx=-1;
   this.my=-1;
   break;
 
 }
 postinvalidate();//重绘
 return super.ontouchevent(event);
}

这里捕获了移动以及按下手指的坐标,这样就可以定位望远镜的位置,而当手指抬起的时候,望远镜效果就不见了,所以必须设置他们坐标为-1。最后是绘图代码,ondraw()实现:

protected void ondraw(canvas canvas) {
 super.ondraw(canvas);
 if(this.bgbitmap==null){
   this.bgbitmap=bitmap.createbitmap(getwidth(),getheight(),bitmap.config.argb_8888);//创建一个新空白位图
  canvas canvasbg=new canvas(this.bgbitmap);
  //然后对背景图拉升后,画到上面的位图中
  canvasbg.drawbitmap(this.bitmap,null,new rect(0,0,getwidth(),getheight()),this.paint);
 }
 if(this.mx!=-1 && this.my!=-1){
  //填充模式为上面讲的第二种,就是复制粘贴的填充模式,但这里不会执行
  //因为我们上面强制设置了图片的大小为整个屏幕,所以屏幕没有空白区域
  this.paint.setshader(new bitmapshader(this.bgbitmap,  shader.tilemode.repeat,shader.tilemode.repeat));
   canvas.drawcircle(this.mx,this.my,200,this.paint);
 }
}

这里我们首先创建了一个空白位图,然后对原图像进行拉升后画到这张位图中,接着,根据设置画笔的填充模式,这里其实没用,是因为我们拉升了图像,并没有空白区域,最后,我们根据手指坐标,将望远镜效果绘制到手机界面中,这样望远镜效果的自定义控件完美实现了。

github源代码下载地址:点击下载

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