从阅读仿真页看贝塞尔曲线

Posted 2022-12-19 bug樱樱

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从阅读仿真页看贝塞尔曲线相关的知识，希望对你有一定的参考价值。

前言

一直觉得阅读器里面的仿真页很有意思，最近在看阅读器相关代码的时候发现仿真页是基于贝塞尔曲线去实现的，所以就有了此篇文章。

仿真页一般有两种实现方式：

将内容绘制在Bitmap上，基于Canvas去处理仿真页
OpenGl es

本篇文章我会向大家介绍如何使用Canvas绘制贝塞尔曲线，以及详细的像大家介绍仿真页的实现思路。

后续有机会的话，希望可以再向大家介绍方案二（OpenGL es 学习中…）。

一、贝塞尔曲线介绍

贝塞尔曲线是应用于二维图形应用程序的数学曲线，最初是用在汽车设计的。我们在绘图工具上也常常见到曲线，比如钢笔工具。

为了绘制出更加平滑的曲线，在 android 中我们也可以使用 Path 去绘制贝塞尔曲线，比如这类曲线图或者描述声波的图。

我们先简单的了解一下基础知识，可以在这个网站先体验一把如何控制贝塞尔曲线：

www.jasondavies.com/animated-be…

一阶到四阶都有。

1. 一阶贝塞尔曲线

给定点 P0 和 P1，一阶贝塞尔曲线是两点之间的直线，这条线的公式如下：

2. 二阶贝塞尔曲线

从二阶开始，就变得复杂起来，对于给定的 P0、P1 和 P2，都对应的曲线：

二阶的公式是如何得出来的？我们可以假设 P0 到 P1 点是 P3，P1 - P2 的点是P4，二阶贝塞尔也只是 P3 - P4 之间的动态点，则有：

P3 = (1-t) P0 + tP1

P4 = (1-t) P1 + tP2

二阶贝塞尔曲线 B(t) = (1-t)P3 + tP4 = (1-t)((1-t)P0 + tP1) + t((1-t)P1 + tP2) = (1-t)(1-t)P0 + 2t(1-t)P1 + ttP2

与最终的公式对应。

3. 三阶贝塞尔曲线

三阶贝塞尔曲线由四个点控制，对于给定的 P0、P1、P2 和 P3，有对应的曲线：

同样的，三阶贝塞尔可以由二阶贝塞尔得出，从上面的知识我们可以得处，下图中的点 R0 和 R1 的路径其实是二阶的贝塞尔曲线。

对于给定的点 B，有如下的公式，将二阶贝塞尔曲线带入：

R0 = (1-t)(1-t)P0 + 2t(1-t)P1 + ttP2

R1 = (1-t)(1-t)P1 + 2t(1-t)P2 + ttP3

B(t) = (1-t)R0 + tR1 = (1-t)((1-t)(1-t)P0 + 2t(1-t)P1 + ttP2) + t((1-t)(1-t)P1 + 2t(1-t)P2 + ttP3)

最终的结果就是三阶贝塞尔曲线的最终公式。

4. 多阶贝塞尔曲线

多阶贝塞尔曲线我们就不细讲了，可以知道的是，每一阶都可以由它的上一阶贝塞尔曲线推导而出。就像我们之前由一阶推导二阶，由二阶推导出三阶。

二、Android对应的API

Android提供了 Path 供我们去绘制贝塞尔曲线。一阶贝塞尔是一条直线，所以不用处理了。

看一下 Path 对应的 API：

Path#quadTo(float x1, float y1, float x2, float y2)：二阶
Path#cubicTo(float x1, float y1, float x2, float y2,float x3, float y3)：三阶

对于一段贝塞尔曲线来说，由三部分组成：

一个开始点
一到多个控制点
一个结束点

使用的方法也很简单，先挪到开始点，然后将控制点和结束点统统加进来：

