2014-11-6Android学习------在手机上用鼠标绘图的处理---贝塞尔曲线（一）

我学习Android都是结合源代码去学习，这样比较直观，非常清楚的看清效果，觉得很好，今天的学习源码是网上找的源码 百度搜就知道很多下载的地方 网上源码的名字叫：android 仿真翻页效果.zip我的博客写的比较乱，如果本篇文章没有看懂，

请先看上篇文章，地址：http://blog.csdn.net/u014737138/article/details/40866447

为了学习贝塞尔曲线 前面我们必须要先掌握几个知识点 ：Canvas Bitmap Path Paint

一：Bitmap

位图文件（Bitmap），扩展名可以是.bmp或者.dib。 位图是Windows标准格式图形文件，它将图像定义为由点（像素）组成，每个点可以由多种色彩表示，包括2、4、8、16、24和32位色彩。 例如，一幅1024×768分辨率的32位真彩图片，其所占存储字节数为：1024×768×32/8=3072KB

andorid 中的位图类：Bitmap 学习地址：http://blog.csdn.net/u014737138/article/details/40897073

二.关于Paint Path Canvas

学习地址：http://blog.csdn.net/u014737138/article/details/40897575

三.如何利用鼠标绘图

为了学习贝塞尔曲线，我们必须先搞清楚画笔是怎么做，所以就有了这篇文章的存在，

1.定义必须的变量：位图 画布 画笔（画图的画笔，画线的画笔） 路径

private Bitmap mBitmap; private Canvas mCanvas; private Path mPath; private Paint mBitmapPaint; private Paint mPaint;

2.定义手指的坐标

private float mX, mY;

3.定义一个常量表示移动的距离达到多少才画

private static final float TOUCH_TOLERANCE = 4;

4.构造函数中初始化这些变量

注意到我们当前的类是继承View的，也就是说必须重载onDraw（）函数

mBitmap = Bitmap.createBitmap(480, 800, Bitmap.Config.RGB_565);//创造位图 mCanvas = new Canvas(mBitmap);//利用位图创造画图 mPath = new Path();//创造一个路径 mBitmapPaint = new Paint(Paint.DITHER_FLAG);//创造一个绘图画笔

//下面的是画笔的处理

mPaint = new Paint(); mPaint.setAntiAlias(true);//设置抗锯齿 mPaint.setDither(true);// 设置 抖动处理，也即是递色，让图片变得更加清晰 mPaint.setColor(0xFF00FF00);//设置画笔的颜色 mPaint.setStyle(Paint.Style.STROKE);//设置画笔的风格 mPaint.setStrokeJoin(Paint.Join.ROUND);//设置平滑效果 mPaint.setStrokeCap(Paint.Cap.ROUND);//设置画笔的样式，依据画笔的风格STYLE而定 mPaint.setStrokeWidth(10);//设置画笔粗细度

5.重载onDraw()函数：

@Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint); //利用画图画笔在画布上首先绘制位图 canvas.drawPath(mPath, mPaint); //接下来在画布上画线条 }

6.接下来是触摸监听事务的处理，也就是手指动的时候就画

@Override public boolean onTouchEvent(MotionEvent event) { float x = event.getX(); //得到手指的x坐标 float y = event.getY(); //得到手指的y坐标 switch (event.getAction()) { case MotionEvent.ACTION_DOWN: //按下事件 touch_start(x, y); //开始画 invalidate(); //刷新视图，UI进程负责调用这个函数，当前的类是继承View的 break; case MotionEvent.ACTION_MOVE: //按下并拖动 touch_move(x, y); //移动 invalidate(); //刷新视图 break; case MotionEvent.ACTION_UP: //手指松开， touch_up(); //松开 invalidate(); //刷新 break; } return true; }

7.各个监听事件的处理：

//开始画

private void touch_start(float x, float y) { mPath.reset(); //首先清空所有的线条 mPath.moveTo(x, y); //然后手指开始滑动，第一个点，也即是起始点，就是箭头起始在哪个位置 mX = x; //手指的X坐标 mY = y; //手指的Y坐标 } private void touch_move(float x, float y) { //手指在拖动 float dx = Math.abs(x - mX); //获取移动中的X坐标变化的差值 float dy = Math.abs(y - mY); //获取移动中的Y坐标变化的差值 if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) { //如果该次移动的距离跟上次的相比超过4就画线，否则不做处理，就是不执行画线处理 mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);//二次方贝塞尔曲线 mX = x; //记录下当前的手指x坐标 mY = y; //记录下当前的手指Y坐标 } } private void touch_up() { //手指松开 mPath.lineTo(mX, mY); //最后的坐标点， mCanvas.drawPath(mPath, mPaint); //在画布上画出这条线路 mPath.reset(); //松开之后需要清空下画笔 }

从最后一个点添加一个二次贝塞尔，接近控制点（X1，Y1），并且在（X2，Y2）结束

将上面的代码放入一个类中，类名：TouchView

启动代码：

@Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(new TouchView(this)); }

配置清单文件：

<activity android:name=".TouchScreenActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>

不需要布局文件什么之类的，就两个类可以测试这个代码

运行效果图：

这既是贝塞尔曲线的一个画笔效果。还有翻页效果，请继续关注我的下篇文章