Android Path API笔记

最新推荐文章于 2024-07-18 15:11:47 发布

碧云天丶

最新推荐文章于 2024-07-18 15:11:47 发布

阅读量209

点赞数

分类专栏： # 自定义View 文章标签： android html5 小程序

本文链接：https://blog.youkuaiyun.com/MoLiao2046/article/details/119993463

版权

自定义View 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Android中如何使用`Paint`和`Path`类进行图形绘制，包括`lineTo()`用于画直线，`moveTo()`移动画笔起点，`rMoveTo()`进行相对移动，`quadTo()`和`rQuadTo()`绘制贝塞尔曲线，以及`cubicTo()`和`arcTo()`创建曲线和弧线的方法。通过实例代码展示了各个方法的用法，帮助开发者理解Android图形绘制的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

lineTo(x,y)

画直线,参数x,y坐标表示直线的终点坐标,起点坐标为当前画笔所在坐标.

画笔初始坐标为(0,0),直接进行画直线效果如下:

public class DrawingView extends View {
    private final Paint mPaint = new Paint();
    private final Path mPath = new Path();
    public DrawingView(Context context) {
        super(context);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(3);
        mPaint.setColor(Color.BLACK);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 画直线,直线终点坐标为(100,100)
        mPath.lineTo(100, 100);
        // mPain此时坐标为(0,0)
        canvas.drawPath(mPath, mPaint);
    }
}

moveTo(x,y)

移动画笔到该坐标点,下面实例是先将画笔移动到某坐标点, 再画直线.

public class DrawingView extends View {
    private final Paint mPaint = new Paint();
    private final Path mPath = new Path();
    public DrawingView(Context context) {
        super(context);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(3);
        mPaint.setColor(Color.BLACK);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 移动mPain画笔到坐标50,50处
        mPath.moveTo(50,50);
        // 画直线,直线终点坐标为(100,100)
        // 最终直线的起点坐标50,50, 终点坐标为100,100
        mPath.lineTo(100, 100);
        canvas.drawPath(mPath, mPaint);
    }
}

rMoveTo(x,y)

画笔在当前坐标点基础上进行增量移动x,y值

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 将画笔移动到()50,50)
    mPath.moveTo(50,50);
    // 在(50,50)坐标点的基础上向左移动45,向右移动45
    mPath.rMoveTo(45f,45f);
    // 画直线,直线起点(95,95),直线终点(100,100)
    mPath.lineTo(100, 100);
    canvas.drawPath(mPath, mPaint);
}

quadTo(x1,y1,x2,y2)

绘制贝塞尔曲线, x1,y1为控制点, x2,y2为终点.
图中的控制点坐标并不在线上,这里只是粗略的标注下,控制点坐标是两个弧线切线相交的点

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 画笔移动到(40,40)
    mPath.moveTo(40,40);
    // (60,90)为控制点,(80,40)为终点
    mPath.quadTo(60,90,80,40);
    canvas.drawPath(mPath, mPaint);
}

rQuadTo(x1,y1,x2,y2)

在画笔当前坐标点为基础, 进行增量移动绘制贝塞尔曲线, x1,y1为控制点, x2,y2为终点.

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 画笔移动到(40,0)
    mPath.moveTo(40,0);
    // 在画笔当前坐标点下,沿x轴移动40,沿y轴移动100, 该控制点实际坐标(80,100)
    // 在画笔当前坐标点下,沿x轴移动10,沿y轴移动0, 该终点实际坐标为(50,0)
    // 该曲线起点坐标(40,0),控制点坐标为(80,100),终点坐标为(50,0)    
    mPath.rQuadTo(40,100,10,0);
    canvas.drawPath(mPath, mPaint);
}

cubicTo(x1,y1,x2,y2,x3,y3)

绘制贝塞尔曲线, x1,y1为一控制点, x2,y2为二控制点,x3,y3为终点

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 画笔起始点(0,0)
    // (40,140) 一控制点
    // (80,10)  二控制点
    // (140,80) 终点
    mPath.cubicTo(40,140,80,10,140,80);
    canvas.drawPath(mPath, mPaint);
}

图中的控制点坐标并不在线上,这里只是粗略的标注下,控制点坐标是两个弧线切线相交的点

arcTo(ovalRectF, startAngle, sweepAngle)

绘制弧线

ovalRectF: 为矩形
startAngle: 开始角度
sweepAngle: 扫描过的角度

public class DrawingView extends View {
    private final Paint mPaint = new Paint();
    private final Paint m2Paint = new Paint();
    private final Path mPath = new Path();
    public DrawingView(Context context) {
        super(context);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(3);
        mPaint.setColor(Color.BLUE);
        m2Paint.setStyle(Paint.Style.FILL_AND_STROKE);
        m2Paint.setStrokeWidth(3);
        m2Paint.setColor(Color.RED);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 矩形左上角坐标(0,0),右下角坐标(100,100)
        RectF mRectF = new RectF(0, 0, 100, 100);
        // 将上面的矩形画到canvas上,rx: x轴方向上的圆角半径, ry: y轴方向上的圆角半径
        canvas.drawRoundRect(mRectF, 0, 0, m2Paint);
        // 起始角度是0,扫描90度后得到弧线.
        mPath.arcTo(mRectF, 0, 90);
        canvas.drawPath(mPath, mPaint);
    }
}