使用贝塞尔曲线和Pathmeasure画粘连体

最新推荐文章于 2022-06-07 00:11:49 发布
最新推荐文章于 2022-06-07 00:11:49 发布
阅读量319 收藏 1
点赞数
分类专栏： android 文章标签： path 动画 boolean 贝塞尔曲线 粘连体 pathmeasu
闪电人
本文链接：https://blog.csdn.net/qq_21727627/article/details/77644514
版权 
public class StickinessView1 extends View {
   Paint paint;
   Path path;
   private PathMeasure mPathMeasure;
   ValueAnimator valueAnimator;
   boolean isAnimation;
   PointF ponitF;
   float offset1=30;
   float offset2=30;
   public StickinessView1(Context context) {
      this(context, null);
   }
   public StickinessView1(Context context, AttributeSet attrs) {
      this(context, attrs, 0);
   }

   @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
   public StickinessView1(Context context, AttributeSet attrs, int defStyleAttr) {
      super(context, attrs, defStyleAttr);
      initData();
   }

   private void initData() {
      mPathMeasure = new PathMeasure();
      path = new Path();
      paint = new Paint();
      paint.setColor(Color.RED);
      paint.setStyle(Paint.Style.FILL);
      valueAnimator=new ValueAnimator();
      //设置回弹插值器
      valueAnimator.setInterpolator(new BounceInterpolator());

      valueAnimator.setDuration(1000);
      valueAnimator.addListener(new Animator.AnimatorListener() {
         @Override
         public void onAnimationStart(Animator animation) {

         }

         @Override
         public void onAnimationEnd(Animator animation) {
            //恢复原状
            isAnimation=false;
            lastX1=200;
            lastY1=200;
         }

         @Override
         public void onAnimationCancel(Animator animation) {

         }

         @Override
         public void onAnimationRepeat(Animator animation) {

         }
      });

      valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
         @Override
         public void onAnimationUpdate(ValueAnimator animation) {
            isAnimation=true;
            ponitF= (PointF) animation.getAnimatedValue();
            Log.e("tt", "onAnimationUpdate: ponitF"+ponitF.x+" x "+ponitF.y );
            postInvalidate();
         }
      });
   }


   @Override
   public void draw(Canvas canvas) {
      super.draw(canvas);
      if(isAnimation) {
         drawAdhesionBody(canvas, 200, 200, 15f, offset1, ponitF.x, ponitF.y, 20f,
               offset2)
         ;
      }else{
         drawAdhesionBody(canvas, 200, 200, 15f, offset1, lastX1, lastY1, 20f,
               offset2)
         ;
      }
   }

   /**
    * 画粘连体
    *
    * @param cx1     圆心x1
    * @param cy1     圆心y1
    * @param r1      圆半径r1
    * @param offset1 贝塞尔曲线偏移角度offset1
    * @param cx2     圆心x2
    * @param cy2     圆心y2
    * @param r2      圆半径r2
    * @param offset2 贝塞尔曲线偏移角度offset2
    * @return
    */
   public void drawAdhesionBody(Canvas canvas,float cx1, float cy1, float r1, float offset1, float
         cx2, float cy2, float r2, float offset2) {


      path.reset();
      float dX = cx1 - cx2;
      float dY = cy1 - cy2;
      path.addCircle(cx1, cy1, r1, Path.Direction.CW);

      path.addCircle(cx2, cy2, r2, Path.Direction.CW);

      mPathMeasure.setPath(path, false);
      //canvas.drawPath(path, paint); 这样使用 发现判断不准确画的也不太对
      canvas.drawCircle(cx1, cy1, r1,paint);

      canvas.drawCircle(cx2, cy2, r2,paint);

    /* 求三角函数 */
      float degrees = (float) Math.toDegrees(Math.atan(Math.abs(cy2 - cy1) / Math.abs(cx2 -
            cx1)));

    /* 两条贝塞尔曲线的四个端点 */
      float x1 = 0, y1 = 0, x2 = 0, y2 = 0, x3 = 0, y3 = 0, x4 = 0, y4 = 0;

      float position1[] = new float[2];
      float position2[] = new float[2];
      float position3[] = new float[2];
      float position4[] = new float[2];
      if(dX==0&&dY==0)return ;
      //圆2在圆1的右下角 包括正右方,包括正下方
      if (dX <= 0 && dY <= 0) {
         Log.e("tt", "drawAdhesionBody: \t//圆2在圆1的右下角" );
         mPathMeasure.getPosTan(mPathMeasure.getLength() * ((offset1 + degrees) / 360), position3,
               null);
         if (degrees <= offset1) {
            mPathMeasure.getPosTan(mPathMeasure.getLength() * ((360 - (offset1 - degrees)) / 360),
                  position1,
                  null);
         } else {
            mPathMeasure.getPosTan(mPathMeasure.getLength() * ((degrees - offset1) / 360),
                  position1,
                  null);
         }
         Log.e("tt", "drawAdhesionBody: mPathMeasure.getLength() "+mPathMeasure.getLength()  );
         mPathMeasure.nextContour();
         Log.e("tt", "drawAdhesionBody: mPathMeasure.getLength() "+mPathMeasure.getLength()  );

         mPathMeasure.getPosTan(mPathMeasure.getLength() * ((180 + offset2 + degrees) / 360),
               position2,
               null);
         mPathMeasure.getPosTan(mPathMeasure.getLength() * ((180 + degrees-offset2 ) / 360),
               position4,
               null);
      }
      //圆2在圆1的左下角 包括正左方
       else if (dX > 0 && dY <= 0) {
         Log.e("tt", "drawAdhesionBody: \t//圆2在圆1的左下角" );

         mPathMeasure.getPosTan(mPathMeasure.getLength() * ((90 + offset1 +90- degrees) / 360),
               position3, null);
         mPathMeasure.getPosTan(mPathMeasure.getLength() * ((90 - offset1 + 90-degrees) / 360),
               position1, null);
         mPathMeasure.nextContour();
         mPathMeasure.getPosTan(mPathMeasure.getLength() * ((270 - offset2 + 90-degrees) / 360),
               position4,
               null);
         if(degrees<=offset2)
         mPathMeasure.getPosTan(mPathMeasure.getLength() * (( offset2-degrees) / 360),
               position2,
               null);
         else
            mPathMeasure.getPosTan(mPathMeasure.getLength() * ((360- (degrees-offset2)) / 360),
                  position2,
                  null);

      }
      //圆2在圆1的左上角 包括正上方
      else if (dX >= 0 && dY > 0) {
         Log.e("tt", "drawAdhesionBody: \t//圆2在圆1的左上角" );

         mPathMeasure.getPosTan(mPathMeasure.getLength() * ((180 + offset1 + degrees) / 360),
               position3,
               null);
         mPathMeasure.getPosTan(mPathMeasure.getLength() * ((180 - offset1 + degrees) / 360),
               position1,
               null);
         mPathMeasure.nextContour();
         if (degrees <= offset2) {
            mPathMeasure.getPosTan(mPathMeasure.getLength() * ((360 - offset2 + degrees) /
                        360),
                  position4,
                  null);
         } else {
            mPathMeasure.getPosTan(mPathMeasure.getLength() * ((degrees - offset2) / 360),
                  position4,
                  null);
         }
         mPathMeasure.getPosTan(mPathMeasure.getLength() * ((degrees + offset2) / 360),
               position2,
               null);
      }
      //圆2在圆1的右上角
       else if (dX < 0 && dY > 0) {
         Log.e("tt", "drawAdhesionBody: \t//圆2在圆1的右上角" );
         if (degrees <= offset1)
         mPathMeasure.getPosTan(mPathMeasure.getLength() * (( offset1-degrees) / 360),
               position3,
               null);
         else
            mPathMeasure.getPosTan(mPathMeasure.getLength() * (( 360-(degrees-offset1)) / 360),
                  position3,
                  null);

            mPathMeasure.getPosTan(mPathMeasure.getLength() * ((360-offset1 - degrees) / 360),
                  position1,
                  null);
         mPathMeasure.nextContour();
         mPathMeasure.getPosTan(mPathMeasure.getLength() * ((180 - offset2 - degrees) / 360),
               position4,
               null);
         mPathMeasure.getPosTan(mPathMeasure.getLength() * ((90-degrees + offset2 + 90) / 360),
               position2,
               null);

      }

    /* 贝塞尔曲线的控制点 */
      x1 = position1[0];
      y1 = position1[1];
      x2 = position2[0];
      y2 = position2[1];
      x3 = position3[0];
      y3 = position3[1];
      x4 = position4[0];
      y4 = position4[1];
      Log.e("tt", "drawAdhesionBody:  x1, y1 , x2, y2 , , y3 , x4, y4;" +
            x1 +","+y1 +","+x2 +","+y2 +","+ x3 +","+ y3 +","+x4 +","+ y4 );
      float anchorX1, anchorY1, anchorX2, anchorY2;

    /* 圆1大于圆2 */
      if (r1 >r2) {
         anchorX1 = (x2 + x3) / 2;
         anchorY1 = (y2 + y3) / 2;
         anchorX2 = (x1 + x4) / 2;
         anchorY2 = (y1 + y4) / 2;

      }
   /* 圆1小于或等于圆2 */
      else {
         anchorX1 = (x1 + x4) / 2;
         anchorY1 = (y1 + y4) / 2;
         anchorX2 = (x2 + x3) / 2;
         anchorY2 = (y2 + y3) / 2;
      }


      path.moveTo(x1, y1);
      path.quadTo(anchorX1, anchorY1, x2, y2);
      //path.lineTo(x2,y2);
      path.lineTo(x4, y4);
      //path.lineTo(x3,y3);
      path.quadTo(anchorX2, anchorY2, x3, y3);
      path.lineTo(x1, y1);

      canvas.drawPath(path,paint);
      //return path;
   }
   float cy2=200 ,cx2=200;
   float lastX=200,lastY=200;
   float lastX1=200,lastY1=200;
   @Override
   public boolean onTouchEvent(MotionEvent event) {
      cx2=event.getX();
      cy2=event.getY();
      switch (event.getAction()){

         case MotionEvent.ACTION_DOWN:
            lastX=cx2;
            lastY=cy2;
            break;
            case MotionEvent.ACTION_MOVE:
            float dx=  cx2-lastX;
            float dy=  cy2-lastY;
               if(Math.abs(dx)>0.2||Math.abs(dx)>0.2){
                  lastX1+=dx;
                  lastY1+=dy;
               postInvalidate();
               }
               break;
         case MotionEvent.ACTION_UP:

            valueAnimator.setObjectValues(new PointF(lastX1,lastY1),new PointF(200,200));
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
               valueAnimator.setEvaluator(new PointFEvaluator(new PointF()));
            }
            valueAnimator.start();
            break;

      }
      lastX=cx2;
      lastY=cy2;
      return true;
   }
}

