自定义View1-1:绘制基础

2019-12-07 15:32栏目:bob体育app
TAG:

图片 1

Bitmap

资料来源:扔物线的技术分享 http://hencoder.com/

系列文章之 Android中自定义View(一)
系列文章之 Android中自定义View(二)
系列文章之 Android中自定义View(三)
系列文章之 Android中自定义View(四)
系列文章之 Android中自定义View(xml绘图)
本文出自:
http://www.jianshu.com/u/a1251e598483

线上箭头表示画线的方向。WINDING模式和ALTERNATE模式都会填充三个封闭的L型区域,号码从1到3。两个更小的内部区域,号码为4和5,在ALTERNATE模式下不被填充。但是在WINDING模式下,号码5的区域会被填充,这是因为区域的内部到达图形的外部必须穿过两条相同方向的线。号码为4的区域不会被填充,因为射线必须穿越两条边框线,但是这两条边框线的绘制方向相反。

UI-1 Drawing

我们在使用各种App时都会看到好多漂亮的效果,说实话有的效果真的很好看,所以觉得能写出这些效果的人都好厉害的说,自定义View 在Android 进阶相关的图书中都是必会内容,我也一直看过大概的自定义View 的内容,看过之后还是觉得不够详细,上手还是抓瞎. 刚好网上 扔物线 大神 写了一个自定义view 的详细教程. http://hencoder.com/ui-1-1/ .如果想学习自定义View的同学请去 大神那里围观,本文是记录自己学习 自定义View 的理解和收获,也是一个记录吧,等到用的时候比较容易找到.

图片 2图片 3

自定义绘制技术点总结:

方式:重写绘制方法,其中最常用的是 onDraw()

关键: Canvas 的使用

  1, Canvas 的绘制类方法: drawXXX() (关键参数:Paint)

  2,Canvas 的辅助类方法:范围裁切(clipXXX())和几何变换

补充:使用不同的绘制方法来控制遮盖关系

我是分割线,下面开始本文内容--------------------------

自定义View分为以下几个部分

  • Canvas 的 drawXXX() 系列方法及 Paint 最常见的使用
  • Paint 的完全攻略
  • Canvas 对绘制的辅助——范围裁切和几何变换。
  • 使用不同的绘制方法来控制绘制顺序
  1 /*-------------------------------------------
  2 ALTWIND.C -- Alternate and Winding Fill Modes
  3              (c) Charles Petzold, 1998
  4 -------------------------------------------*/
  5 
  6 #include <Windows.h>
  7 
  8 LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);
  9 
 10 int WINAPI WinMain( __in HINSTANCE hInstance
 11                     , __in_opt HINSTANCE hPrevInstance
 12                     , __in LPSTR lpCmdLine
 13                     , __in int nShowCmd )
 14 {
 15     static TCHAR szAppName[] = TEXT("AltWind");
 16     HWND hwnd;
 17     MSG msg;
 18     WNDCLASS wndclass;
 19 
 20     wndclass.style = CS_HREDRAW | CS_VREDRAW;
 21     wndclass.lpfnWndProc = WndProc;
 22     wndclass.cbClsExtra = 0;
 23     wndclass.cbWndExtra = 0;
 24     wndclass.hInstance = hInstance;
 25     wndclass.hIcon = LoadIcon(NULL, IDI_APPLICATION);
 26     wndclass.hCursor = LoadCursor(NULL, IDC_ARROW);
 27     wndclass.hbrBackground = (HBRUSH)GetStockObject(WHITE_BRUSH);
 28     wndclass.lpszMenuName = NULL;
 29     wndclass.lpszClassName = szAppName;
 30 
 31     if (!RegisterClass(&wndclass))
 32     {
 33         MessageBox(NULL, TEXT("Program requires Windows NT!")
 34             , szAppName, MB_ICONERROR);
 35         return 0;
 36     }
 37 
 38     hwnd= CreateWindow(szAppName, TEXT("Alternate and Winding Fill Modes")
 39         , WS_OVERLAPPEDWINDOW
 40         , CW_USEDEFAULT, CW_USEDEFAULT
 41         , CW_USEDEFAULT, CW_USEDEFAULT
 42         , NULL, NULL, hInstance, NULL);
 43 
 44     ShowWindow(hwnd, nShowCmd);
 45     UpdateWindow(hwnd);
 46 
 47     while (GetMessage(&msg, NULL, 0, 0))
 48     {
 49         TranslateMessage(&msg);
 50         DispatchMessage(&msg);
 51     }
 52 
 53     return msg.wParam;
 54 }
 55 
 56 LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam)
 57 {
 58     static POINT aptFigure[10] = {10, 70
 59                                 , 50, 70
 60                                 , 50, 10
 61                                 , 90, 10
 62                                 , 90, 50
 63                                 , 30, 50
 64                                 , 30, 90
 65                                 , 70, 90
 66                                 , 70, 30
 67                                 , 10, 30};
 68     static int cxClient, cyClient;
 69     HDC hdc;
 70     int i;
 71     PAINTSTRUCT ps;
 72     POINT apt[10];
 73 
 74     switch (message)
 75     {
 76     case WM_SIZE:
 77         cxClient = LOWORD(lParam);
 78         cyClient = HIWORD(lParam);
 79         return 0;
 80 
 81     case WM_PAINT:
 82         hdc = BeginPaint(hwnd, &ps);
 83         SelectObject(hdc, GetStockObject(GRAY_BRUSH));
 84 
 85         for (i = 0; i !=10; ++i)
 86         {
 87             apt[i].x = cxClient * aptFigure[i].x / 200;
 88             apt[i].y = cyClient * aptFigure[i].y / 100;
 89         }
 90         SetPolyFillMode(hdc, ALTERNATE);
 91         Polygon(hdc, apt, 10);
 92 
 93         for (i = 0; i != 10; ++i)
 94         {
 95             apt[i].x += cxClient / 2;
 96         }
 97         SetPolyFillMode(hdc, WINDING);
 98         Polygon(hdc, apt, 10);
 99 
100         EndPaint(hwnd, &ps);
101         return 0;
102 
103     case WM_DESTROY:
104         PostQuitMessage(0);
105         return 0;
106     }
107 
108     return DefWindowProc(hwnd, message, wParam, lParam);
109 }

