Android自定义View_BitmapShader实现望远镜效果

日拱一卒,功不唐捐

一、背景

这个特效来源于有一天逛网站的时候,一家网站实现了这样的一个效果:在你向下滚动页面的时候,他的背景的图片随着你的滑动,以窗口的方式展示着图片的某一部分。浏览完就想着以Android的方式能不能实现,也就演变成了以下的效果。


Android自定义View_BitmapShader实现望远镜效果_第1张图片
Telescope

二、知识点BitmapShader

【官方】Shader用于绘制位图作为纹理。位图可以设置模式为重复或镜像或平铺。

简单来说,Shader可以用来实现一些渐变,反转,镜像,重复等效果。本文的效果核心使用的是Shader中的BitmapShader——位图Shader。

BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)

从构造方法可以看出,第一个参数为位图bitmap,第二个和第三个参数分别为横方向和纵方向的平铺模式。
平铺模式有如下几种模式:

  • CLAMP :拉伸,水平拉伸图片左右方向最后一个像素,,垂直拉伸图片上下方向的最后一个像素。
  • MIRROR:镜像,水平和垂直方向重复图像,交替镜像,使相邻的图像始终相连。
  • REPEAT:重复,水平和垂直方向不断重复图片。

三、基本思路

1、创建一张图片,将画笔设置为带有图像填充功能;
2、根据获取手指所点击位置的坐标,根据获得的坐标绘制圆形或者其他图形。

四、实现

从上述基本思路来看,步骤还是很简单,那么接下来分析实现的代码。

        mPaint = new Paint();
        mBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.photo2);

首先就是初始化画笔和创建一张位图。接下来为核心内容。

        mPaint.setShader(new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
        canvas.drawCircle(400,400,300,mPaint);

BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)新创建一个BitmapShader,并将水平和垂直方向的平铺模式设置为CLAMP拉伸模式,将BitmapShader属性设置给画笔,使画笔具有图像填充功能,这是后面画笔可以绘制出一个带有图片的圆形的原因。接着利用Canvas在坐标(400,400)处绘制出一个半径为300的圆形。
目前基本的绘制已经结束,运行代码可以看出会有圆形图片在界面显示,如下图:

Android自定义View_BitmapShader实现望远镜效果_第2张图片
Paint.jpeg

从上面的图片来看,是不是发现其实这就是一个圆形的头像,到这里我们可以想到前面有一篇 Android自定义菱形图片使用PorterDuffXfermode的相关属性绘制菱形的头像,其实这里我们也可以使用BitmapShader进行操作,代码相比较更加简洁。
目前实现的是静态的图像,接下来实现随着手指动态移动的效果。

private float mTouchEventY = -1;
private float mTouchEventX = -1;
 ......

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mTouchEventX = event.getX();
                mTouchEventY = event.getY();
                return true;
            case MotionEvent.ACTION_MOVE:
                mTouchEventX = event.getX();
                mTouchEventY = event.getY();
                postInvalidate();
                break;
        }
        postInvalidate();
        return super.onTouchEvent(event);
    }

首先我们创建两个全局变量mTouchEventX,mTouchEventY。在onTouchEvent事件中,手指MotionEvent.ACTION_DOWN的时候,动态获取手指的位置,在ACTION_DOWN的代码中记得return true,这涉及到事件的分发机制,当return false时,代表手指的down事件未完成,那么事件将不会继续向下传递,也就是说ACTION_DOWN动作后的ACTION_MOVE是不会触发的。
同样的,我们在MotionEvent.ACTION_MOVE中也动态获取手指的位置,也就是随着手指动态调整圆形的位置。
最后在Canvas绘制圆形的时候,将获取到的位置设置进去,随着手指的不断移动,不断获取到位置值,也就实现了动态绘制图像的效果。

canvas.drawCircle(mTouchEventX,mTouchEventY,300,mPaint);

五、最后

在上述的过程中,发现BitmapShader可以很容易的实现不规则头像。另外,上述也只使用了BitmapShader的拉伸模式,还有镜像和重复模式可以实现更多的特效,有待发掘。

文章同步个人博客:https://fuusy.github.io
项目地址:https://github.com/fuusy/ShaderTelescope.git
公众号:小猿说

Android自定义View_BitmapShader实现望远镜效果_第3张图片
小猿说.jpg

你可能感兴趣的:(Android自定义View_BitmapShader实现望远镜效果)