这是完整的代码.主要的点是 运动时坐标的计算.

就拿 

圆2在圆1的右下角 包括正右方,包括正下方
来说吧 图:


开始的位置是从红点而且是顺时针 通过PathMeasure getPosTan的方法可以得到某一个长度的坐标和正切.

长度如何求呢.... 既然我们已经知道 旋转角度 那就可以 通过PathMeasure getLength方法获取圆1的总长度乘 (degree+offset)/360 就获取到了长度.

如: x3 y3 的坐标就是这样求的

mPathMeasure.getPosTan(mPathMeasure.getLength() * ((offset1 + degrees) / 360), position3,
      null);
但x1 y1 的坐标是分情况的 如果 degree小于offset1 那么这角度是不是在360-offset1~0的范围.大于角度是不是degrees-offset1所以: 

if (degrees <= offset1) {
   mPathMeasure.getPosTan(mPathMeasure.getLength() * ((360 - (offset1 - degrees)) / 360),
         position1,
         null);
} else {
   mPathMeasure.getPosTan(mPathMeasure.getLength() * ((degrees - offset1) / 360),
         position1,
         null);
}
 那么圆2计算也是一样的 在计算之前要调用 nextContour()跳到圆2的图形区域. 

mPathMeasure.getPosTan(mPathMeasure.getLength() * ((180 + offset2 + degrees) / 360),
      position2,
      null);
