实现放大镜效果-蒲公英云

实现放大镜效果

1、布局文件

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

2、在MainActivity中创建MyView的内部类，继承android.view.View类，并添加构造方法和重写onDraw(Canvas canvas)方法，然后在onCreate()方法中获取布局文件中添加的帧布局管理器，并将MyView视图添加到该帧布局管理器中

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FrameLayout ll = (FrameLayout)findViewById(R.id.frameLayout1);
        ll.addView(new MyView(this));
    }
    public class MyView extends View{
        public MyView(Context context) {
            super(context);
        }
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
        }
    }
}

3、在内部类MyView中，定义源图像、放大镜图像、放大镜的半径、放大倍数、放大镜的左边距和顶边距

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

4、在内部类MyView的构造方法中

Bitmap bitmap_source = BitmapFactory.decodeResource(getResources(),
<span style="white-space:pre">                    </span>R.drawable.source);//获取要显示的源图像
<span style="white-space:pre">            </span>bitmap = bitmap_source;
<span style="white-space:pre">            </span>BitmapShader shader = new BitmapShader(Bitmap.createScaledBitmap(
<span style="white-space:pre">                    </span>bitmap_source,bitmap_source.getWidth()*FACTOR, 
<span style="white-space:pre">                    </span>bitmap_source.getHeight()*FACTOR, true),TileMode.CLAMP , TileMode.CLAMP);//创建BitmapShader对象
<span style="white-space:pre">            </span>//圆形的drawable
<span style="white-space:pre">            </span>drawable = new ShapeDrawable(new OvalShape());
<span style="white-space:pre">            </span>drawable.getPaint().setShader(shader);
<span style="white-space:pre">            </span>drawable.setBounds(0, 0, RADIUS*2, RADIUS*2);//设置圆的外切矩形
<span style="white-space:pre">            </span>bitmap_magnifier = BitmapFactory.decodeResource(getResources(), R.drawable.magnifier);//获取放大镜图像
<span style="white-space:pre">            </span>m_left = RADIUS - bitmap_magnifier.getWidth()/2;//计算放大镜的默认左边距
<span style="white-space:pre">            </span>m_top = RADIUS - bitmap_magnifier.getHeight()/2;//计算放大镜的默认右边距

5、在MyView的onDraw()方法中，分别绘制背景图像、放大镜图像和放大后的图像

canvas.drawBitmap(bitmap, 0, 0, null);//绘制背景图像
            canvas.drawBitmap(bitmap_magnifier, m_left, m_top, null);//绘制放大镜图像
            drawable.draw(canvas);//绘制放大后的图像

6、在MyView类中，重写onTouchEvent()方法，实现党用户触摸屏幕时，放大触摸点附近的图像

@Override
<span style="white-space:pre">        </span>public boolean onTouchEvent(MotionEvent event) {
<span style="white-space:pre">            </span>final int x = (int)event.getX();//获取当前触摸点的X轴左边
<span style="white-space:pre">            </span>final int y = (int)event.getY();//获取当前触摸点的Y轴左边
<span style="white-space:pre">            </span>matrix.setTranslate(RADIUS-x*FACTOR, RADIUS-y*FACTOR);//平移到绘制shader的起始位置
<span style="white-space:pre">            </span>drawable.getPaint().getShader().setLocalMatrix(matrix);
<span style="white-space:pre">            </span>drawable.setBounds(x-RADIUS, y-RADIUS, x+RADIUS, y+RADIUS);//设置圆的外切距离
<span style="white-space:pre">            </span>m_left = x-bitmap_magnifier.getWidth()/2;//计算放大镜的左边距
<span style="white-space:pre">            </span>m_top = y-bitmap_magnifier.getHeight()/2;//计算放大镜的右边距
<span style="white-space:pre">            </span>invalidate();//重置画布
<span style="white-space:pre">            </span>return true;
<span style="white-space:pre">        </span>}