贝塞尔曲线、Path、PathMeasure理解在Android中

最新推荐文章于 2021-05-29 23:33:49 发布
最新推荐文章于 2021-05-29 23:33:49 发布
阅读量439 收藏 1
点赞数 1
分类专栏： Android UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dreams_deng/article/details/104882679
版权

 1. 贝塞尔曲线在数学上的理解
   3 点确定一断曲线，对于二阶贝塞尔曲线
   在t 时间内,
   从p0 到  q
   从q  到 p1 上的点的连线，对应的切线，就是
   贝塞尔曲线的轨迹
   效果图：

上面是我对贝塞尔曲线立即在数学中，可能理解是错误的，Android开发中不用去管什么公式， 用api就行了

 2. Adroid贝塞尔曲线绘制
2.1. 二阶绘制
2.2. 三阶绘制

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.denganzhi.cusomerwidget.canvas.PathActivity">

    <com.denganzhi.cusomerwidget.canvas.PathView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.denganzhi.cusomerwidget.canvas.PathView>

</LinearLayout>

Java代码实现：

public class PathView extends View {
    public PathView(Context context) {
        super(context);
    }
 Paint paint=null;
    public PathView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        paint=new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        paint.setStrokeWidth(5);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 6. 贝塞尔曲线api
        Path path6=new Path();
        path6.moveTo(100,400);
        // 二阶贝塞尔曲线1
        path6.quadTo(250,200,400,400);
        // 二阶贝塞尔曲线2, 起点是上一个曲线的结束点
        path6.quadTo(500,500,600,400);

        // 三阶贝塞尔曲线,4个点
        Path path7=new Path();
        path7.moveTo(100,400);
        path7.cubicTo(200,100,300,250,400,300);
        canvas.drawPath(path6,paint);
        canvas.drawPath(path7,paint);
  }
}

 

 3. PathMeasure 计算轨迹路径长度：

3.1.  getLength计算轨迹长度

  //    PathMeasure  测量工具类
        // 600  实际长度 path
        PathMeasure pathMeasure1=new PathMeasure(path8,false);
        // 800 绘制图形 闭合以后的长度
      //  PathMeasure pathMeasure2=new PathMeasure(path8,true);
     //   Log.e("denganzhi","length1:"+pathMeasure1.getLength());
        float length1= pathMeasure1.getLength();
        // path  可以绘制多条路径，
        boolean nextCouner=  pathMeasure1.nextContour(); //获取下一个路径，可能没有
        // 获取第二条路径长度
        float length2= pathMeasure1.getLength();
        Log.e("denganzhi","第一个条路径长度:"+length1+ "nextCounter "+ nextCouner+  "第二条路径长度:"+length2);
      // 第一个条路径长度:600.0nextCounter true第二条路径长度:160.0
        paint.setColor(Color.BLACK);
        canvas.drawPath(path8,paint);

  输出 ： E/denganzhi: 第一个条路径长度:600.0nextCounter true第二条路径长度:160.0 

3.2.  getSegment截取轨迹，存入新path中

  //    PathMeasure   用于测量path路径长度
        canvas.translate(100,100);
        Path path8=new Path();
        //  默认其实点是0，0
        path8.lineTo(0,200);
        path8.lineTo(200,200);
        path8.lineTo(200,0);
        RectF rect8=new RectF(10,10,50,50);
        // 600  实际长度 path
        PathMeasure pathMeasure1=new PathMeasure(path8,false);
        // 800 绘制图形 闭合以后的长度
        float length1= pathMeasure1.getLength();
        paint.setColor(Color.BLACK);
        canvas.drawPath(path8,paint);

         // 路径截取
        Path dst= new Path();
        paint.setColor(Color.RED);
        //  dst 的起始点 dst.moveTo(x,x);   是否为上一个节点结束点，是否保存连续性
        pathMeasure1.getSegment(0,400,dst,false);
        canvas.drawPath(dst,paint);

 红色部分为截取部分重新绘制

 3.3. getPosTan 获取某一段长度终点的坐标,以及切线(?)

  //    PathMeasure   用于测量path路径长度
        canvas.translate(100,100);
        Path path8=new Path();
        //  默认其实点是0，0
        path8.lineTo(0,200);
        path8.lineTo(200,200);
        path8.lineTo(200,0);
        RectF rect8=new RectF(10,10,50,50);
        path8.addRect(rect8, Path.Direction.CCW);
        paint.setColor(Color.BLACK);
        canvas.drawPath(path8,paint);
   float[] pos=new float[2];
        float[] tan= new float[2];  // tan=y/x
        pathMeasure9.getPosTan(pathMeasure9.getLength()/4,pos,tan);
