自定义View合辑（7）-带文本的球形波浪（贝塞尔曲线）

为了增强对自定义 View 的认知以及开发能力，我计划这段时间陆续来完成几个难度从易到难的自定义 View，并简单的写几篇博客来进行介绍，全部的代码也都会开源，也但愿读者能给个 star 哈 GitHub 地址：github.com/leavesC/Cus… 也能够下载 Apk 来体验下：www.pgyer.com/CustomView

先看下效果图：

WaveLoadingView 和上一节的 WaveView 相似，但比之多了一个颜色随波浪起伏而变化的文本，且形状也变为了圆形。此处波浪的绘制思路与上一节同样，重点就在于文本的绘制顺序以及画布的裁切

绘制流程分为如下几步：

• 绘制颜色为 A 的文本
• 按照上一节 WaveView 的步骤，绘制具有波浪轨迹的 wavePath
• 绘制形状为圆形的 circlePath
• 将 wavePath 和 circlePath 的相交轨迹赋予 circlePath（经过 op 函数实现，此时就已经获得圆形的波浪轨迹了）
• 将 circlePath 实际绘制到 Canvas 上
• 对 Canvas 依据轨迹 circlePath 进行裁切
• 绘制颜色为 B 的文本

private Path circlePath = new Path();

    private Path wavePath = new Path();

    @Override
    protected void onDraw(Canvas canvas) {
        textPaint.setColor(waveColor);
        drawText(canvas, textPaint, String.valueOf(text));

        wavePath.reset();
        wavePath.moveTo(-waveWidth + animatedValue, size / 2.2f);
        for (float i = -waveWidth; i < size + waveWidth; i += waveWidth) {
            wavePath.rQuadTo(waveWidth / 4, -waveHeight, waveWidth / 2, 0);
            wavePath.rQuadTo(waveWidth / 4, waveHeight, waveWidth / 2, 0);
        }
        wavePath.lineTo(size, size);
        wavePath.lineTo(0, size);
        wavePath.close();

        circlePath.reset();
        circlePath.addCircle(centerX, centerY, radius - 1, Path.Direction.CCW);
        circlePath.op(wavePath, Path.Op.INTERSECT);

        canvas.drawPath(circlePath, wavePaint);
        canvas.clipPath(circlePath);

        textPaint.setColor(downTextColor);
        drawText(canvas, textPaint, String.valueOf(text));
    }

    private void drawText(Canvas canvas, Paint textPaint, String text) {
        Rect rect = new Rect(0, 0, size, size);
        textPaint.setTextAlign(Paint.Align.CENTER);
        Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
        float top = fontMetrics.top;
        float bottom = fontMetrics.bottom;
        int centerY = (int) (rect.centerY() - top / 2 - bottom / 2);
        canvas.drawText(text, rect.centerX(), centerY, textPaint);
    }
复制代码