Android贝塞尔曲线实现手指轨迹

本文实例为大家分享了Android贝塞尔曲线实现手指轨迹的具体代码,供大家参考,具体内容如下

1、使用贝塞尔曲线前

MyView.java

public class MyView extends View {

 // 实例一个路径对象
 private Path mPath = new Path();

 public MyView(Context context) {
  super(context);
  // TODO Auto-generated constructor stub
 }

 public MyView(Context context, AttributeSet attrs) {
  super(context, attrs);
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  // TODO Auto-generated method stub
  switch (event.getAction()) {
  // 按下
  case MotionEvent.ACTION_DOWN:
   //getX()和getY()获得的永远是相对view的触摸位置坐标
   mPath.moveTo(event.getX(), event.getY());
   // return true表示当前控件已经消费了下按动作,
   // 之后的ACTION_MOVE、ACTION_UP动作也会继续传递到当前控件中
   return true;
   // 移动
  case MotionEvent.ACTION_MOVE:
   mPath.lineTo(event.getX(), event.getY());
   // postInvalidate用来重绘控件,在非UI线程中使用
   postInvalidate();
  default:
   break;
  }
  return super.onTouchEvent(event);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  // TODO Auto-generated method stub
  super.onDraw(canvas);
  // 实例一个画笔并设置画笔样式
  Paint paint = new Paint();
  paint.setColor(Color.RED);
  paint.setStyle(Paint.Style.STROKE);// 填充样式改为描边
  // 路径和画笔联合绘制成图形
  canvas.drawPath(mPath, paint);
 }

 public void reset() {
  // 清除掉path里的线条和曲线,但是不会改变它的fill-type
  mPath.reset();
  //刷新View,清屏
  invalidate();
 }
}

MyActivity.java

public class MyActivity extends Activity {
 MyView myView;
 Button reset;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
  setContentView(R.layout.gesture);
  myView = (MyView) findViewById(R.id.myView);
  reset = (Button) findViewById(R.id.reset);
  reset.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    myView.reset();
   }
  });
 }

}

gesture.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >
 <Button
  android:id="@+id/reset"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="reset" />
 <com.example.gesture.MyView
  android:id="@+id/myView"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />
</LinearLayout>

运行效果(不够顺滑)

2、使用贝塞尔曲线后

将上面函数lineTo()改为quadTo()

public class MySecondView extends View {
 private Path mPath=new Path();
 private float mPreX,mPreY;

 public MySecondView(Context context) {
  super(context);
 }