// postionx: 3.051759E-5 positiony: 50.0 tanx:-1.0 tany: 6.473757E-7
                Log.e("denganzhi","postionx: "+pos[0]+" positiony: "+ pos[1] +" tanx:" +tan[0] + " tany: " + tan[1]);
        canvas.drawPath(path9,paint);

输出： E/denganzhi: postionx: 3.051759E-5 positiony: 50.0 tanx:-1.0 tany: 6.473757E-7 

 综合代码 ：PathView

package com.denganzhi.cusomerwidget.canvas;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Region;
import android.graphics.RegionIterator;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by Administrator on 2020/3/15.
 */

public class PathView extends View {
    public PathView(Context context) {
        super(context);
    }

    Paint paint=null;
    public PathView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        paint=new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        paint.setStrokeWidth(5);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 6. 贝塞尔曲线api
        Path path6=new Path();
        path6.moveTo(100,400);
        // 二阶贝塞尔曲线1
        path6.quadTo(250,200,400,400);
        // 二阶贝塞尔曲线2, 起点是上一个曲线的结束点
        path6.quadTo(500,500,600,400);

        // 三阶贝塞尔曲线,4个点
        Path path7=new Path();
        path7.moveTo(100,400);
        path7.cubicTo(200,100,300,250,400,300);
//        canvas.drawPath(path6,paint);
//        canvas.drawPath(path7,paint);


     //    PathMeasure   用于测量path路径长度
        canvas.translate(100,100);
        Path path8=new Path();
        //  默认其实点是0，0
        path8.lineTo(0,200);
        path8.lineTo(200,200);
        path8.lineTo(200,0);
        RectF rect8=new RectF(10,10,50,50);
        path8.addRect(rect8, Path.Direction.CCW);

        //    PathMeasure  测量工具类
        // 600  实际长度 path
        PathMeasure pathMeasure1=new PathMeasure(path8,false);
        // 800 绘制图形 闭合以后的长度
        //  PathMeasure pathMeasure2=new PathMeasure(path8,true);
        //   Log.e("denganzhi","length1:"+pathMeasure1.getLength());
        float length1= pathMeasure1.getLength();
        // path  可以绘制多条路径，
        //    boolean nextCouner=  pathMeasure1.nextContour(); //获取下一个路径，可能没有
        // 获取第二条路径长度
        //  float length2= pathMeasure1.getLength();
        //  Log.e("denganzhi","第一个条路径长度:"+length1+ "nextCounter "+ nextCouner+  "第二条路径长度:"+length2);
        // 第一个条路径长度:600.0nextCounter true第二条路径长度:160.0
        paint.setColor(Color.BLACK);
        canvas.drawPath(path8,paint);


         // 路径截取
        Path dst= new Path();
        paint.setColor(Color.RED);
        //  dst 的起始点 dst.moveTo(x,x);   是否为上一个节点结束点，是否保存连续性
        pathMeasure1.getSegment(0,400,dst,false);
       // canvas.drawPath(dst,paint);




        // 获取某一段长度的坐标，切线
        Path path9=new Path();
        path9.addCircle(0,0,50,Path.Direction.CW);
        PathMeasure pathMeasure9=new PathMeasure(path9,false);

        float[] pos=new float[2];
        float[] tan= new float[2];  // tan=y/x
        pathMeasure9.getPosTan(pathMeasure9.getLength()/4,pos,tan);
// postionx: 3.051759E-5 positiony: 50.0 tanx:-1.0 tany: 6.473757E-7
                Log.e("denganzhi","postionx: "+pos[0]+" positiony: "+ pos[1] +" tanx:" +tan[0] + " tany: " + tan[1]);
        canvas.drawPath(path9,paint);


    }
}

 

