自定义view 系列一 paint canvas path简单使用

最新推荐文章于 2022-04-24 12:33:46 发布

stormxz

最新推荐文章于 2022-04-24 12:33:46 发布

阅读量435

点赞数

分类专栏： android 基础文章标签： android view path paint

本文链接：https://blog.csdn.net/weixin_39158738/article/details/77176109

版权

android 基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

android 自定义view是一个很大的模块，本篇将介绍一下paint,canvas,path的基本使用。

paint: 画笔

canvas: 画布

path: 路径

下面将通过一系列的代码来理解paint, canvas, path的使用

一、view的自定义

1. 创建android project，创建XXXView.java extends view 并实现其构造方法(至少为一个空的和2个构造方法的)，否则会

Caused by: java.lang.NoSuchMethodException: <init> [class android.content.Context, interface android.util.AttributeSet]

   public CircleView(Context context) {
        super(context);
    }

    public CircleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

2. 实现方法onDraw进行绘图。

二、paint的相关方法

        mPaint.setStyle(Paint.Style.STROKE);
        /*Paint的类型
        Paint.Style.FILL：填充内部
        Paint.Style.FILL_AND_STROKE  ：填充内部和描边
        Paint.Style.STROKE  ：描边*/

        mPaint.setStrokeCap(Paint.Cap.ROUND);
        /* 画笔开始与结束的形状  线冒
        Paint.Cap.ROUND ： 圆形线冒
        Paint.Cap.BUTT ： 无线冒
        Paint.Cap.SQUARE ：  正方形线冒  */

        mPaint.setStrokeJoin(Paint.Join.MITER);
        /*Join.MITER（结合处为锐角）
        Join.Round(结合处为圆弧)
        Join.BEVEL(结合处为直线)*/

        mPaint.setColor(mBorderColor);

        mPaint.setAlpha(1);   设置透明度，需设在setColor之后，否则不生效

        mPaint.setAntiAlias(boolean aa)  设置是否抗锯齿

        setLayerType(View.LAYER_TYPE_SOFTWARE, null);//关闭硬件加速阴影才有效果
        mPaint.setShadowLayer(10, 15, 15, Color.RED);//设置阴影   参数：倾斜度，水平位移，垂直位移，阴影颜色

        mPaint.setStrokeWidth(20); //设置画笔粗细

三、使用canvas绘制图形

绘制之前设置一下paint属性，记住，千万不要在onDraw中创建paint对象，因为onDraw是不断被调用的，会造成paint对象不断分配内存，google介绍是为了减少垃圾回收器对绘图性能的影响. 所以一般都是在构造方法中进行创建paint对象

        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);   //设置颜色
        mPaint.setStyle(Paint.Style.FILL);   //填充
        mPaint.setAntiAlias(true);    //抗锯齿
        mPaint.setAlpha(100);   //透明度
        //setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        //mPaint.setShadowLayer(15, 15, 15, Color.GRAY);  //阴影

1. 圆形

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

参数：cx: 圆心距离x的距离

cy:圆心距离y的距离

radius: 半径大小

paint: 画笔

canvas.drawCircle(100, 200, 100, mPaint)

2. 线

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

参数： startX, startY: 起点坐标

stopX, stopY: 终点坐标

public void drawLines(float[] pts, Paint paint)

参数： pts: 点的集合，两两为一个点进行连线

paint: 画笔

canvas.drawLine(100, 400, 450, 600, mPaint); //参数 开始点的（x,y）  结束点的（x,y）

float[] pts = {50, 50, 150, 50, 150, 50, 100, 75, 100, 75, 50, 50};  //参数  两两为一个点进行连线
canvas.drawLines(pts, mPaint);

3. 点

public void drawPoint(float x, float y, Paint paint)

参数： x: 点距x距离

y:点距y的距离

public void drawPoints(float[] pts, int offset, int count, Paint paint)

参数: pts: 点的集合

offset: 跳过多少数值

count: 画多少个值

//画点
canvas.drawPoint(400, 200, mPaint);   //参数 点的x, y位置
float[] ptss = {50, 50, 150, 50, 150, 50, 100, 75, 100, 75, 50, 50};
canvas.drawPoints(ptss, 3, 4, mPaint); //跳过前面3个数值（50，50，150）， 画后面4个值代表的点（50，150，50，100）

4. 矩形 drawRect drawRectF

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

参数： left top right bottom 可理解为4个边离左，上，右，下的距离或者矩形2个顶点的坐标

RectF 同上

canvas.drawRect(100, 600, 200, 700, mPaint);  //参数 left  top  right  bottom  可理解为4个边离左，上，右，下的距离
/*Rect rect = new Rect(100, 200, 50, 50);
canvas.drawRect(rect, mPaint);

RectF rect1 = new RectF(100, 200, 50, 50);
canvas.drawRect(rect1, mPaint);*/

5. 圆角矩形

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

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

参数: 前面4个参数为矩形

rx:圆角x轴半径

ry:圆角y轴半径

canvas.drawRoundRect(200, 700, 400, 800, 50, 100, mPaint);
//        canvas.drawRoundRect(new RectF(200, 300, 400, 600), 10, 50, mPaint);