class BezierView @JvmOverloads constructor(
    context: Context,
    attributeSet: AttributeSet? = null,
    defStyle: Int = 0
) : View(context, attributeSet, defStyle) 

    private val path = Path()
    private val paint = Paint()

    override fun onDraw(canvas: Canvas?) 
        super.onDraw(canvas)

        paint.style = Paint.Style.STROKE
        paint.strokeWidth = 3f

        path.moveTo(0f, 200f)
        path.quadTo(200f, 0f, 400f, 200f)
        paint.color = Color.BLUE
        canvas?.drawPath(path, paint)

        path.rewind()
        path.moveTo(0f, 600f)
        path.cubicTo(100f, 400f, 200f, 800f, 300f, 600f)
        paint.color = Color.RED
        canvas?.drawPath(path, paint);

最后的结果：

上面是二阶贝塞尔，下面是三阶贝塞尔，可以发现，控制点越多，就能设计出越复杂的曲线。如果想使用二阶贝塞尔实现三阶的效果，就得使用两个二阶贝塞尔曲线。

三、简单案例

既然刚刚画了两个曲线，我们可以利用这个方式简单模拟一个动态声波的曲线。

这个动画只需要在刚刚的代码的基础上稍微改动一点：

class BezierView @JvmOverloads constructor(
    context: Context,
    attributeSet: AttributeSet? = null,
    defStyle: Int = 0
) : View(context, attributeSet, defStyle) 

    private val path = Path()
    private val paint = Paint()

    private var width = 0f
    private var height = 0f
    private var quadY = 0f
    private var cubicY = 0f

    private var per = 1.0f
    private var quadHeight = 100f
    private var cubicHeight = 200f

    private var bezierAnim: ValueAnimator? = null

    init 
        paint.style = Paint.Style.STROKE
        paint.strokeWidth = 3f
        paint.isDither = true
        paint.isAntiAlias = true
    

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) 
        super.onSizeChanged(w, h, oldw, oldh)

        width = w.toFloat()
        height = h.toFloat()

        quadY = height / 4
        cubicY = height - height / 4
    


    fun startBezierAnim() 
        bezierAnim?.cancel()
        bezierAnim = ValueAnimator.ofFloat(1.0f, 0f, 1.0f).apply 
            addUpdateListener 
                val value = it.animatedValue as Float
                per = value
                invalidate()
            
            addListener(object :AnimatorListener
                override fun onAnimationStart(animation: Animator?) 

                

                override fun onAnimationEnd(animation: Animator?) 

                

                override fun onAnimationCancel(animation: Animator?) 

                

                override fun onAnimationRepeat(animation: Animator?) 
                    val random = Random(System.currentTimeMillis())
                    val one = random.nextInt(400).toFloat()
                    val two = random.nextInt(800).toFloat()

                    quadHeight = one
                    cubicHeight = two
                

            )
            duration = 300
            repeatCount = -1
            start()
        
    


    override fun onDraw(canvas: Canvas?) 
        super.onDraw(canvas)

        var quadStart = 0f
        path.reset()
        path.moveTo(quadStart, quadY)
        while (quadStart <= width)
            path.quadTo(quadStart + 75f, quadY - quadHeight * per, quadStart + 150f, quadY)
            path.quadTo(quadStart + 225f, quadY + quadHeight * per, quadStart + 300f, quadY)
            quadStart += 300f
        
        paint.color = Color.BLUE
        canvas?.drawPath(path, paint)

        path.reset()
        var cubicStart = 0f
        path.moveTo(cubicStart, cubicY)
        while (cubicStart <= width)
            path.cubicTo(cubicStart + 100f, cubicY - cubicHeight * per, cubicStart + 200f, cubicY + cubicHeight * per, cubicStart + 300f, cubicY)
            cubicStart += 300f
        
        paint.color = Color.RED
        canvas?.drawPath(path, paint);

上面基于二阶贝塞尔曲线，下面基于三阶贝塞尔曲线，加了一层属性动画。