【Android自定义View】绘图之基础篇(一)

本文详细介绍了在Android自定义View中使用Paint与Canvas进行绘图的基本方法,包括设置画笔颜色、抗锯齿、填充样式、画笔宽度、字体大小等属性,以及绘制直线、矩形、圆角矩形、圆形、椭圆和弧线的具体操作。
摘要由CSDN通过智能技术生成

前言

自定义 view 总是绕不开onDraw,而onDraw则少不了PaintCanvas,这里我们就说说这个。

Paint

主要的方法:

paint.setColor(Color.RED); //设置画笔颜色 
paint.setAntiAlias(true);//抗锯齿功能
paint.setStyle(Style.FILL);//设置填充样式
paint.setStrokeWidth(30);//设置画笔宽度
paint.setTextSize();//设置字体大小
复制代码
  • setStyle 主要有FILLSTROKEFILL_AND_STROKE

我们来看看效果

        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(200, 300, 100, paint);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(500, 300, 100, paint);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawCircle(800, 300, 100, paint);
复制代码

FILLFILL_AND_STROKE 貌似是一样的?我们将strokeWidth设置为100

可以明显的看到第2、3个圆变大了, STROKEFILL_AND_STROKE都会为圆加上 strokeWidth/2

Canvas

直线

drawLine(float startX, float startY, float stopX, float stopY,Paint paint)

         paint.setColor(Color.RED);
         canvas.drawLine(100, 100, 200, 300, paint);
复制代码

drawLines(float[] pts, Paint paint)

其中,pts 长度必须是 4个倍数

        paint.setColor(Color.BLACK);
        float[] pts = {50, 50, 150, 50,
                150, 50, 150, 150,
                150, 150, 250, 150,
                250, 150, 250, 250};
        canvas.drawLines(pts, paint);
复制代码

需要注意的是,50, 50, 150, 50 为第1条线,150, 50, 150, 150为第2条,150, 150, 250, 150为第3条线,250, 150, 250, 250为第4条线

drawLines(float[] pts, int offset, int count,Paint paint)

offset表示起始位置 count表示从起始位置画多少个点,必须是4个倍数

        float[] pts = {50, 50, 150, 50,
                150, 50, 150, 150,
                150, 150, 250, 150,
                250, 150, 250, 250};
        paint.setColor(Color.BLACK);
        canvas.drawLines(pts, 0, 16, paint);
复制代码

即和第二步中效果一致,我们修改offset为 4,count 为 12,效果为下图

矩形

drawRect (float left, float top, float right, float bottom, Paint paint)

canvas.drawRect(100, 200, 400, 800, paint);

其代表的坐标点如下图所示

drawRect (RectF rect, Paint paint) drawRect (Rect r, Paint paint)

这2个其实是一样的,left、top、right、bottom和第1个是一致的

    public Rect(int left, int top, int right, int bottom) {
        this.left = left;
        this.top = top;
        this.right = right;
        this.bottom = bottom;
    }
复制代码
    public RectF(float left, float top, float right, float bottom) {
        this.left = left;
        this.top = top;
        this.right = right;
        this.bottom = bottom;
    }
复制代码
圆角矩形

drawRoundRect(RectF rect, float rx, float ry, Paint paint)

其中,rx代表X轴圆角半径,ry代表Y轴圆角半径

        RectF rectF = new RectF(100, 200, 400, 800);
        canvas.drawRoundRect(rectF, 100, 200, paint);
复制代码

效果图如下

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,Paint paint)

同矩形,rx、ry同方法1

圆形

drawCircle(float cx, float cy, float radius, Paint paint)

其中,cx为圆心X轴坐标,cy为圆心Y轴坐标,radius为半径

 canvas.drawCircle(100, 200, 50, paint);
复制代码

椭圆

drawOval(RectF oval, Paint paint) drawOval(float left, float top, float right, float bottom, Paint paint) 同矩形

        RectF rectF = new RectF(100, 200, 400, 800);
        canvas.drawOval(rectF, paint);
复制代码

弧线

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)

drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, Paint paint)

startAngle 弧开始的角度,以X轴正方向为0度

sweepAngle 弧持续的角度

useCenter 是否有弧的两边,true 闭合的,false 非闭合的

        paint.setStyle(Paint.Style.STROKE);

        RectF rect = new RectF(50, 100, 200, 400);
        canvas.drawArc(rect, 0, 90, true, paint);

        
        RectF rectF = new RectF(100, 200, 400, 800);
        canvas.drawArc(rectF, 0, 90, false, paint);
复制代码

示例

这里就不贴代码了,主要用的画线、矩形和圆,再加上一些位置计算

参考资料:自定义控件之绘图篇(一):概述及基本几何图形绘制

你的认可,是我坚持更新博客的动力,如果觉得有用,就请点个赞,谢谢

转载于:https://juejin.im/post/5cc56fa3e51d456e51614b2c

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值