自定义view实战(10)：贝塞尔曲线绘制小红点

前言

上一篇文章用扇形图练习了一下安卓的多点触控，实现了单指旋转、二指放大、三指移动，四指以上同时按下进行复位的功能。今天这篇文章用很多应用常见的小红点，来练习一下贝塞尔曲线的使用。

需求

这里想法来自QQ的拖动小红点取消显示聊天条数功能，不过好像是记忆里的了，现在看了下好像效果变了。总而言之，就是一个小圆点，拖动的时候变成水滴状，超过一定范围后触发消失回调，核心思想如下：

1、一个正方形view，中间是小红点，小红点距离边框有一定距离
2、拖动小红点，小红点会变形，并产生尾焰效果
3、释放时，如果在设定范围外小红点消失，范围内则恢复

效果图

这里效果在距离小的时候，还是不错的，当移动范围过大时，虽然水滴状的曲线还是连续的，但是变形严重了，不过这个功能并不需要拖动太长距离把，只要限定好消失范围，还是能满足要求的。

代码

import android.animation.ValueAnimator
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import androidx.core.animation.addListener
import kotlin.math.asin
import kotlin.math.atan2
import kotlin.math.cos
import kotlin.math.sin/*** 拖拽消失的小红点** @author silence* @date 2022-11-07**/
class RedDomView @JvmOverloads constructor(context: Context,attributeSet: AttributeSet? = null,defStyleAttr: Int = 0
): View(context, attributeSet, defStyleAttr) {companion object{const val STATE_NORMAL = 0const val STATE_DRAGGING = 1const val STATE_SETTING = 2const val STATE_FINISHED = 3}// 状态private var mState = STATE_NORMAL/*** 红点半径占控件宽高的比例*/var domPercent = 0.25f/*** 红点消失的长度占最短宽高的比例*/var disappearPercent = 0.25f/*** 消失回调*/var listener: OnDisappearListener? = null// 半径private var mDomRadius: Float = 0f// 消失长度private var mDisappearLength = 0f// 滑动距离和移动距离的缩放比例private val mDraggingScale = 0.5f// 圆心所在位置private var mRadiusX = 0fprivate var mRadiusY = 0f// 上一次touch的点private var mLastX = 0fprivate var mLastY = 0f// 绘制拖拽时的路径private val path = Path()// 恢复的属性动画private val animator = ValueAnimator.ofFloat(0f, 1f)// 画笔private val mPaint = Paint().apply {strokeWidth = 5fcolor = Color.REDstyle = Paint.Style.FILLflags = Paint.ANTI_ALIAS_FLAG}/*** 重置*/fun reset() {mState = STATE_NORMALmRadiusX = width / 2fmRadiusY = height / 2finvalidate()}override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {super.onMeasure(widthMeasureSpec, heightMeasureSpec)val width = getDefaultSize(100, widthMeasureSpec)val height = getDefaultSize(100, heightMeasureSpec)// 计算得到半径mDomRadius = (if (width < height) width else height) * domPercentmRadiusX = width / 2fmRadiusY = height / 2f// 消失长度mDisappearLength = (if (width < height) width else height) * disappearPercentsetMeasuredDimension(width, height)}override fun onTouchEvent(event: MotionEvent): Boolean {// 结束了不应该接受事件，通过设置OnClickListener使用reset去重置if (mState == STATE_FINISHED) {if (event.action == MotionEvent.ACTION_DOWN) performClick()else return true}when(event.action) {MotionEvent.ACTION_DOWN -> {mLastX = event.xmLastY = event.y// 设置中或者拖拽时，快速重新按下，应该再次接手动画if(mState != STATE_NORMAL) {animator.removeAllListeners()animator.cancel()}mState = STATE_DRAGGING}MotionEvent.ACTION_MOVE -> {// 注意canvas移动和手指移动是一致的，view的scroll移动的是窗口val dx = event.x - mLastXval dy = event.y - mLastY// 移动圆心mRadiusX += dx * mDraggingScalemRadiusY += dy * mDraggingScalemLastX = event.xmLastY = event.y// 请求重绘invalidate()}MotionEvent.ACTION_UP -> {mState = STATE_SETTING// 这里用属性动画模拟拖拽，回到初始圆心val upRadiusX = mRadiusXval upRadiusY = mRadiusYanimator.addUpdateListener {// 根据比例，按直线移动圆心到中点val progress = it.animatedValue as FloatmRadiusX = upRadiusX + (width / 2f - upRadiusX) * progressmRadiusY = upRadiusY + (height / 2f - upRadiusY) * progressinvalidate()}animator.addListener(onEnd = {mState = STATE_NORMAL})animator.duration = 100animator.start()}}return true}@Suppress("RedundantOverride")override fun performClick(): Boolean {return super.performClick()}override fun onDraw(canvas: Canvas) {super.onDraw(canvas)when(mState) {STATE_NORMAL -> {// 正常状态是一个圆canvas.drawCircle(width / 2f, height / 2f, mDomRadius, mPaint)}STATE_DRAGGING, STATE_SETTING -> {// 圆心和中点连线相对于X轴的夹角，注意atan2是四象限敏感[-PI, PI]，atan范围为[-PI/2, PI/2]val radiansLine = atan2((mRadiusY - height / 2f).toDouble(),(mRadiusX - width /2f).toDouble()).toFloat()// 圆心和中点连线的长度，通过角度算，分母为零为什么没问题？val lineLength = (mRadiusX - width /2f) / cos(radiansLine)// 判断是否达到消失要求，如果消失不应该再绘制if (lineLength > mDisappearLength) {mState = STATE_FINISHEDlistener?.onDisappear()return}// 以圆心为顶点，切点、圆心、中心的夹角值，是一个正值val radiansCenter = asin(mDomRadius / lineLength)// 切点和中心连线长度val length = lineLength * cos(radiansCenter)// 由角度获取两个切点的坐标值val x1 = width /2f + length * cos(radiansLine + radiansCenter)val y1 = height / 2f + length * sin(radiansLine + radiansCenter)val x2 = width /2f + length * cos(radiansLine - radiansCenter)val y2 = height / 2f + length * sin(radiansLine - radiansCenter)// 绘制// 普通代码，一个圆加三角形
//                canvas.drawCircle(mRadiusX, mRadiusY, mDomRadius, mPaint)
//                path.reset()
//                path.moveTo(x1, y1)
//                path.lineTo(width / 2f, height / 2f)
//                path.lineTo(x2, y2)
//                path.close()// 强行贝塞尔曲线// 先用完整的圆覆盖lineLength < 2 * mDomRadius的情况，大于时圆会被覆盖canvas.drawCircle(mRadiusX, mRadiusY, mDomRadius, mPaint)path.reset()path.moveTo(x1, y1)// 拟合圆弧，三阶贝塞尔曲线，控制点在圆心和中点连线的圆外var tempX1 = x1 + (length * cos(radiansLine + radiansCenter))var tempY1 = y1 + ( length * sin(radiansLine + radiansCenter))var tempX2 = x2 + (length * cos(radiansLine - radiansCenter))var tempY2 = y2 + ( length * sin(radiansLine - radiansCenter))// 接近圆不是圆path.cubicTo(tempX1, tempY1, tempX2, tempY2, x2, y2)// 尾焰，第一个控制点在切线延长线上，第二个控制点在圆心连线上(越短尾越尖)tempX1 = x2 - length * cos(radiansLine - radiansCenter)tempY1 = y2 - length * sin(radiansLine - radiansCenter)tempX2 = width / 2f + (lineLength * 0.25f * cos(radiansLine))tempY2 = height / 2f + (lineLength * 0.25f * sin(radiansLine))// 第一条path.cubicTo(tempX1, tempY1, tempX2, tempY2, width / 2f, height / 2f)// 另一段tempX1 = tempX2tempY1 = tempY2tempX2 = x1 - (length * cos(radiansLine + radiansCenter))tempY2 = y1 - ( length * sin(radiansLine + radiansCenter))path.cubicTo(tempX1, tempY1, tempX2, tempY2, x1, y1)path.close()canvas.drawPath(path, mPaint)}STATE_FINISHED -> {}}// 这里便于调试，把消失范围画一下，多加一只画笔，省的麻烦canvas.drawCircle(width / 2f, height / 2f, mDisappearLength, tempPaint)}private val tempPaint = Paint().apply {strokeWidth = 3fstyle = Paint.Style.STROKEcolor = Color.LTGRAYpathEffect = DashPathEffect(floatArrayOf(10f, 10f), 0f)flags = Paint.ANTI_ALIAS_FLAG}interface OnDisappearListener{fun onDisappear()}
}

