刮刮乐实现效果

当我们调整好画笔之后,现在需要绘制到画布上,这就得用Canvas类了。在Android中既然把Canvas当做画布,那么就可以在画布上绘制我们想要的任何东西。除了在画布上绘制之外,还需要设置一些关于画布的属性,比如,画布的颜色、尺寸等。下面来分析Android中Canvas有哪些功能,Canvas提供了如下一些方法:

Canvas(): 创建一个空的画布,可以使用setBitmap()方法来设置绘制具体的画布。

Canvas(Bitmap bitmap): 以bitmap对象创建一个画布,则将内容都绘制在bitmap上,因此bitmap不得为null。

Canvas(GL gl): 在绘制3D效果时使用,与OpenGL相关。

drawColor: 设置Canvas的背景颜色。

setBitmap:  设置具体画布。

clipRect: 设置显示区域,即设置裁剪区。

isOpaque:检测是否支持透明。

rotate:  旋转画布

setViewport:  设置画布中显示窗口。

skew:  设置偏移量。

一、xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

   <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="100dp"
        >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="300dp"
            android:layout_height="150dp"
            android:textSize="40dp"
            android:gravity="center_vertical|center_horizontal"
            android:text="谢谢惠顾"
            android:background="@android:color/holo_red_dark"
            />

        <com.example.guale.EraseView
        android:id="@+id/eraseView1"
        android:layout_width="300dp"
        android:layout_height="150dp"/>

    </RelativeLayout>
</LinearLayout>

二、EraseView.java

package com.example.guale;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class EraseView extends View {

	private boolean isMove = false;
	private Bitmap bitmap = null;
	private Bitmap frontBitmap = null;
	private Path path;
	private Canvas mCanvas;
	private Paint paint;

	public EraseView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
	@Override
	protected void onDraw(Canvas canvas) {

	    if (mCanvas == null) {
		    EraseBitmp();
	    }
		canvas.drawBitmap(bitmap, 0, 0, null);
		mCanvas.drawPath(path,paint);//绘制一个路径
		super.onDraw(canvas);
	}

	public void EraseBitmp() {

		bitmap = Bitmap.createBitmap(getWidth(),getHeight(), Bitmap.Config.ARGB_4444);

		frontBitmap = CreateBitmap(Color.GRAY,getWidth(),getHeight());//生产灰色图片

	//设置画笔的样式
		paint = new Paint();
		paint.setStyle(Paint.Style.STROKE);//设置画笔的风格:空心
		paint.setXfermode(new PorterDuffXfermode(Mode.CLEAR));//设置图片交叉时的显示模式
		paint.setAntiAlias(true);//防据齿
		paint.setDither(true);//防抖动
		paint.setStrokeJoin(Paint.Join.ROUND);//设置结合处的样子,ROUND为圆弧
		paint.setStrokeCap(Paint.Cap.ROUND);
		paint.setStrokeWidth(20);//设置描边宽度

		path = new Path();

		mCanvas = new Canvas(bitmap);//设置一个带图片的画布
		mCanvas.drawBitmap(frontBitmap, 0, 0,null);
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub

		float ax = event.getX();
		float ay = event.getY();

		if (event.getAction() == MotionEvent.ACTION_DOWN) {
			isMove = false;
			path.reset();
			path.moveTo(ax, ay);
			invalidate();
			return true;
		} else if (event.getAction() == MotionEvent.ACTION_MOVE) {
			isMove = true;
			path.lineTo(ax,ay);
			invalidate();
			return true;
		}
		return super.onTouchEvent(event);
	}

	public  Bitmap CreateBitmap(int color,int width, int height) {
		int[] rgb = new int [width * height];

		for (int i=0;i<rgb.length;i++) {
			rgb[i] = color;
		}
		return Bitmap.createBitmap(rgb, width, height,Config.ARGB_8888);
	}

}

三、效果图

刮刮乐实现效果

时间: 2024-10-06 10:34:51

刮刮乐实现效果的相关文章

使用Canvas对象实现“刮刮乐”效果

在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件能不能实现这种刮刮乐的效果呢?当然可以,本篇文章将介绍使用Canvas这个对象,如何实现"刮刮乐"的效果. 先看效果图 下面我们看一下如何使用代码实现 布局文件 <FrameLayout xmlns:android="http://schemas.android.com/a

[cocos2d-js]cc.RenderTexture几种用法(数字图片、刮刮乐效果)

[转]http://blog.csdn.net/realcrazysun1/article/details/42393629 本文基于cocos2d-js 3.0版本引擎开发 RenderTexture用法1:数字图片 通过这张图片实现任意数字 //数字图片精灵 var PictureNumber = cc.Sprite.extend({ m_Number:null, m_NumberTexture:null, ctor:function(){ this._super(); }, buildNu

HTML5 简单实现刮刮乐效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

Android实现刮刮乐效果

前几个月刚接触Android的时候做了一个小项目,其中也用到了类似刮刮乐的效果,现在把代码贴出来 首先要做一个类似橡皮擦的东西吧,然后才能把纸上的笔迹擦除 /** * FileName: SplashActivity.java * * @desc 橡皮擦功能,类似刮刮乐效果 * @author HTP * @Date 20140311 * @version 1.00 */ public class Text_Rubbler extends TextView { private float TOU

实现刮刮乐的效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } </style> </head> <body> <div id="box">

20行js代码制作网页刮刮乐

分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) <canvas id="canvas" width="400" height="300"></canvas> </body> 没什么要特别注意的为了效果加了些CSS样式 CSS部分 <style type=&qu

Android 撕衣服(刮刮乐游戏)

项目简介: 该项目为撕衣服,类似刮刮乐游戏 详细介绍: 用户启动项目后,加载一张图片,当用户点击图片的时候,点击的一片区域就会消失,从而显示出在这张图片下面的图片 这个小游戏类似与刮奖一样,刮开涂层就会显示文字. 这里则是撕掉美女身上的衣服,漏出里面的图片. 该应用涉及到的知识有: 1.如何实现画图功能 2.如何把像素点变为透明色 3.如何监听手机对屏幕的操作 主要有触击,滑动,离开三种情况 注意: 1.一定要注意在设置像素点的时候,范围不能超过当前控件的范围 2.设置ImageView最好设置

【微信公众平台开发】微信刮刮乐,解决三星兼容性问题

刮刮乐jquery插件:wScratchPad 完整项目资源下载:点击打开链接 运用wScratchPad插件很快弄出刮刮乐的效果,代码如下: <!DOCTYPE html> <html> <head> <meta CHARSET="UTF-8"> <title>刮刮乐</title> <script type="text/javascript" src="./inc/jquer

自己定义控件-画板,橡皮擦,刮刮乐

画板效果图 页面代码 public class ActionerView extends View { private Paint mPaint = new Paint(); private Path mPath = new Path();//手指滑动路径 private Canvas mCanvas;//缓存画布 private Bitmap mBitmap;//缓存图片 private float pointX, pointY;//触点坐标 public ActionerView(Conte