Android自定义View 1-1 绘制基础

学习http://hencoder.com/ui-1-1/笔记

一、onDraw()

创建Paint对象,重写onDraw(),把绘制的代码写在onDraw()里面。

二、Canvas.drawXXX() 和 Paint 基础

drawXXX() 系列方法和 Paint 的基础能够应付简单的绘制需求。主要包括:

1.Canvas 类下的所有 draw- 打头的方法,例如 drawCircle() drawBitmap()。

2.Paint 类的几个最常用的方法。具体是:
Paint.setStyle(Style style) 设置绘制模式
Paint.setColor(int color) 设置颜色
Paint.setStrokeWidth(float width) 设置线条宽度
Paint.setTextSize(float textSize) 设置文字大小
Paint.setAntiAlias(boolean aa) 设置抗锯齿开关

三、细说两类的使用

1.Canvas.drawColor() 颜色填充
作用:在整个绘制区域统一涂上指定的颜色,一般用于在绘制之前设置底色,或者在绘制之后为界面设置半透明蒙版。

 canvas.drawColor(Color.RED);//红色
 canvas.drawColor(Color.parse("#88880000"); // 半透明红色 

其他方法:

canvas.drawRGB(100, 200, 100);  
canvas.drawARGB(100, 100, 200, 100);  

2.drawCircle(float centerX, float centerY, float radius, Paint paint) 画圆

参数:

 /**
     * @param cx
     * @param cy
     * @param radius
     * @param paint
     */
drawCircle(float cx, float cy, float radius, Paint paint)
//绘制一个圆形
        paint.setColor(Color.YELLOW);//圆的颜色
        paint.setStyle(Paint.Style.STROKE);//修改为画线模式  FILL 是填充模式,STROKE 是画线模式(即勾边模式),FILL_AND_STROKE 既画线又填充。它的默认值是 FILL,填充模式。
        paint.setStrokeWidth(20); // 线条宽度为 20 像素  
        paint.setAntiAlias(true);//抗锯齿开   Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);  
        canvas.drawCircle(300,300,200,paint);
空心圆

3.drawRect(float left, float top, float right, float bottom, Paint paint) 画矩形

参数:

 /**
     * @param left
     * @param top
     * @param right
     * @param bottom
     * @param paint
     */
drawRect(float left, float top, float right, float bottom, Paint paint)
        paint.setStyle(Paint.Style.FILL);//实心
        canvas.drawRect(100, 600, 500, 1000, paint);

        paint.setStyle(Paint.Style.STROKE);//空心
        canvas.drawRect(100, 1200, 300, 1400, paint);
实心+空心

4.drawPoint(float x, float y, Paint paint) 画点

        //圆形点
        paint.setStrokeWidth(20);//点的大小
        paint.setStrokeCap(Paint.Cap.ROUND);//圆形的点
        canvas.drawPoint(50,50,paint);

        //方形点
        paint.setStrokeWidth(20);//点的大小
        paint.setStrokeCap(Paint.Cap.SQUARE);//方形的点
        canvas.drawPoint(150,50,paint);
圆形点+方形点

注:
Paint.setStrokeCap(cap) 可以设置点的形状,但这个方法并不是专门用来设置点的形状的,而是一个设置线条端点形状的方法。端点有圆头 (ROUND)、平头 (BUTT) 和方头 (SQUARE) 三种

5.drawPoints(float[] pts, int offset, int count, Paint paint) / drawPoints(float[] pts, Paint paint) 画点(批量)
参数:

 /**
     * @param pts 点的坐标,每两个成一对
     * @param offset  表示跳过数组的前几个数再开始记坐标
     * @param count  表示一共要绘制几个点
     * @param paint
     */
drawPoints(float[] pts, int offset, int count, Paint paint)
       float[] points = {0, 0, 50, 50, 50, 100, 100, 50, 100, 100, 150, 50, 150, 100};// 绘制四个点:(50, 50) (50, 100) (100, 50) (100, 100)
        paint.setStrokeWidth(20);//点的大小
        paint.setStrokeCap(Paint.Cap.ROUND);//圆形的点
        canvas.drawPoints(points, 2 /*
 跳过两个数,即前两个 0 */,
                8 /* 一共绘制 8 个数(4 个点)*/, paint);
批量画点

6.drawOval(float left, float top, float right, float bottom, Paint paint) 画椭圆

//1
paint.setStyle(Style.FILL);  
canvas.drawOval(50, 50, 350, 200, paint);
//2
paint.setStyle(Style.STROKE);  
canvas.drawOval(400, 50, 700, 200, paint);  
//3  4.3以下
   RectF oval=new RectF();//RectF对象  
        oval.left=100;//左边  
        oval.top=100;//上边  
        oval.right=400;//右边  
        oval.bottom=300;//下边  
        canvas.drawOval(oval, paint);
椭圆

7.drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 画线
参数:startX, startY, stopX, stopY 分别是线的起点和终点坐标

 //画线
        paint.setStrokeWidth(20);
        canvas.drawLine(200, 200, 800, 500, paint);
线

注:由于直线不是封闭图形,所以 setStyle(style) 对直线没有影响

8.drawLines(float[] pts, int offset, int count, Paint paint) / drawLines(float[] pts, Paint paint) 画线(批量)

9.drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 画圆角矩形
参数:
left, top, right, bottom 是四条边的坐标,rx 和 ry 是圆角的横向半径和纵向半径。

canvas.drawRoundRect(100, 100, 500, 300, 50, 50, paint);  
 //4.3以下
canvas.drawRoundRect(new RectF(100, 100, 500, 300), 50, 50, paint);
圆角矩形

10.drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 绘制弧形或扇形

参数:

 /**
     * @param left  弧形所在的椭圆
     * @param offset  弧形所在的椭圆
     * @param right 弧形所在的椭圆
     * @param bottom 弧形所在的椭圆
     * @param startAngle 弧形的起始角度(x 轴的正向,即正右的方向,是 0 度的位置;顺时针为正角度,逆时针为负角度)
     * @param sweepAngle 弧形划过的角度
     * @param useCenter 是否连接到圆心,如果不连接到圆心,就是弧形,如果连接到圆心,就是扇形
     * @param paint
     */
drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 
 paint.setStyle(Paint.Style.FILL); // 填充模式  
        //图1
        canvas.drawArc(new RectF(200, 100, 800, 500), -110, 100, true, paint); // 绘制扇形  
        //图2
        canvas.drawArc(new RectF(200, 100, 800, 500), 20, 140, false, paint); // 绘制弧形  
        paint.setStyle(Paint.Style.STROKE); // 画线模式  
        paint.setStrokeWidth(10);
        //图3
        canvas.drawArc(new RectF(200, 100, 800, 500), 180, 60, false, paint); // 绘制不封口的弧形 
图1.png
图2.png
图3.png

11.drawPath(Path path, Paint paint) 画自定义图形
画心:

public class PathView extends View {

    Paint paint = new Paint();
    Path path = new Path(); // 初始化 Path 对象

    ......

    {
        // 使用 path 对图形进行描述(这段描述代码不必看懂)
        path.addArc(new RectF(200, 200, 400, 400), -225, 225);
        path.arcTo(new RectF(400, 200, 600, 400), -180, 225, false);
        path.lineTo(400, 542);
    }

       @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.BLACK);
        paint.setColor(Color.RED);//颜色
        paint.setAntiAlias(true);//抗锯齿开   Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);  
        canvas.drawPath(path, paint); // 绘制出 path 描述的图形(心形),大功告成
    }
}
心.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • 一、概述 1. 四线格与基线 小时候,我们在刚开始学习写字母时,用的本子是四线格的,我们必须把字母按照规则写在四线...
    addapp阅读 7,550评论 2 16
  • 系列文章之 Android中自定义View(一)系列文章之 Android中自定义View(二)系列文章之 And...
    YoungerDev阅读 4,361评论 3 11
  • 自定义绘制概述 方法:重写绘制方法(最常用:onDraw()) 绘制的关键:CanvasCanvas的绘制类方法:...
    NewSalton阅读 433评论 0 0
  • 前言: 在接触Android这么长时间,看到很多大牛都在和大家分享自己的知识,深有体会,刚好前段时间写了一个Dem...
    杨艳伟阅读 1,247评论 0 5
  • 清晨回笼觉睡的正香,手机铃声吵醒了我。满身子的不情愿起身接了电话。对方喜悦的声音传了进来,买了一个别墅喊我去看看。...
    尘埃里的草阅读 281评论 0 1