android开发 曲线图 android 画曲线

一个正方形框框，底边是一条贝塞尔曲线，上面站着个helloKitty，向下拉动曲线，HelloKitty上弹，但是不会超过正方形上边框。

bitmap的绘制坐标从左上角算起。

我这儿没用到物理引擎，速度方向等等那么复杂的，就简单的实现。

首先，构造方法中初始化一些东西

public ViewTwo(Context context, AttributeSet attrs,int defStyle) {
		super(context, attrs,defStyle);
		// TODO Auto-generated constructor stub
		paint=new Paint();
		paint.setColor(Color.BLACK);
		paint.setStrokeWidth(7f);
		paint.setAntiAlias(true);
	    path=new Path();
	    //这种写法，有效避免内存溢出
	    options=new Options();
	    options.inJustDecodeBounds=true;
	    //qqq为资源图片
	    bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.qqq,options);
	    //inSampleSize属性是为了节省内存
	    options.inSampleSize=options.outHeight/90;
	    //下面计算得到缩略图（可等比例放大缩小）的宽和高，本来图片是60*60，我把它放到90*90，outwidth为bitmap的宽度
	    options.outWidth=options.outWidth*90/options.outHeight;
	    options.outHeight=90;
	    options.inJustDecodeBounds=false;
	    bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.qqq,options);
	}

接下来，onDraw中先画正方形

/***画正方形*/
		paint.reset();
		//4条线，每条线一个初始点和结束点坐标
		float[] pts={100,500,500,500,
				     100,100,500,100,
				     100,100,100,500,
				     500,100,500,500};
				     //第二个第三个参数为跳过前4个数据，只画出后面12个
		canvas.drawLines(pts,4,12, paint);

再画贝塞尔曲线，x,y为辅助点坐标，下面会提供

/***画贝塞尔*/
	    paint.reset();
	    //画笔颜色
	    paint.setColor(Color.RED);
	    //画出不填充的图形
	    paint.setStyle(Paint.Style.STROKE);
	    //参数越大线条越粗
	    paint.setStrokeWidth(3f);
        //必须重置path，不然会出现many曲线，还不消失
	    path.reset();
	    //起点坐标
	   	path.moveTo(100, 500);
	    //x,y为辅助点坐标，500，500为终点坐标
		path.quadTo(x, y, 500, 500);
		canvas.drawPath(path, paint);
		/***画出辅助点，可以看出轨迹*/
		canvas.drawPoint(x, y, paint);

画hellokitty

/***画小人，为了将hellokitty画到曲线中央，下面提供xp,yp的计算方法*/
		 canvas.drawBitmap(bitmap, xp-options.outWidth/2, yp-options.outHeight, paint);
		  invalidate();

重写onTouchEvent方法，当手指拉动的时候，得出手指的坐标点，

public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		switch (event.getAction()) {
		case MotionEvent.ACTION_MOVE:
			x=event.getX();
			y=event.getY();
			/***t的范围从0-0.5就是从起始点到终点曲线上的点坐标,
			 *  xp中100是起始点横坐标，x是辅助点的横坐标，500是终点的横坐标
			    yp中500是起始点纵坐标，y是辅助点的纵坐标，500是终点的纵坐标
			**/
			//if是禁止上拉
			if(y<500){y=500;}
            //for(float t=0;t<=0.5;t+=0.1){
			float t=(float) 0.5;
			//xp,yp是贝塞尔曲线中点坐标，调节下面y的大小可以控制在拉动的时候图片距离横线的距离
		   xp = (1-t)*(1-t)* 100 + 2* t*(1-t)* x + t * t * 500;
		   yp = (1-t)*(1-t)* 500 + 2* t*(1-t)* y + t * t * 500;
            //}
			//postInvalidate()方法是在子线程中刷新View
			//invalidate()方法是在UI线程中刷新View
			invalidate();
			break;
			//ACTION_UP为松开手势状态，让曲线回到直线状态
		case MotionEvent.ACTION_UP:
			//让曲线回到直线状态
			x=300;
			y=500;
			//这儿的标志是判断kitty是否jump，发生下拉动作，所以jump
			jump = true;
			invalidate();
		}
		return true;
	}

下面根据这个标志jump写相应的动作

if (jump) {  
				/***画贝塞尔，用jumppercent这个方法是参考的别人的方法，将跳动高度化为100份，逐次递减5，在递减控制在正方形上边界内*/
	            if(jumpPercent >0) {  
	            //只要小于100（意味着跳出了上边界，return阻止继续上升），
	            	if((yp-options.outHeight)*jumpPercent/100<=100){
	            		canvas.drawBitmap(bitmap, xp-options.outWidth/2, 100, paint);  
	            		jumpPercent -=5;  
		                xp=300;
		    			yp=500;
		                postInvalidateDelayed(20);
		                return;
	            	}
	                    canvas.drawBitmap(bitmap, xp-options.outWidth/2, (yp-options.outHeight)* jumpPercent/100, paint);  
	                    jumpPercent -=5;  
	                    xp=300;
	    		    	yp=500;
	                    postInvalidateDelayed(20);
	            }else { 
	            //重置 
	            	    jumpPercent = 100;  
	                    jump = false;  
	            }
			}

我知道没图片没人来 - -！

初学，有不对的地方欢迎大家指正。 下面再去学习一下用物理引擎怎么做.