Android放大鏡效果實現(xiàn)
概述
我相信很多用過英語應用的同學都看多一個放大鏡的效果,就是選中一段文字后,會有一個放大鏡,這個究竟怎么實現(xiàn)的呢,我們今天來分析分析。
源碼分析
- public class ShaderView extends View {
- private final Bitmap bitmap;
- private final ShapeDrawable drawable;
- // 放大鏡的半徑
- private static final int RADIUS = 80;
- // 放大倍數(shù)
- private static final int FACTOR = 3;
- private final Matrix matrix = new Matrix();
- public ShaderView(Context context) {
- super(context);
- Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.demo);
- 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設置為將要放大的圖片,然后就是簡單的位置移動問題了。放大鏡的半徑和放大倍數(shù)都可以在代碼里面修改,代碼都有注釋,應該很好理解了。
不過,一個問題如果只有一種解決方法的話,那未免有點令人沮喪,想玩點另類的都不行。玩程序就得玩出個性,玩出激情。哈哈,廢話太多,切回正題。再來看看放大鏡的另外一種實現(xiàn)吧
- public class PathView extends View {
- private final Path mPath = new Path();
- private final Matrix matrix = new Matrix();
- private final Bitmap bitmap;
- // 放大鏡的半徑
- private static final int RADIUS = 80;
- // 放大倍數(shù)
- 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.demo);
- }
- @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剪切出一塊圓形區(qū)域,在其上繪制放大的部分。
工程下載地址http://download.csdn.net/detail/hustpzb/4523274