洋神的抽奖转盘学习总结

SurfaceView继承自View

但与View不同的是，View通过onDraw方法在UI线程进行绘制。

而SurfaceView则是在子线程进行绘制，这样可以避免阻塞主线程，所以在游戏中经常使用SurfaceView。

SurfaceView中包含一个专门用于绘制的Surface,Surface中包含一个Canvas。

怎么获取Canvas:

通过getHolder方法获取到SurfaceHolder,

通过SurfaceHolder就可以得到Canvas

SurfaceHolder还管理SurfaceView的生命周期：

SurfaceCreated

SurfaceChanged

SurfaceDestoryed

1.编写surfaceView的模板

public class SurfaceViewTempalte extends SurfaceView implements Callback, Runnable {
	private SurfaceHolder mHolder;
	private Canvas mCanvas;
	/**
	 * 用于绘制的线程
	 */
	private Thread t;
	
	/**
	 * 线程的绘制开关
	 * @param context
	 */
	private boolean isRunning;
	

 	public SurfaceViewTempalte(Context context) {
		this(context,null);
	}

	public SurfaceViewTempalte(Context context, AttributeSet attrs) {
		super(context, attrs);
		mHolder=getHolder();
		//管理SurfaceView的生命周期
		mHolder.addCallback(this);
		//可获得焦点
		setFocusable(true);
		setFocusableInTouchMode(true);
		//设置常量
		setKeepScreenOn(true);
		
	}

