快三個月了沒寫博客了,因爲工作調動,很多經驗、心得都沒有時間記錄下來。現在時間稍微充裕了點,我會盡量抽時間將之前想寫而沒寫的東西補上。進入正題。 去年某個時候,我偶然看到一篇文章,講android裏面放大鏡的實現。文章很亂,沒有格式,基本上屬於看不下去的那種。雖然體裁很有意思,但是我也沒有足夠的內力把它看完。不過看到一句關鍵的話,說是使用帶圓形的Drawable。這句話就夠了,他下面寫的一堆東西我也懶得看,於是就自己開始嘗試,然後就做出來了。現在代碼貼出來分享。
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; /** * 放大鏡實現方式1 * @author chroya * */ 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設置爲將要放大的圖片,然後就是簡單的位置移動問題了。放大鏡的半徑和放大倍數都可以在代碼裏面修改,代碼都有註釋,應該很好理解了。 不過,一個問題如果只有一種解決方法的話,那未免有點令人沮喪,想玩點另類的都不行。 玩程序就得玩出個性,玩出激情。哈哈,廢話太多,切回正題。 再來看看放大鏡的另外一種實現吧 ^-^
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; /** * 放大鏡實現方式2 * @author chroya * */ 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剪切出一塊圓形區域,在其上繪製放大的部分。
兩種方式的效果都一樣,如圖:
放大兩倍的效果。
放大三倍
貌似還缺點什麼,是吧? 嘿嘿,就是放大鏡外面缺個框。那玩意,我沒資源,所以懶得弄了,有興趣的自己加吧。
工程見附件。