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

2022-03-07 14:15:10 浏览数 (1)

我学习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(); //松开之后需要清空下画笔 }

void

reset() Clear any lines and curves from the path, making it empty.

void

quadTo(float x1, float y1, float x2, float y2) Add a quadratic bezier from the last point, approaching control point (x1,y1), and ending at (x2,y2).

从最后一个点添加一个二次贝塞尔,接近控制点(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>

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

运行效果图:

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

0 人点赞