学习过程:

1,Canvas 的 drawXXX() 系列方法及Paint最常见的使用;

2,Paint的进阶攻略;

3,Canvas对绘制的辅助——范围裁切和几何变换;

4,使用不同的绘制方法来控制绘制顺序;


今天这篇就是第一部分:Canvas 的 drawXXX() 系列方法及 Paint 最常见的使用

图片 4

自定义View 继承View 两个构造方法,重写 onDraw() 方法

Paint paint = new Paint();

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);    // 绘制一个圆
    canvas.drawCircle(300, 300, 200, 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) 设置抗锯齿开关

上代码

图片 5

设置paint 然后画出一个圆

canvas 可以画出好多好多东西,大家可以在google的官方文档上查看所有方法 上链接
https://developer.android.google.cn/reference/android/graphics/Canvas.html

图片 6

官方文档上各个方法

有时候吧也不太乐意看文档,因为文档上写的真他妈的多,但是该看的时候也一定要看,上图的各个方法都是可以点击进去的,方法的详细介绍及使用都有.
如果你真的看的下去你就去看文档吧,我绝不拦你,但是没人一个一个方法点进去看,因为常用的就那几个,接下来我把常用的多个方法列出来给大家看看.

ALTWIND.C

丨一切的开始:onDraw()

    别漏写了super.onDraw()。

Canvas.drawColor(@ColorInt int color) 颜色填充

在整个绘制区域统一涂上指定的颜色。

例如 drawColor(Color.BLACK) 会把整个区域染成纯黑色,覆盖掉原有内容; drawColor(Color.parse("#88880000") 会在原有的绘制效果上加一层半透明的红色遮罩。
类似的方法还有 drawRGB(int r, int g, int b) 和 drawARGB(int a, int r, int g, int b) ,它们和 drawColor(color) 只是使用方式不同,作用都是一样的。

图形的坐标(按一个100*100单位的区域设定)存储在aptFigure数组中。这些坐标会根据客户去的宽度和高度按比例缩放。程序显示两个图形,一个使用ALTERNATE填充模式,另一个使用WINDING填充模式。结果如图:

丨Canvas.drawXXX() 和 Paint 基础

    Paint.setStyle(Style style)设置绘制模式():Paint.style.FILL、STROKE、FILL_AND_STROKE

    Paint.setColor(int color)设置颜色

    Paint.setStrokeWidth(float width)设置线条宽度

    Paint.setTextSize(float textSize)设置文字大小

    Paint.setAntiAlias(boolean aa)设置抗锯齿开关        可以在创建时Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);


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

前两个参数 centerX centerY 是圆心的坐标,第三个参数 radius 是圆的半径,单位都是像素,它们共同构成了这个圆的基本信息(即用这几个信息可以构建出一个确定的圆);第四个参数 paint,它提供基本信息之外的所有风格信息,例如颜色、线条粗细、阴影等。