龙德施泰.冯.置
关注
专栏目录
android 抛物线动画
huidawoxiaozi的博客
02-25 2315
抛物线动画：根据抛物线方程式得出x轴，y轴的坐标（x,y）,再根据动画使其移动，就完成一个简单的轨迹动画.实现思路:自定义个view，随着x轴的水平移动根据抛物线方程得到y轴的值，利用path画出一条轨迹；在高出这条抛物线小人的高度再画一天抛物线，这条抛物线就是小人的运动轨迹。直接上代码。。。 自定义View： public class MyAnimationView extends Li
在android中使用Path类的quadTo()方法实现平滑曲线
Kaiwii的专栏
08-13 6333
方法概述 其实，quadTo这个方法同我们平时在photoshop中所使用到的“笔迹”功能一样。说白了，就是将一条线段变成一个曲线。而这条曲线顾名思义是一条抛物线而已。 API概述 public void quadTo (float x1, float y1, float x2, float y2) Since: API Level 1 Add a quadrat
Path，PathMeasure与贝塞尔曲线
飞鸟
10-10 1106
常用方法         moveTo()：设置本次path的起点。         lineTo()：通过下线连接上个点与指定点。如果没有通过moveTo指定起始点，那么起始点就是(0,0)。         arcTo()：为当前的path添加弧线。弧线的起点通过直接连接到path的上一个点，弧线的终点连接到path的下一个点。如下：
使用贝塞尔曲线和Pathmeasure画粘连体
闪电人
08-28 329
public class StickinessView1 extends View { Paint paint; Path path; private PathMeasure mPathMeasure; ValueAnimator valueAnimator; boolean isAnimation; PointF ponitF; float offset
Android开发中的贝塞尔曲线与PathMeasure应用解析
本文主要介绍了在Android开发中如何理解和应用贝塞尔曲线，包括其数学原理、绘制方法以及Path和PathMeasure的使用。 贝塞尔曲线在数学上的理解： 贝塞尔曲线是一种在图形设计和计算机图形学中广泛使用的参数曲线。...
Android贝塞尔曲线
09-12
在Android中，贝塞尔曲线通常通过`Path`类和`Canvas`进行绘制。首先，开发者需要创建一个`Path`对象，然后通过`quadTo()`（用于二阶贝塞尔曲线）或`cubicTo()`（用于三阶贝塞尔曲线）方法指定曲线的控制点和端点。...
Android把商品添加到购物车的动画效果（贝塞尔曲线）
01-20
在Android中，我们可以使用`Path`类来创建和操作贝塞尔曲线。首先，我们将定义起始点和结束点，然后使用`quadTo()`方法来定义二次贝塞尔曲线。`quadTo()`方法接受两个参数，这两个参数是相对于当前路径点的控制点...
Android利用二阶贝塞尔曲线实现添加购物车动画详解
08-27
首先，我们需要理解贝塞尔曲线的概念及其在动画中的应用。 **一、贝塞尔曲线基础** 贝塞尔曲线是一种在计算机图形学中广泛使用的参数曲线，它通过控制点来决定曲线的形状。在二阶贝塞尔曲线中，我们有起点P0、终点...
高级UI-Path和PathMeasure
weixin_30562507的博客
04-06 278
Path是一个工具类，用来记录线条的轨迹路径，然后通过绘制轨迹路径，可以得到各种各样的图案，而PathMeasure是用来对Path进行测量的工具，再Path的运用中，运用最多的就是贝塞尔曲线，也是本文的重点 贝塞尔曲线 贝塞尔曲线就是这样的一条曲线，它是依据四个位置任意的点坐标绘制出的一条光滑曲线 线性公式 给定点P0、P1，线性贝兹曲线只是一条两...
android path的长度,浅谈Android PathMeasure详解和应用
weixin_39580950的博客
05-29 950
PathMeasure，顾名思义，就是一个用来测量Path的类，主要有以下方法:构造方法无参构造方法：PathMeasure()创建一个空的PathMeasure，用这个构造函数可创建一个空的 PathMeasure，但是使用之前需要先调用 setPath 方法来与 Path 进行关联。被关联的 Path 必须是已经创建好的，如果关联之后 Path 内容进行了更改，则需要使用 setPath 方法...
回弹阻尼&贝塞尔曲线，Path/PathMeasure进阶 - Android
ShareUs的专栏
08-01 1288
&gt; 阻尼：事件滑动+Animation A ScrollView with over scroll capabilities- https://github.com/EverythingMe/OverScrollView Android回弹阻尼效果- https://github.com/ausboyue/ReboundEffects android 带阻尼的周期运动- https://bl...
Android自定义view --Path 的高级用法之-搜索按钮动画
王项雨 的博客
06-07 4915
关于Path之前写的也很多了，例如path绘制线，path绘制一阶，二阶和三阶贝塞尔路径，这些都是path的基本用法。今天我要带大家看的是Path 的高级用法，先上图，再吹。 效果大致是这样的。看着是不是挺好。话不多说，切入正题： 既然今天要谈Path的高级用法，那就先来讲一讲（Path -- 中文 ）就是“路径”既然是路径，从我们面向对象的想法的话，我们就容易想到 路径 的长度，路径的某...
Android动画效果(一) 任意两点间的抛物线动画
qq_18612815的博客
05-09 5620
先上图： 这里要实现的是，点击上面的按钮后，将TextView随机移动到底部按钮的位置 首先，将底部按钮放入list中，方便后面随机取值 list = new ArrayList(); list.add(btn1); list.add(btn2); list.add(btn3); list.add(btn4); 然后就是点击按钮后的抛物线动画了
android Path 和 PathMeasure 进阶
热门推荐
文涛的专栏
05-17 1万+
1 概述在前面的路径和文字中，讲解了path的基本用法，这里讲解一些上篇没有讲到的东西。2 Path 这里讲解path相关的方法，后面继续讲解PathMeasure，以及实例(1) offsetpublic void offset(float dx, float dy) public void offset(float dx, float dy, Path dst) 这里两个方法都是指定offset
Path绘制动态的贝塞尔曲线、PathMeasure来绘制path动画
minwenping的博客
07-05 677
上一篇的波浪曲线是左右重复平移，这次是每一帧绘制一条线，组成上下浮动的曲线，下面是效果图 public WaveView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); paint = new Paint(Paint.ANTI_ALIAS_FLAG);
android 动画之---位移抛物线
MINGZHNGLEI的专栏
01-11 4711
今天给大家说说android里面的动画，如何实现抛物线移动  欢迎大家进群：574605026   开启我们的开发之旅 首先简单给大家科普下android之中的四种动画 1、AlphaAnimation 透明度动画  2、ScaleAnimation 缩放动画  3、TranslateAnimation 位移动画  4、RotateAnimation 旋转动画
android抛物线动画实现
托米每天美滋滋
12-19 7075
最近面试，面试官说了一个场景，大概类似于类似于两个点比如AB吧，从A到B这个运动轨迹要以抛物线的形式运动，说下实现的思路，因为我做过新手引导，通过获取到两个点的绝对坐标，这样通过动画来说，面试官说了，动画的话是一条直线，我当时立刻想到了贝塞尔曲线，我说用贝塞尔曲线来实现，他不说话了，貌似这个面试官是Java的，对安卓不是很了解，我觉得我面试的基本都回答的很不错，竟然后续也没通知了，额，心累啊，最近
Android 进阶——高级UI必知必会之Path和贝塞尔曲线（五）
最美不过，心中有梦，身旁有你！
12-06 2608
文章大纲引言 引言 相关文章链接如下： Android进阶——自定义View必知必会之Android坐标系与Paint的基础应用（一） Android进阶——自定义View必知必会之Android坐标系与Paint的高级应用（二） Android进阶——自定义View必知必会之Android坐标系与Canvas小结（三） ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值