主要问题

关于onMeasure、onTouchEvent以及onDraw的内容就不讲了，这里已经是第十篇自定义view的文章了，下面主要介绍下贝塞尔曲线绘制水滴状的功能。

简单画法

这里最简单的画法就是用一个圆和一个三角形解决了。每次移动对小圆点移动，然后计算得到view中心在圆上的两个切点，将两个切点和view中心围起来画一个实心的三角形，组合起来的效果就是一个近似的小水滴了。

使用贝塞尔曲线

要实现更逼真的效果，使用直线是肯定不行的了，这里就要用到曲线了。首先想到的就是弧线了，可是用弧线和上面的圆是没去别的，后面我就直接全用贝塞尔曲线做了。

我这把这个水滴形状的小红点分了三段，都是用三阶的贝塞尔曲线画的，绘制的时候最重要的就是找控制点了。首先要知道贝塞尔曲线的临近控制点和端点的连线，就是曲线在该端点的切线，要保证三段线的连续，保证三段线在同一端点的切线一致就行。这里最上面的那段类似圆弧的曲线，就取了切线延长线上的点作为控制点，尾焰那段取切线内上的点，这样在(x1, y1)(x2, y2)上就连续了，至于控制点距离端点距离取值的大小就试着取看效果了。剩下在view中点那侧的控制点，就取在中点和圆心上，这样水滴的尾巴看起来就顺眼。

几个控制点的选取和展现的效果相关性很大，我觉得我选的点看起来还行。