6. 椭圆形

椭圆形是根据矩形来绘制出来的

public void drawOval(RectF oval, Paint paint)
public void drawOval(float left, float top, float right, float bottom, Paint paint)

参数：矩形加paint

RectF rect = new RectF(500, 900, 600, 1020);
canvas.drawOval(rect, mPaint);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawRect(rect, mPaint);

7. 弧

弧是根据椭圆形画出来的，椭圆形是根据矩形绘制，所以在绘制弧的时候，也是创建RectF

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

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

参数 : 矩形

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

弧持续的角度

是否画边（true 有2边， false只有一条弧）

RectF rect1 = new RectF(500, 900, 600, 1020);
canvas.drawArc(rect1, 45, 90, true, mPaint);

运行结果如下：

四、path 绘制图形

Path 相关方法：

moveto 移动path点

lineto 从moveto的地方连线到lineto , lineto为下一个的起点

close 闭环

addRect 绘制矩形

addRoundRect 绘制圆角矩形

addCircle 绘制圆

addOval 绘制椭圆

addArc 绘制弧

最终通过canvas.drawPath 可绘制path的图形

1. 直线 / 三角形

public void moveTo(float x, float y) //路径起点

public void lineTo(float x, float y) // 一条线的终点，同时为下一个点的起点

public void close() //闭环将起点和终点的线相连

mPath.moveTo(100, 100);   //起点
mPath.lineTo(200, 200);   //一条线的终点，同时为下一个的起点
mPath.lineTo(150, 200);   //多个lineTo一起连用


mPath.moveTo(50, 100);    //或重新设置起点
mPath.lineTo(150, 200);
mPath.lineTo(50, 200);
mPath.close();            //闭环   将起点与终点连接          这边画出了一个三角形
canvas.drawPath(mPath, mPaint);

2. 矩形

public void addRect(RectF rect, Path.Direction dir)

参数： rect 为绘制的矩形

dir 为path的方向

/*Path.Direction.CCW: 逆时针画
Path.Direction.CW: 顺时针画*/

下面通过文本来看顺逆时针

Path mPath1 = new Path();
RectF mRectF = new RectF(100, 200, 300, 500);
mPath1.addRect(mRectF, Path.Direction.CCW);
/*Path.Direction.CCW: 逆时针画
Path.Direction.CW:  顺时针画*/
String text = "UP-TO-DATE";

Path mPath2 = new Path();
RectF mRectF1 = new RectF(200, 300, 400, 500);
mPath2.addRect(mRectF1, Path.Direction.CW);

canvas.drawPath(mPath1, mPaint);  //画矩形框框
canvas.drawPath(mPath2, mPaint);

mPaint.setColor(Color.BLUE);
mPaint.setTextSize(35);
canvas.drawTextOnPath(text, mPath1, 0, 18, mPaint);  //文字跟随路径写
canvas.drawTextOnPath(text, mPath2, 0, 18, mPaint);

3. 圆角矩形

public void addRoundRect(float left, float top, float right, float bottom, float rx, float ry, Path.Direction dir)

public void addRoundRect(RectF rect, float[] radii, Path.Direction dir)

public void addRoundRect(float left, float top, float right, float bottom, float[] radii, Path.Direction dir)

参数：矩形 + 圆角的半径 + 路径方向

//画圆角矩形
        RectF mRectFRound = new RectF(200, 600, 400, 800);
        Path mRRound = new Path();
        float[] radius = {10, 15, 5, 20, 15, 10, 20, 40};   //顺时针4个圆角分别设置圆形x, y半径
        mRRound.addRoundRect(mRectFRound, radius, Path.Direction.CCW);
//        public void addRoundRect(RectF rect, float rx, float ry, Path.Direction dir)  //4个圆角设置的相同的
        canvas.drawPath(mRRound, mPaint);

4. 圆

public void addCircle(float x, float y, float radius, Path.Direction dir)

参数： float x：圆心X轴坐标
float y：圆心Y轴坐标
float radius：圆半径

mPaint.setColor(Color.CYAN);
Path circlePath = new Path();
circlePath.addCircle(100, 700, 100, Path.Direction.CW);
canvas.drawPath(circlePath, mPaint);

5. 椭圆

public void addOval(RectF oval, Path.Direction dir)

参数：矩形 + 路径方向

Path ovalPath = new Path();
RectF ovalRectF = new RectF(100, 900, 400, 1000);
ovalPath.addOval(ovalRectF, Path.Direction.CW);
canvas.drawPath(ovalPath, mPaint);

6. 弧

public void addArc(RectF oval, float startAngle, float sweepAngle)

public void addArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle)

参数： RectF oval：弧是椭圆的一部分，这个参数就是生成椭圆所对应的矩形
float startAngle：开始的角度，X轴正方向为0度
float sweepAngel：持续的度数

//画弧
Path arcPaht = new Path();
RectF arcRectF = new RectF(200, 600, 400, 800);
arcPaht.addArc(arcRectF, 0, 180);
canvas.drawPath(arcPaht, mPaint);

运行结果如下：

stormxz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录