	@Override
	public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
	
		
	}

	@Override
	public void surfaceCreated(SurfaceHolder holder) {
		//开启绘制的子线程
		isRunning=true;
		t=new Thread(this);
		t.start();
		
	}

	@Override
	public void surfaceDestroyed(SurfaceHolder holder) {
		//关闭子线程
		isRunning=false;
	}

	@Override
	public void run() {
		//不断绘制
		while (isRunning) {
			draw();	
		}
	}

	private void draw() {
		try {
			mCanvas=mHolder.lockCanvas();
			if (mCanvas!=null) {
				//绘制的逻辑
				
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		finally {
			if (mCanvas!=null) {
				mHolder.unlockCanvasAndPost(mCanvas);
			}
		}
		
		
	}

2.接下来我们要绘制出这样的转盘：（没有指针）

首先定义相关的成员变量，接下来在构造函数或者SurfaceCreated里初始化相关的成员变量，最后在子线程绘制转盘。

public class LuckyPan extends SurfaceView implements Callback, Runnable {
	private SurfaceHolder mHolder;
	private Canvas mCanvas;
	/**
	 * 用于绘制的线程
	 */
	private Thread t;
	
	/**
	 * 线程的绘制开关
	 * 
	 */
	private boolean isRunning;
	/**
	 * 获奖上对应的文字
	 * 
	 */
	private String[] msts=new String[]{"单反相机","IPAD","恭喜发财","IPHONE","服装一套","恭喜发财"};
/**
 * 奖盘上对应的图片
 */
	private int[] mImages=new int[]{R.drawable.danfan,R.drawable.ipad,R.drawable.f015,
			R.drawable.iphone,R.drawable.meizi,R.drawable.f040};
	/**
	 * 盘块上对应的bitmap
	 */
	private Bitmap[] mBitmaps;
	/**
	 * 奖盘上对应的颜色
	 * 
	 */
	private int[] mColor=new int[]{0xFFFFC300,0XFFF17E01,0xFFFFC300,
			0XFFF17E01,0xFFFFC300,0XFFF17E01};
	/**
	 * 盘块的范围
	 */
	private RectF mRange=new RectF();
	/**
	 * 盘块的直径
	 * 
	 */
	private int mRadius;
	/**
	 * 绘制盘块的画笔
	 */
	private Paint mArcPaint;
	/**
	 * 绘制文本的画笔
	 */
	private Paint mTextPaint;
	private Bitmap mBgBitmap=BitmapFactory.
			decodeResource(getResources(), R.drawable.bg2);
	private float mTextSize=TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, 
			getResources().getDisplayMetrics());
	/**
	 * 盘块的数量
	 * 
	 */
	private int mItemCount=6;
	
	/**
	 * 滚动的速度
	 */
	private double mSpeed;
	/**
	 * 绘制的角度，volatile保证两个线程间的可见性
	 */
	private volatile int mStartAngle=0;
	/**
	 * 是否点击了停止按钮
	 */
	private boolean isShouleEnd;
	/**
	 * 转盘的中心位置
	 */
	private int mCenter;
	/**
	 * 转盘的边距
	 */
	private int mPadding;
	
	
 	public LuckyPan(Context context) {
		this(context,null);
		// TODO Auto-generated constructor stub
	}

	public LuckyPan(Context context, AttributeSet attrs) {
		super(context, attrs);
		mHolder=getHolder();
		mHolder.addCallback(this);
		//可获得焦点
		setFocusable(true);
		setFocusableInTouchMode(true);
		//设置常量
		setKeepScreenOn(true);
		
	}
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		int width=Math.min(getMeasuredHeight(), getMeasuredWidth());
		mPadding=getPaddingLeft();
		//直径
		mRadius=width-mPadding*2;
		//中心点
		mCenter=width/2;
		setMeasuredDimension(width, width);
	}

	@Override
	public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void surfaceCreated(SurfaceHolder holder) {
		//初始化绘制盘块的画笔
		mArcPaint=new Paint();
		mArcPaint.setAntiAlias(true);
		mArcPaint.setDither(true);
		
		//初始化绘制文本的画笔
		mTextPaint=new Paint();
		mTextPaint.setColor(0xffffffff);
		mTextPaint.setTextSize(mTextSize);
		
		//初始化盘块绘制的范围，四个参数分别是矩形的左边的x坐标，上边的y坐标，右边的x坐标，下边的y坐标
		mRange=new RectF(mPadding,mPadding,mPadding+mRadius,mPadding+mRadius);
		
		//初始化图片
		mBitmaps=new Bitmap[mItemCount];
		
		for(int i=0;i<mItemCount;i++){
			mBitmaps[i]=BitmapFactory.decodeResource(getResources(), mImages[i]);
		}
		
		
		isRunning=true;
		t=new Thread(this);
		t.start();
		
	}
	

	@Override
	public void surfaceDestroyed(SurfaceHolder holder) {
		// TODO Auto-generated method stub
		isRunning=false;
	}

	@Override
	public void run() {
		//不断绘制
		while (isRunning) {
			//开始绘制的时间
			long start=System.currentTimeMillis();
			draw();
			//结束绘制的时间
			long end=System.currentTimeMillis();
			//每隔50毫秒绘制一次
			if (end-start<50) {
				try {
					Thread.sleep(50-(end-start));
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
				
			}
				
		}
		
	}

	private void draw() {
		try {
			mCanvas=mHolder.lockCanvas();
			if (mCanvas!=null) {
				/**
				 * 要绘制4个东西：
				 * 绘制背景
				 * 绘制盘块
				 * 绘制盘块上的文字
				 * 绘制盘块上的图片
				 * 
				 */
				
				//1.绘制背景
				drawBg();

				//绘制的起始的角度
				float temAngle=mStartAngle;
				//绘制的角度
				float sweepAngle=360/mItemCount;
				
				for(int i=0;i<mItemCount;i++){
					//2.绘制盘块
					//设置绘制的盘块的颜色
					mArcPaint.setColor(mColor[i]);
					mCanvas.drawArc(mRange, temAngle, sweepAngle, true, mArcPaint);
					
					//3.绘制盘块的文本
					drawText(temAngle,sweepAngle,msts[i]);
					
					//4.绘制转盘上的图片
					drawIcon(temAngle,mBitmaps[i]);
					temAngle+=sweepAngle;
				}
				//绘制的起始角度与速度关联，形成盘块在不断旋转的效果
				mStartAngle+=mSpeed;
				if (isShouleEnd) {
					mSpeed-=1;
				}
				if (mSpeed<0) {
					mSpeed=0;
					isShouleEnd=false;
				}	
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		finally {
			if (mCanvas!=null) {
				mHolder.unlockCanvasAndPost(mCanvas);
			}
		}
		
		
	}
	/**
	 * 点击启动旋转
	 */
	public void luckyStart() {
		mSpeed=50;
		isShouleEnd=false;
	}
	/**
	 * 停止旋转
	 */
	public void luckyend() {
		isShouleEnd=true;
		
	}
	public boolean isStart() {
		return mSpeed!=0;
		
	}
	public boolean isShouldend() {
		return isShouleEnd;
		
	}

	private void drawIcon(float temAngle, Bitmap bitmap) {
		//图片的宽度是直径的八分之一
		int imageWidth=mRadius/8;
		//图片中心点的弧度
		float angle=(float) ((temAngle+360/mItemCount/2)*Math.PI/180);
		//图片中心点的坐标
		int x=(int) (mCenter+mRadius/2/2*Math.cos(angle));
		int y=(int) (mCenter+mRadius/2/2*Math.sin(angle));
		//定义图片的矩形边框
		RectF rectF=new RectF(x-imageWidth/2,y-imageWidth/2,x+imageWidth/2,y+imageWidth/2);
		mCanvas.drawBitmap(bitmap, null,rectF, null);	
	}

	private void drawText(float temAngle, float sweepAngle, String string) {
		
		Path path=new Path();
		path.addArc(mRange, temAngle, sweepAngle);
		//利用水平偏移量=弧度的一半-文字长度的一半
		float textWidth=mTextPaint.measureText(string);
		int hOffset=(int) (mRadius*Math.PI/2/mItemCount-textWidth/2);
		//垂直的偏移量，向圆心的偏移
		int vOffset=mRadius/12;
		mCanvas.drawTextOnPath(string, path,hOffset,vOffset , mTextPaint);	
	}

	private void drawBg() {
		mCanvas.drawColor(0xFFFFFFFF);
		mCanvas.drawBitmap(mBgBitmap, null, new RectF(mPadding/2,mPadding/2,getMeasuredWidth()-mPadding/2,
				getMeasuredHeight()-mPadding/2), null);
	}

}

3.在activity_main添加转盘和指针（控制转盘的开始和结束）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffffff"
    >
    <com.example.luckypan.LuckyPan 
        android:id="@+id/luckyPan"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_centerInParent="true"
        android:padding="30dp"
        />
    <ImageView 
        android:id="@+id/iv_start_end"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/start"
        />
</RelativeLayout>

4.控制转盘的转动和停止

public class MainActivity extends ActionBarActivity implements OnClickListener {
	private LuckyPan luckyPan;
	private ImageView Con;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		luckyPan=(LuckyPan) findViewById(R.id.luckyPan);
		Con=(ImageView) findViewById(R.id.iv_start_end);
		Con.setOnClickListener(this);
	}
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		if (!luckyPan.isStart()) {//转盘没有转动的时候，点击指针，开始转动
			luckyPan.luckyStart();
			//指针的图标改为停止图标
			Con.setImageResource(R.drawable.stop);	
		}
		else {
			if (!luckyPan.isShouldend()) {
				luckyPan.luckyend();
				Con.setImageResource(R.drawable.start );
				
			}
		}
		
	}
	
	
}