在 Android 里,每个 View 都有一个自己的坐标系,彼此之间是不影响的。这个坐标系的原点是 View 左上角的那个点;水平方向是 x 轴,右正左负;竖直方向是 y 轴,下正上负(注意,是下正上负,不是上正下负,和上学时候学的坐标系方向不一样)。也就是下面这个样子。

图片 7

image.png

所以一个 View 的坐标 (x, y) 处,指的就是相对它的左上角那个点的水平方向 x 像素、竖直方向 y 像素的点。例如,(300, 300) 指的就是左上角的点向右 300 、向下 300 的位置; (100, -50) 指的就是左上角的点向右 100 、向上 50 的位置。

好了坐标系插播结束,接着插播 paint 方法

图片 8

Canvas.drawColor()、Canvas.drawRGB()、Canvas.drawARGB():

作用整个绘制区域,用于绘制前期设置背景底色或绘制后期设置蒙板;


插播一: Paint.setColor(int color)

例如,你要画一个红色的圆,并不是写成 canvas.drawCircle(300, 300, 200, RED, paint)
这样,而是像下面这样:
paint.setColor(Color.RED); // 设置为红色canvas.drawCircle(300, 300, 200, paint);

图片 9

Paint.setColor(int color)是 Paint最常用的方法之一,用来设置绘制内容的颜色。你不止可以用它画红色的圆,也可以用它来画红色的矩形、红色的五角星、红色的文字。

drawCircle(float centerX, float centerY, float radius, Paint paint):

xy设置圆心,以view的左顶点为坐标系原点,radius设置半径;

注意:Paint能做的优先交给Paint去做,drawXXX方法参数尽量只包含特有的属性 如圆心半径;


插播二: Paint.setStyle(Paint.Style style)

而如果你想画的不是实心圆,而是空心圆(或者叫环形),也可以使用 paint.setStyle(Paint.Style.STROKE)
来把绘制模式改为画线模式。
paint.setStyle(Paint.Style.STROKE); // Style 修改为画线模式canvas.drawCircle(300, 300, 200, paint);

图片 10

setStyle(Style style) 这个方法设置的是绘制的 Style 。Style 具体来说有三种: FILL, STROKE和 FILL_AND_STROKE。FILL是填充模式,STROKE是画线模式(即勾边模式),FILL_AND_STROKE是两种模式一并使用:既画线又填充。它的默认值是 FILL,填充模式。

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

left,top,right,bottom是矩形四条边相对于xyxy轴的坐标;

两个重载方法drawRect(RectF rect, Paint paint)和drawRect(Rect rect, Paint paint),可以直接填写RectF或Rect对象来绘制矩形;


插播三: Paint.setStrokeWidth(float width)

在 STROKE和 FILL_AND_STROKE下,还可以使用 paint.setStrokeWidth(float width)来设置线条的宽度:paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(20); // 线条宽度为 20 像素canvas.drawCircle(300, 300, 200, paint);

drawPoint(float x, float y, Paint paint)

点的大小可以通过paint.setStrokeWidth(width)来设置;

点的形状可以通过paint.setStrokeCap(cap)来设置,端点有圆头 (ROUND)、平头 (BUTT) 和方头 (SQUARE) 三种;

FILL模式下的drawCircle()和drawRect()也能达到相同效果,按偏好选择;


插播四: 抗锯齿

在绘制的时候,往往需要开启抗锯齿来让图形和文字的边缘更加平滑。开启抗锯齿很简单,只要在 new Paint()的时候加上一个 ANTI_ALIAS_FLAG参数就行:Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

另外,你也可以使用 Paint.setAntiAlias(boolean aa)来动态开关抗锯齿。抗锯齿的效果如下:

图片 11

可以看出,没有开启抗锯齿的时候,图形会有毛片现象,啊不,毛边现象。所以一定记得要打开抗锯齿哟!

drawPoints(float[] pts, Paint paint) 批量画点

除了圆,Canvas 还可以绘制一些别的简单图形。它们的使用方法和 drawCircle() 大同小异,我就只对它们的 API 做简单的介绍.

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)

canvas.drawPoints(points,2/* 跳过两个数,即前两个 0 */,8/* 一共绘制 8 个数(4 个点)*/, paint);


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

left, top, right, bottom 是矩形四条边的坐标。
另外,它还有两个重载方法 drawRect(RectF rect, Paint paint) 和 drawRect(Rect rect, Paint paint) ,让你可以直接填写 RectF 或 Rect 对象来绘制矩形。

版权声明:本文由bob体育app发布于bob体育app,转载请注明出处:自定义View1-1:绘制基础