Android 实现文字按照路径曲线显示

##效果图：

103127256831351815.png

##基础知识：
在Android中的绘图应该继承View组件，并重写它的onDraw(Canvas canvas)方法，Canvas代表了“依附”于指定View的画布，它提供了如下方法绘制各种图形（Canvas提供了一个drawTextOnPath(String text,Path path,float hOffset,float vOffset,Paint paint)方法，该方法可以沿着Path路径绘制文本，其中text指文本内容，hOffset参数指定水平偏移、vOffset指定垂直偏移）：

20130628234754046.png
Canvas提供的绘制方法中用到了一个API：Paint，Paint 代表了Canvas上的画笔，主要用于绘制风格，包括画笔颜色、画笔笔触粗细、填充风格等。它提供了如下方法：

20130628235246203.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
package com.example.h.drawtextonpathproject;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
 * 作者：huangchen on 2016/6/24 10:17
 */
public class CustomPathView extends View {
    private final String DEFAULT_TEXT = "让 购 物 便 捷";
    private Paint paint;
    private Path[] paths = new Path[3];
    public CustomPathView(Context context) {
        super(context);
        initView();
    }
    public CustomPathView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    public CustomPathView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }
    private void initView() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.RED);
        paint.setStrokeWidth(4);
        paths[0] = new Path();
        paths[0].moveTo(0, 0);
        for (int i = 0; i < DEFAULT_TEXT.length(); i++) {
            //生成6个点，随机生成Y坐标，并且连在一起
            paths[0].lineTo(i * 30, (float) (Math.random() * 30));
        }
        paths[1] = new Path();
        RectF oval = new RectF(0, 0, 400, 200);
        paths[1].addOval(oval, Path.Direction.CCW);//椭圆路径
        paths[2] = new Path();
        paths[2].addArc(oval, 60, 180);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //背景白色
        canvas.drawColor(Color.WHITE);
        canvas.translate(240, 80);
        //右边开始绘制，对齐
        paint.setTextAlign(Paint.Align.RIGHT);
        paint.setTextSize(40);
      /*  //绘制路径
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(paths[0], paint);*/
        //绘制文字
        paint.setStyle(Paint.Style.FILL);
        canvas.drawTextOnPath(DEFAULT_TEXT, paths[0], -8, 10, paint);
        //下移
        canvas.translate(0, 150);
        //绘制路径
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(paths[1], paint);
        //绘制文字
        paint.setStyle(Paint.Style.FILL);
        canvas.drawTextOnPath(DEFAULT_TEXT, paths[1], -20, -20, paint);
        //下移
        canvas.translate(0, 300);
        //绘制路径
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(paths[2], paint);
        //绘制文字
        paint.setStyle(Paint.Style.FILL);
        canvas.drawTextOnPath(DEFAULT_TEXT, paths[2], -10, -20, paint);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }
}

##结语：
本文主要讲了自定义view的简单使用，主要使用了canvas.drawTextOnPath方法来对文字围绕一定的轨迹显示，虽然只是简单的实现，但是如何复杂的效果都是基于一步步简单的效果堆积出来的，最重要的是理解原理，知其然知其所以然才是最重要的。

##项目地址：https://github.com/ruanjiankeji/DrawTextOnPathProject
有问题可以随时指正，相互学习。

酷炫的圆周动画

先上效果图：

image

主要代码分析：

image

总体来说代码还是比较简单的，这边简单的介绍一下，码字太累，可下载看注释，在上面的applyTransformation方法中，参数interpolatedTime代表当前方法掉用时，动画进行的一个时间点，这个值的范围是0到1，也就是说动画刚开始的时候传进来的interpolatedTime为0，动画进行中的时候，传进来的是0到1之间的小数，动画结束的时候传进来的是1。

Transformation:代表补间动画在不同时刻对图形或组建的变形程度。该对象中封装了一个Matrix对象，对它所包含的Matrix对象进行位移、倾斜、旋转等变换时，Transformation将会控制对应的图片或视图进行相应的变换。

根据getNewLocation方法（代码中有注释，可以自行github上下载），使matrix.preTranslate（）进行平移

下载地址：GitHub - ruanjiankeji/CicleAnimation: 圆周运动的简单动画。可以顺时针，可以逆时针 。

声明：此为原创，转载请联系作者

作者：微信公众号添加公众号-遛狗的程序员 ，或者可以扫描以下二维码关注相关技术文章。

qrcode_for_gh_1ba0785324d6_430.jpg

当然喜爱技术，乐于分享的你也可以可以添加作者微信号：

WXCD.jpeg

|