1. 程式人生 > >【Android開發】範例2-實現放大鏡效果

【Android開發】範例2-實現放大鏡效果

利用之前學過的圖形影象繪畫技術和圖片新增特效技術,我們來實現一個Android放大鏡的簡單應用。

最終效果如圖



具體實現:
用來顯示自定義的繪圖類的佈局檔案
res/layout/main.xml:
<?xml version="1.0" encoding="utf-8"?>  
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/frameLayout1"
    android:orientation="vertical"
    >
	
</FrameLayout>

開啟MainActivity,在檔案中建立名為MyView的內部類,繼承android.view.View類,並新增構造方法和重寫onDraw(Canvas canvas)方法,在裡面進行作圖:

MainActivity:
package com.example.test;  
  
import android.app.Activity;
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.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
  
public class MainActivity extends Activity {  


    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);  
      
      //獲取佈局檔案中新增的幀佈局管理器
        FrameLayout fl=(FrameLayout)findViewById(R.id.frameLayout1);
        //將自定義的MyView檢視新增到幀佈局
        fl.addView(new MyView(this));
	}
   
    public class MyView extends View{
    	private Bitmap bitmap;//源影象,也就是背景影象
    	private ShapeDrawable drawable;
    	private final int RADIUS=57;//放大鏡的半徑
    	private final int FACTOR=2;//放大倍數
    	private Matrix matrix=new Matrix();
    	private Bitmap bitmap_magnifiter;//放大鏡點陣圖
    	private int m_left=0;//放大鏡的左邊距
    	private int m_top=0;//放大鏡的頂邊距
    	
		public MyView(Context context) {
			super(context);
			
			//獲取要顯示的源影象
		    Bitmap bitmap_source=BitmapFactory.decodeResource(getResources(), R.drawable.backgroud);
		    bitmap=bitmap_source;
		    BitmapShader shader=new BitmapShader(Bitmap.createScaledBitmap(
		    		bitmap_source, bitmap_source.getWidth()*FACTOR, 
		    		bitmap_source.getHeight()*FACTOR, true),TileMode.CLAMP,
		    		TileMode.CLAMP);//建立BitmapShader物件
		    /* 注:Bitmap.createScaledBitmap() 方 法根據給定的 Bitmap 建立 一個新的,縮放後的 Bitmap。
		     * Shader.TileMode型別的引數包括CLAMP、MIRROR和REPEAT3個可選值,其中,CLAMP為使用
		     * 邊界顏色來填充剩餘的空間;MIRROR為採用映象方式;REPEAT為採用重複方式*/
		   
		    //圓形的drawable
		    drawable=new ShapeDrawable(new OvalShape());
		    drawable.getPaint().setShader(shader);
		    drawable.setBounds(0, 0, RADIUS*2, RADIUS*2);//設定圓的外切矩形
		    bitmap_magnifiter=BitmapFactory.decodeResource(getResources(), 
		    		R.drawable.magnifiter);//獲取放大鏡影象
		    m_left=RADIUS-bitmap_magnifiter.getWidth()/2;//計算放大鏡預設的左邊距
		    m_top=RADIUS-bitmap_magnifiter.getHeight()/2;//計算放大鏡預設的右邊距
		}


		@Override
		protected void onDraw(Canvas canvas) {
			canvas.drawBitmap(bitmap, 0,0, null);//繪製背景影象
		    canvas.drawBitmap(bitmap_magnifiter, m_left, m_top,null);//繪製放大鏡影象
		    drawable.draw(canvas);//繪製放大後的影象
			super.onDraw(canvas);
		}


		//重寫onTouchEvent方法實現當用戶觸控式螢幕幕時,放大觸控點附近的影象
		@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);
			drawable.setBounds(x-RADIUS,y-RADIUS,x+RADIUS,y+RADIUS);//設定圓的外切矩形
			m_left=x-bitmap_magnifiter.getWidth()/2;//計算放大鏡的左邊距
		    m_top=y-bitmap_magnifiter.getHeight()/2;//計算放大鏡的右邊距
		    invalidate();//重繪畫布
		    
			return true;
		}
    	
		
    }
}  


執行效果如開頭圖片顯示效果一樣,測試成功。