mPathMeasure.getPosTan(mPathMeasure.getLength() * ((180 + degrees-offset2 ) / 360),
      position4,
      null);
 其他的位置状态计算,稍微的画一下,分析就简单了.效果如图

参考:http://blog.csdn.net/z82367825/article/details/51599245 核心代码改写的

ps:通过pathmeasure计算某一个点坐标很简单.

qq_21727627
关注
专栏目录
Path，PathMeasure与贝塞尔曲线
飞鸟
10-10 1088
常用方法         moveTo()：设置本次path的起点。         lineTo()：通过下线连接上个点与指定点。如果没有通过moveTo指定起始点，那么起始点就是(0,0)。         arcTo()：为当前的path添加弧线。弧线的起点通过直接连接到path的上一个点，弧线的终点连接到path的下一个点。如下：
红橙Darren视频笔记 贝塞尔曲线实现消息拖拽粘性效果 画笔练习
积跬步 至千里
01-10 248
效果图 要实现这样的效果 我们要先知道那段弧线是如何绘制的,实际上那段弧线就是贝塞尔曲线 一. 什么是贝塞尔曲线 https://www.jianshu.com/p/8f82db9556d2 上面有个链接 里面的动图比较形象 二阶Bezier曲线公式： P0A/P1A=P1B/P2B=AC/BC 在维持以上比例的同时，A点从P0出发到达P1点 点C所经过的路径就是Bezier曲线 其中P1叫做控制点，控制点不同，绘制的路径也会大有不同 当控制点有0个时，点C的路径叫1阶Bezier曲线 当控制点有1个时
贝塞尔曲线、Path、PathMeasure理解在Android中
dreams_deng的博客
03-15 429
1. 贝塞尔曲线在数学上的理解 3 点确定一断曲线，对于二阶贝塞尔曲线 在t 时间内, 从p0 到 q 从q 到 p1 上的点的连线，对应的切线，就是 贝塞尔曲线的轨迹 效果图： 上面是我对贝塞尔曲线立即在数学中，可能理解是错误的，Android开发中不用去管什么公式， 用api就行了 2. Adroid贝塞尔曲线绘制 2.1. 二阶绘制 2.2...
【Android UI】Path 测量 PathMeasure ④ ( 使用 PathMeasure 绘制沿曲线运动的图像并且其朝向始终向前 | 根据切点计算曲线运动的朝向 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
06-07 821
一、根据切点计算曲线运动的朝向、 1、getPosTan 函数 ★、 2、根据切点计算曲线运动的朝向、 二、代码示例、 三、运行效果、
对PathMeasure中getPosTan的理解
chuyouyinghe的专栏
03-04 647
考虑这样的场景:要实现物体沿直接或曲线运动的效果.这就要算出某个时刻t,物体的坐标.getPosTan就是用来求坐标的.看下面的代码: float step = 0.0001f; Path path = new Path(); path.moveTo(100, 600); path.cubicTo(400, 200, 700, 300, 800, 700); PathMeasure measure = new PathMeasure(path, false); float len = measure.g
资源包括：贝塞尔曲线，PathMeasure，属性动画，Scroller和VeloccityTracker , 绘制流程，裁剪
04-04
1：贝塞尔曲线原理和实例（如贝塞尔曲线画圆，圆变心，粘性小红点） 2：PathNeasure原理和实例（旋转的小箭头） 3：属性动画原理和实例（雷达图，指示器，插值器。购物车。） 4：Scroller和VeloccityTracker 5：...
Android贝塞尔曲线实现粘性动画
09-09
在二阶贝塞尔曲线中，有三个控制点：起点P0、终点P2和一个控制点P1，曲线会经过起点和终点，但不一定经过控制点。通过调整这些控制点的位置，可以灵活地改变曲线的形状。 **在Android中实现贝塞尔曲线** 在Android...
基于QT实现贝塞尔曲线画炫酷的波浪动画+源码
最新发布
05-10
该项目实现了通过贝塞尔曲线画波浪动画，可控制 颜色+密度+速度+加速度 安装与运行环境 语言：C++ 框架：Qt 11.3 平台：Windows 将屏幕水平平均分为10块，在一定范围内随机高度的12个点（左右出头），通过贝塞尔...
EXCELVBA贝塞尔曲线及插值_贝塞尔平滑_EXCELVBA贝塞尔曲线及插值_excelvba插值_
10-03
在Excel VBA编程中，贝塞尔曲线是一种常用于数据可视化和图形设计的技术，它通过一组控制点来定义平滑曲线。这种曲线在工程、艺术、游戏开发等领域都有广泛应用。本主题将深入探讨如何在Excel VBA中实现贝塞尔曲线...
VC++三次样条插值和贝塞尔曲线实例程序.zip_VC++ 三次样条_vc 贝塞尔曲线_三次样条曲线_曲线插值_贝塞尔曲线
09-23
本篇文章将深入探讨两个关键概念：三次样条插值和贝塞尔曲线，以及它们在VC++环境中的实现。我们将通过分析标题和描述提供的信息，结合标签中的关键词，来详细阐述这两个概念及其在实际编程中的应用。 首先，我们来...
PathMeasure
forward
06-24 1379
PathMeasurePathMeasure是一个用来测量Path的类，主要有以下方法:构造方法 方法名 释义 PathMeasure() 创建一个空的PathMeasure PathMeasure(Path path, boolean forceClosed) 创建 PathMeasure 并关联一个指定的Path(Path需要已经创建完成) 公共方法 返回值 方法名
android之自定view之(八)----PathMeasure
hfreeman2008的专栏
05-14 249
PathMeasure Android Demo 参考资料 1.Android 自定义View学习(十六)——PathMeasure学习 https://www.jianshu.com/p/ac1250bccd3b/ 2.安卓自定义View进阶-PathMeasure https://www.gcssloop.com/customview/Path_PathMeasure 3.PathMeasur...
android高级UI之PathMeasure＜一＞--Path测量基础（nextContour、getPosTan、getMatrix、getSegment）
webor2006的博客
11-04 2509
前言： 在上一次android高级UI之贝塞尔曲线<下>--贝塞尔曲线运用：QQ消息气泡完成了对于贝塞尔曲线绘制的学习，今天准备学习UI绘制中经常会用到的跟Path相关的一些知识，也是很重要，但是你不去专门花时间去研究的话其实理解起来也并不轻松，关于掌握了这个技能之后最终你能做出啥UI效果呢？其实很多，这里先提前把要操练的一个效果贴出来，先来感受一下： 其中圆是使用Paint绘制出来的，而那个箭头是一张静态图片，如果在你没有了解PathMeasure它的使用之前，碰到这样的效果是不是有点
小动画之支付 (PathMeasure)
是非的Android学习之路
08-12 291
利用 PathMeasure 实现路径动画
Android贝塞尔曲线实现粘性 小圆点指示器
The Sunshine light my path
06-12 2968
自定义的一个粘性的指示器。 先看看效果。效果赞不赞因人而异，想更酷一些的话，可以花时间实现一下，这里就是想给大家分享一下实现的思路。 1.继承View。获取、计算 一些必要的数据。如：padding，view大小，圆点大小颜色，圆圈大小颜色，动画时间，圆点数量等。 2.获取、保存每个圆圈 的位置坐标。 3..放开选择index公共方法。调用此方法后，根据当前index和将要到达的ind
PathMeasure 重点方法详解（文章有错，待校正）
apigfly的博客
03-14 860
PathMeasure 重点方法详解 前 最近准备系统学习一下Android知识，Path操作时遇到一个比较难理解的类PathMeasure,一番研究（百度一下），记录一下自己的理解。在此特别感谢GcsSloop同学的博文，对于 Android 自定义 view 知识写的很好，收益匪浅。博客地址：GcsSloop.com 知识点 时间有限（懒癌犯了~~），PathMeasur...
PathMeasure ＋ 贝塞尔曲线实现过山车效果
forward
06-24 2987
先看效果图： 思路： 1.首先绘制红色的贝塞尔曲线 2.然后用PathMeasure，测量曲线某一点A的长度、倾斜度、坐标 3.根据坐标倾斜度，绘制图片 4.根据PathMeasure获得，起始点O到A点的路径，绘制走过的路径代码：package com.test.paintdemo.pathrelate;import android.animation.ValueAnimator; im
Android 进阶——高级UI必知必会之Path和贝塞尔曲线（五）
最美不过，心中有梦，身旁有你！
12-06 2583
文章大纲引言 引言 相关文章链接如下： Android进阶——自定义View必知必会之Android坐标系与Paint的基础应用（一） Android进阶——自定义View必知必会之Android坐标系与Paint的高级应用（二） Android进阶——自定义View必知必会之Android坐标系与Canvas小结（三） ...
安卓自定义View进阶-Path之玩出花样(PathMeasure)
热门推荐
GcsSloop
06-02 2万+
本文中虽然后面的内容看起来比较高大上一点，但前面"啰嗦"的废话才是真正的干货，把前面的东西学会了，后面的各种效果都能信手拈来，如果只研究后面的东西，则是取其形，而难以会其意。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值