 public MySecondView(Context context, AttributeSet attrs) {
  super(context, attrs);
  // TODO Auto-generated constructor stub
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  // TODO Auto-generated method stub
  switch (event.getAction()) {
  case MotionEvent.ACTION_DOWN:
   //将Path的初始位置设置到手指的触点处
    mPath.moveTo(event.getX(), event.getY());
    mPreX=event.getX();
    mPreY=event.getY();
    return true;
  case MotionEvent.ACTION_MOVE:
   float endX=(mPreX+event.getX())/2;
   float endY=(mPreY+event.getY())/2;
   //quadTo前两个参数是控制点,后两个是终点
   mPath.quadTo(mPreX, mPreY, endX, endY);
   mPreX=event.getX();
   mPreY=event.getY();
   invalidate();
  default:
   break;
  }
  return super.onTouchEvent(event);
 }
  @Override
  protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);
   Paint paint = new Paint();
   paint.setStyle(Paint.Style.STROKE);
   paint.setColor(Color.RED);
   paint.setStrokeWidth(2);
   canvas.drawPath(mPath,paint);
  } 

  public void reset(){
   mPath.reset();
   postInvalidate();
  } 

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android利用二阶贝塞尔曲线实现添加购物车动画详解

    一.引入 其实之前一直以为像饿了么或者是美团外卖那种把商品添加到购物车的动画会很难做,但是实际做起来好像并没有想象中的那么难哈哈. 布局主要使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+TabLayout+ViewPager 动画主要使用二阶贝塞尔曲线与属性动画 消息传递使用EventBus普通事件 二.大致思路 1.如图所示主要有三个点,起点.终点.以及贝塞尔曲线的控制点 2.起点即点击的View的位置,一般来说用如下方式即可

  • android中贝塞尔曲线的应用示例

    前言: 贝塞尔曲线又称贝兹曲线,它的主要意义在于无论是直线或曲线都能在数学上予以描述.最初由保罗·德卡斯特里奥(Paul de Casteljau)于1959年运用德卡斯特里奥演算法开发(de Casteljau Algorithm),在1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表.目前广泛应用于图形绘制领域来模拟光滑曲线,为计算机矢量图形学奠定了基础.在一些图形处理软件中都能见到贝塞尔曲线,比如CorelDraw中翻译成"贝赛尔工具":而在Firewo

  • Android贝塞尔曲线初步学习第三课 Android实现添加至购物车的运动轨迹

    不知上一节高仿QQ未读消息气泡大家还喜欢么,今天继续练习贝赛尔曲线,这一节我们通过贝赛尔曲线和属性动画估值器实现添加至购物车的运动轨迹,效果如下: 1.新建自定义View,重写构造方法,初始化Paint.Path: 2.确定起始点.终止点.控制点坐标,这里我们直接固定: @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh);

  • Android贝塞尔曲线初步学习第二课 仿QQ未读消息气泡拖拽黏连效果

    上一节初步了解了Android端的贝塞尔曲线,这一节就举个栗子练习一下,仿QQ未读消息气泡,是最经典的练习贝塞尔曲线的东东,效果如下 附上github源码地址:https://github.com/MonkeyMushroom/DragBubbleView 欢迎star~ 大体思路就是画两个圆,一个黏连小球固定在一个点上,一个气泡小球跟随手指的滑动改变坐标.随着两个圆间距越来越大,黏连小球半径越来越小.当间距小于一定值,松开手指气泡小球会恢复原来位置:当间距超过一定值之后,黏连小球消失,气泡小球

  • Android把商品添加到购物车的动画效果(贝塞尔曲线)

    当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹 设置属性动画,ValueAnimator插值器,获取中间点的坐标 将执行动画的控件的x.y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 难点: PathMeasure的使用 - getLength() - boolean getPosTan(float distance, f

  • Android 利用三阶贝塞尔曲线绘制运动轨迹的示例

    本篇文章主要介绍了Android 利用三阶贝塞尔曲线绘制运动轨迹的示例,分享给大家,具体如下: 实现点赞效果,自定义起始点以及运动轨迹 效果图: xml布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rl_root&

  • Android Path绘制贝塞尔曲线实现QQ拖拽泡泡

    这两天学习了使用Path绘制贝塞尔曲线相关,然后自己动手做了一个类似QQ未读消息可拖拽的小气泡,效果图如下: 最终效果图 接下来一步一步的实现整个过程. 基本原理 其实就是使用Path绘制三点的二次方贝塞尔曲线来完成那个妖娆的曲线的.然后根据触摸点不断绘制对应的圆形,根据距离的改变改变原始固定圆形的半径大小.最后就是松手后返回或者爆裂的实现. Path介绍: 顾名思义,就是一个路径的意思,Path里面有很多的方法,本次设计主要用到的相关方法有 moveTo() 移动Path到一个指定的点 qua

  • Android贝塞尔曲线实现填充不规则图形并随手指运动

    贝塞尔曲线: 贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计.贝塞尔曲线最初由 Paul de Casteljau 于 1959 年运用 de Casteljau 演算法开发,以稳定数值的方法求出贝兹曲线.贝塞尔曲线主要用于二维图形应用程序中的数学曲线,曲线由起始点,终止点(也称锚点)和控制点组成,通过调整控制点,贝塞尔曲线的形状会发生变化. 在此举一个例子,实现贝塞尔曲线,基于以下场景: 上面的图片,我们可以见到一个白色的区域,边缘为弧形,这

  • Android中贝塞尔曲线的绘制方法示例代码

    贝塞尔曲线,很多人可能不太了解,什么叫做贝塞尔曲线呢?这里先做一下简单介绍:贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋.一般的矢量图形软件常利用贝塞尔曲线来精确画出曲线. 上面的介绍中,"线段像可伸缩的皮筋"这句话非常关键,但也特别好理解.至于贝塞尔曲线的详细内容大家可以查阅相关资料.        Android提供的贝塞尔曲线绘制接口 在Android开发中,要实现贝塞尔曲线其实还是很简单的,因为Android已经给我们提

  • Android贝塞尔曲线初步学习第一课

    贝塞尔曲线有一阶.二阶.三阶.N阶 一阶就是一条直线,有起点终点,没有控制点,对应方法就是 canvas.drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint) ; 二阶为曲线,有起点终点,一个控制点,对应方法就是 path.quadTo(float x1, float y1, float x2, float y2); 其中x1.y1为控制点坐标, x2.y2为终点坐标,效果如下:

随机推荐