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

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

有问题可以随时指正，相互学习。

效果图：

基础知识：

结语：

项目地址：https://github.com/ruanjiankeji/DrawTextOnPathProject

更多相关文章

随机推荐