那是因为区域的里边达到图形的表面必得超出两条相通方向的线,Android中自定义View(二)

公海710登录网址 1

Bitmap

材料来自:扔物线的技能分享
http://hencoder.com/

俯拾都已文章之
Android中自定义View(风姿浪漫)
文山会海文章之
Android中自定义View(二)
三回九转串文章之
Android中自定义View(三)
笔走龙蛇文章之
Android中自定义View(四)
绚丽多彩小说之
Android中自定义View(xml绘图)
本文来源:
http://www.jianshu.com/u/a1251e598483

线上箭头表示画线的大势。WINDING形式和ALTE冠道NATE形式都会填充几个密闭的L型区域,号码从1到3。四个更加小的内部区域,号码为4和5,在ALTEKugaNATE情势下不被填充。可是在WINDING情势下,号码5的区域会被填充,那是因为区域的里边到达图形的外界必需胜过两条相仿方向的线。号码为4的区域不会被填充,因为射线必得超出两条边框线,可是这两条边框线的绘图方向相反。

UI-1 Drawing

我们在行使各样App时都会看到数不清理想的作用,说真话有的效果与利益实在很为难,所以感觉能写出那个效应的人都好狠心的说,自定义View
在Android 进级相关的图书中都是必会内容,小编也直接看过差非常少的自定义View
的剧情,看过之后依然以为非常不够详细,上手依然抓瞎. 正好英特网 扔物线 大神
写了叁个自定义view 的详尽教程.
http://hencoder.com/ui-1-1/
.若是想学习自定义View的同桌请去 大神这里围观,本文是记录自个儿上学
自定义View 的明亮和收获,也是二个笔录吧,等到用的时候可比便于找到.

公海710登录网址 2公海710登录网址 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 最不以为奇的选择

公海710登录网址 4

自定义View 世袭View 八个构造方法,重写 onDraw() 方法

Paint paint = new Paint();

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);    // 绘制一个圆
    canvas.drawCircle(300, 300, 200, paint);
}
  1. www.710.com ,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) 设置抗锯齿按键

上代码

公海710登录网址 5

安装paint 然后画出贰个圆

canvas 可以画出过多过多事物,大家能够在google的合斯拉维尼亚语档上查看全部办法
上链接
https://developer.android.google.cn/reference/android/graphics/Canvas.html

公海710登录网址 6

合葡萄牙语档上相继艺术

不时候吧也不太愿意看文书档案,因为文档上写的真他妈的多,但是该看的时候也明确要看,上海教室的依次艺术都是能够点击步向的,方法的详尽介绍及应用都有.
借使你真的看的下去你就去看文书档案吧,我不要拦你,不过没人二个三个方法点进去看,因为常用的就那二个,接下去自个儿把常用的五个法子列出来给大家看看.

ALTWIND.C

丨一切的启幕:onDraw()

    别漏写了super.onDraw()。

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

在漫天绘制区域统大器晚成涂上钦定的颜料。

比如 drawColor(Color.BLACK) 会把任何区域染成纯卡其色,覆盖掉原有内容;
drawColor(Color.parse(“#88880000”)
会在原有的绘图效果上加黄金时代层半晶莹剔透的辛未革命遮罩。
恍如的措施还会有 drawKoleosGB(int r, int g, int b) 和 drawA大切诺基GB(int a, int r,
int g, int b) ,它们和 drawColor(color)
只是选择方法差别,功能没什么区别样的。

图片的坐标(按三个100*100单位的区域设定卡塔尔国存款和储蓄在aptFigure数组中。那一个坐标会依据顾客去的小幅度和惊人按百分比缩放。程序呈现三个图形,一个应用ALTE凯雷德NATE填充格局,另三个利用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.setAnti阿里as(boolean aa)设置抗锯齿开关      
 能够在开创时Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);


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

前三个参数 centerX centerY 是圆心的坐标,第多少个参数 radius
是圆的半径,单位都以像素,它们一同构成了这几个圆的着力音信(即用那多少个消息方可创设出多个明确的圆卡塔 尔(英语:State of Qatar);第八个参数
paint,它提供基本消息之外的具有风格音讯,举例颜色、线条粗细、阴影等。

在 Android 里,每种 View
都有二个本身的坐标系,互相之间是不影响的。这些坐标系的原点是 View
左上角的要命点;水平方向是 x 轴,右正左负;竖直方向是 y
轴,下正上负(注意,是下正上负,不是上正下负,和学习时候学的坐标系方向差别等卡塔尔国。也等于下面那几个样子。

公海710登录网址 7

image.png

就此三个 View 的坐标 (x, y) 处,指的便是对峙它的左上角那么些点的等级次序方向 x
像素、竖直方向 y 像素的点。比如,(300, 300) 指的正是左上角的点向右 300
、向下 300 的地点; (100, -50) 指的便是左上角的点向右 100 、向上 50
的任务。

公海710登录网址 ,好了坐标系插播停止,接着插播 paint 方法

公海710登录网址 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);

公海710登录网址 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)

而只要您想画的不是虔诚圆,而是空心圆(也许叫环形卡塔 尔(英语:State of Qatar),也得以采纳paint.setStyle(Paint.Style.STROKE)
来把绘制格局改为画线形式。
paint.setStyle(Paint.Style.STROKE); // Style
更改为画线情势canvas.drawCircle(300, 300, 200, paint);

公海710登录网址 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)来动态按键抗锯齿。抗锯齿的效应如下:

公海710登录网址 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
对象来绘制矩形。

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

重载方法drawOval(RectF rect, Paint paint),能够直接填写RectF来绘制椭圆;


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

x 和 y 是点的坐标。点的尺寸能够透过 paint.setStrokeWidth(width)
来安装;点的形象能够由此 paint.setStrokeCap(cap) 来设置:ROUND
画出来是圈子的点,SQUARE 或 BUTT 画出来是方形的点。

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

源点终点的坐标

drawPoints(float[] pts, int offset, int count, Paint paint) / drawPoints(float[] pts, Paint paint) 画点(批量)

同一是画点,它和 drawPoint() 的区分是足以画五个点。pts
那几个数组是点的坐标,每五个成风度翩翩对;offset
表示跳过数组的前多少个数再起来记坐标;count 表示后生可畏共要绘制多少个点
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 /, 4 /
豆蔻梢头共绘制三个点*/, paint);

公海710登录网址 12

drawLines(float[] pts, Paint paint) 批量画线

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


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

唯其如此绘制横着的照旧竖着的扁圆形,无法绘制斜的 left, top, right, bottom
是那么些椭圆的左、上、右、下四个边界点的坐标。
此外,它还应该有二个重载方法 drawOval(RectF rect, Paint
paint),让您能够平素填写 RectF 来绘制椭圆。

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 圆角矩形

left,top,right,bottom是四条边的坐标,rx和ry是圆角的横向半径和纵向半径;

重载方法drawRoundRect(RectF re


ct, float rx, float ry, Paint
paint),让您能够间接填写RectF来绘制圆角矩形;


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

startX, startY, stopX, stopY 分别是线的源点和尖峰坐标。

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

drawArc()是采纳叁个椭圆来陈述弧形的。left,top,right,bottom描述的是以此弧形所在的扁圆形;

startAngle是弧形的胚胎角度(x 轴的正向,即正右的取向,是 0
度的任务;顺时针为正角度,逆时针为负角度卡塔 尔(阿拉伯语:قطر‎;

sweepAngle是弧形划过的角度;

useCenter表示是不是连接到圆心,假如不连接纳圆心,就是弧形,假若连接到圆心,正是扇形。

注:通过 userCenter 的 true 或 false  +  Paint 的 stroke或 fill
能够画出 空心扇形、仅描边弧形、实心扇形、封口弧形;



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

drawLines() 是 drawLine() 的复数版。
float[] points2 =
{100,500,300,500,100,800,500,800,100,500,100,800,300,500,500,800};
canvas.drawLines(points2,paint);

丨drawPath(Path path, Paint paint) 画自定义图形

当上边的章程无法满足绘制目的时用这么些;

经过陈述路线的形式来绘制图形,它的path参数便是用来说述图形路线的靶子;

Path能够描述直线、二遍曲线、二遍曲线、圆、椭圆、弧形、矩形、圆角矩形。把那些图片组成起来,就足以描述出广大错综相连的图片;


drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 画圆角矩形

left, top, right, bottom 是四条边的坐标,rx 和 ry
是圆角的横向半径和纵向半径。

Path 方法第大器晚成类:直接描述路线

1,addXxx(卡塔 尔(阿拉伯语:قطر‎增添子图形

.addCircle (float x, float y, float radius, Direction dir) 添加圆

.addOval (float left, float top, float right, float bottom,
Direction dir) / addOval(RectF oval, Direction dir) 增加椭圆

.addRect (float left, float top, float right, float bottom,
Direction dir) / addRect(RectF rect, Direction dir) 增添矩形

.addRoundRect (RectF rect, float rx, float ry, Direction dir) /
addRoundRect(float left, float top, float right, float bottom, float
rx, float ry, Direction dir) / addRoundRect(RectF rect, float[] radii,
Direction dir) / addRoundRect(float left, float top, float right,
float bottom, float[] radii, Direction dir) 增添圆角矩形

.addArc(float left, float top, float right, float bottom, float
startAngle, float sweepAngle) / addArc(RectF oval, float startAngle,
float sweepAngle) 加多弧形

.addPath(Path path) 增加另四个 Path

2,xxxTo()——画线(直线或曲线卡塔 尔(阿拉伯语:قطر‎

.lineTo(float x, float y) / rLineTo(float x, float y) 画直线;

从此时此刻任务向目的地点画一条直线,x和y是指标位置的坐标。这三个主意的界别是,lineTo(x,
y)的参数是相对坐标,而rLineTo(x, y)的参数是对峙当前地方的对峙坐标(前缀
r 指的正是relatively「相对地」),也等于偏离;

.quadTo(float x1, float y1, float x2, float y2) / rQuadTo(float
dx1, float dy1, float dx2, float dy2) 画二回贝塞尔曲线;

.cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)
/ rCubicTo(float x1, float y1, float x2, float y2, float x3, float
y3) 画二次贝塞尔曲线;

.moveTo(float x, float y) / rMoveTo(float x, float y)
移动到目的地点;

.arcTo(RectF oval, float startAngle, float sweepAngle, boolean
forceMoveTo) / arcTo(float left, float top, float right, float
bottom, float startAngle, float sweepAngle, boolean forceMoveTo) /
arcTo(RectF oval, float startAngle, float sweepAngle) 画弧形

和 Canvas.drawArc()比起来,少了一个参数
useCenter,表示只用来画弧线;多了三个参数
forceMoveTo,true表示拖着画笔到弧形的源点,false表示抬起画笔从弧形源点开首画;

addArc()相当于 forceMoveTo = true的 arcTo();

.close(卡塔 尔(阿拉伯语:قطر‎将绘制轨迹的顶点与起源进行连接,相当于lineTo(源点卡塔尔;

注:当Paint设置style为fill时会自动密闭填充;


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

drawArc() 是使用三个椭圆来说述弧形的。left, top, right, bottom
描述的是以此弧形所在的扁圆形;startAngle 是弧形的苗子角度(x
轴的正向,即正右的来头,是 0
度的地点;顺时针为正角度,逆时针为负角度卡塔 尔(阿拉伯语:قطر‎,sweepAngle
是弧形划过的角度;useCenter
表示是不是连接到圆心,借使不连选取圆心,便是弧形,如若接二连三到圆心,正是扇形。
paint.setStyle(Paint.Style.FILL); // 填充形式
canvas.drawArc(200, 100, 800, 500, -110, 100, true, paint); //
绘制扇形
canvas.drawArc(200, 100, 800, 500, 20, 140, false, paint); // 绘制弧形
paint.setStyle(Paint.Style.STROKE); // 画线方式
canvas.drawArc(200, 100, 800, 500, 180, 60, false, paint); //
绘制不封口的半圆形

公海710登录网址 13

帕特h 方法第二类:扶持的安装或计算

.setFillType(Path.FillType ft)
用来设置图形自相交时的填写算法,别的使用超级少;

FillType有4个值:WINDING(默认)、EVEN_ODD、INVERSE_WINDING、INVERSE_EVEN_ODD

WINDING是「全填充」,而EVEN_ODD是「交叉填充」:

公海710登录网址 14

EVEN_ODD 和 WINDING 的切实可行原理

EVEN_ODD

即 even-odd rule
(奇偶原则卡塔尔:对于平面中的大肆一点,向自由方向射出一条射线,这条射线和图片相交的次数(相交才算,相切不算哦卡塔尔国借使是奇数,则这些点被感到在图片内部,是要被涂色的区域;假设是偶数,则那么些点被感到在图片外界,是不被涂色的区域。还以左右会友的双圆为例:

公海710登录网址 15

射线的取向不在乎,同三个点射向其余方向的射线,结果都是风流倜傥致的,不相信你能够尝试。

从上海体育场面能够看来,射线每穿过图形中的一条线,内外状态就发生二遍切换,那便是干什么EVEN_ODD是三个「交叉填充」的情势。

WINDING

即 non-zero winding rule
(非零环绕数原则卡塔 尔(英语:State of Qatar):首先,它须求您图形中的所无线条都以有绘制方向的:

公海710登录网址 16

下一场,雷同是从平面中的点向自便方向射出一条射线,但计算准则不等同:以 0
为初阶值,对于射线和图表的富有交点,境遇各样顺时针的交点(图形从射线的左臂向右穿过卡塔尔国把结果加
1,遭遇种种逆时针的交点(图形从射线的侧边向左穿过卡塔尔国把结果减
1,最后把具有的交点都算上,获得的结果就算不是
0,则感觉这么些点在图纸内部,是要被涂色的区域;要是是
0,则以为这么些点在图纸外界,是不被涂色的区域。

公海710登录网址 17

和EVEN_ODD相符,射线的大势并不影响结果。

进而,小编面前的老大「简单残忍」的计算,对于WINDING来说并不完全准确:纵然您全数的图片都用同生龙活虎的自由化来绘制,那么WINDING确实是贰个「全填充」的法规;但要是运用不相同的趋平昔绘制图形,结果就不一样等了。

图表的样子:对于增加子图形类方法(如Path.addCircle()Path.addRect()卡塔尔的大方向,由艺术的dir参数来决定,那一个在前边已经讲过了;而对于画线类的不二秘技(如Path.lineTo()Path.arcTo()卡塔 尔(阿拉伯语:قطر‎就更简便了,线的取向正是图片的取向。

故此,完整版的EVEN_ODD和WINDING的功用应该是如此的:

公海710登录网址 18

而INVERSE_EVEN_ODD和INVERSE_WINDING,只是把那三种成效开展反转而已,懂了EVEN_ODD和WINDING,自然也就懂INVEQashqaiSE_EVEN_ODD和INVERSE_WINDING了,扔物线就不讲了。



到此结束,以上正是 Canvas 全体的简要图形的绘图。除了简单图形的绘图, Canvas 还足以选择 drawPath(Path path) 来绘制自定义图形。

drawPath(Path path, Paint paint) 画自定义图形

path.addArc(200, 1200, 400, 1400, 135, 225);
path.arcTo(400, 1200, 600, 1400, 180, 225, false);
path.lineTo(400, 1500);

canvas.drawPath(path, paint); //记得改一下画笔的颜料和填充;

公海710登录网址 19

画叁个慈善送给女对象是或不是浪

Path
能够描述直线、二回曲线、一次曲线、圆、椭圆、弧形、矩形、圆角矩形。把那些图片组成起来,就能够描述出点不清复杂的图样。上面笔者就说一下实际的怎么把那些图片描述出来。

Path 有两类措施,生龙活虎类是一贯描述路径的,另意气风发类是赞助的安装或总结。

丨drawBitmap(Bitmap bitmap, float left, float top, Paint paint) 绘制 Bitmap

drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)

drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)

drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)



Path 方法第生龙活虎类:直接描述路线。

丨drawText(String text, float x, float y, Paint paint) 绘制文字

能够行使Paint设置textSize

先是组: addXxx() ——增加子图形

addCircle(float x, float y, float radius, Direction dir) 添加圆

x, y, radius 那多个参数是圆的中央音信,最终多个参数 dir
是画圆的门道的取向。
顺时针 (CW clockwise) 和逆时针 (CCW counter-clockwise)

其次组:xxxTo() ——画线(直线或曲线卡塔尔

这一组和率先组 addXxx() 方法的界别在于,第后生可畏组是增多的总体密封图形(除了
addPath() 卡塔尔国,而那后生可畏组增添的只是一条线。

lineTo(float x, float y) / rLineTo(float x, float y) 画直线

从脚失去工作位向指标地方画一条直线, x 和 y
是指标地点的坐标。那三个点子的差异是,lineTo(x, y) 的参数是相对坐标,而
rLineTo(x, y) 的参数是相持当前地方的周旋坐标 (前缀 r 指的就是relatively 「相对地」)。

paint.setStyle(Style.STROKE);
path.lineTo(100, 100); // 由目前职分 (0, 0) 向 (100, 100) 画一条直线
path.rLineTo(100, 0); // 由这两天岗位 (100, 100) 向正右方 100
像素的职责画一条直线

公海710登录网址 20

这就是lineTo 和人LineTo的区别

quadTo(float x1, float y1, float x2, float y2) / rQuadTo(float dx1, float dy1, float dx2, float dy2) 画贰次贝塞尔曲线

那条三遍贝塞尔曲线的源点正是当前地点,而参数中的 x1, y1 和 x2, y2
则分级是调节点和终点的坐标。和 rLineTo(x, y) 同理,rQuadTo(dx1, dy1,
dx2, dy2) 的参数也是争执坐标
具体怎样是 贝塞尔曲线 请看这篇扫除文盲贴
http://www.html-js.com/article/1628

cubicTo(float x1, float y1, float x2, float y2, float x3, float y3) / rCubicTo(float x1, float y1, float x2, float y2, float x3, float y3) 画叁次贝塞尔曲线

和方面这几个 quadTo() rQuadTo() 的三次贝塞尔曲线同理,cubicTo() 和
rCubicTo() 是三遍别塞尔曲线。

moveTo(float x, float y) / rMoveTo(float x, float y) 移动到对象地点

甭管是直线照旧贝塞尔曲线,都是以当失业位作为起源,而无法钦定源点。但你能够透过
moveTo(x, y) 或 rMoveTo() 来退换近期地方,进而间接地设置那个点子的源点。

path.lineTo(100, 100); // 画斜线 
path.moveTo(200, 100); // 我移~~
path.lineTo(200, 0); // 画竖线

公海710登录网址 21

moveTo(x, y)
纵然不加多图形,但它会设置图形的起点,所以它是老大重大的多少个帮忙方法。

除此以外,第二组还会有八个特殊的方法: arcTo() 和
addArc()。它们也是用来画线的,但并不采纳当前任务作为弧线的起源。

arcTo(RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(RectF oval, float startAngle, float sweepAngle) 画弧形

其意气风发措施和 Canvas.drawArc() 比起来,少了贰个参数
useCenter,而多了几个参数 forceMoveTo 。

少了 useCenter ,是因为 arcTo() 只用来画弧形而不画扇形,所以不再需求useCenter 参数;而多出去的那几个 forceMoveTo
参数的情致是,绘制是要「抬一下笔移动过去」,照旧「直接拖着笔过去」,差距在于是不是留下移动的印痕。

addArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle) / addArc(RectF oval, float startAngle, float sweepAngle)

又是多个半圆的法子。一个叫 arcTo ,一个叫
addArc(),都以弧形,差距在哪个地方?其实相当轻易: addArc() 只是一个直接行使了
forceMoveTo = true 的简化版 arcTo() 。

close() 密闭当前子图形

它的法力是把当下的子图形密封,即由近年来任务向当前子图形的源点绘制一条直线。

paint.setStyle(Style.STROKE); path.moveTo(100, 100); path.lineTo(200, 100); path.lineTo(150, 150); path.close(); // 使用 close() 密封子图形。等价于 path.lineTo(100, 100)

公海710登录网址 22

close()和 lineTo(源点坐标)是完全等价的。

Path 方法第二类:补助的设置或总括
Path.setFillType(Path.FillType ft) 设置填充格局

后面在说 dir 参数的时候关系, Path.setFillType(fillType)
是用来设置图形自相交时的填写算法的:
办法中填入分化的 FillType 值,就能够有例外的填写效果。FillType
的取值有几个:

  • EVEN_ODD
  • WINDING (默认值)
  • INVERSE_EVEN_ODD
  • INVERSE_WINDING
EVEN_ODD 和 WINDING 的原理

即 even-odd rule
(奇偶原则卡塔尔国:对于平面中的跋扈一点,向自由方向射出一条射线,那条射线和图纸相交的次数(相交才算,相切不算哦卡塔 尔(英语:State of Qatar)借使是奇数,则那个点被以为在图片内部,是要被涂色的区域;假诺是偶数,则那些点被感到在图片外界,是不被涂色的区域。还以左右相交的双圆为例:

公海710登录网址 23

WINDING
即 non-zero winding rule (非零环绕数原则)
率先,它须求您图形中的全部线条都是有绘制方向的:

公海710登录网址 24

然后,同样是从平面中的点向大肆方向射出一条射线,但总结法规不均等:以 0
为早先值,对于射线和图表的有所交点,境遇每一个顺时针的交点(图形从射线的左边手向右穿过卡塔尔把结果加
1,境遇每一种逆时针的交点(图形从射线的右偏向左穿过卡塔 尔(阿拉伯语:قطر‎把结果减
1,最后把全体的交点都算上,获得的结果生机勃勃旦不是
0,则认为这些点在图片内部,是要被涂色的区域;若是是
0,则认为这几个点在图片外界,是不被涂色的区域。

公海710登录网址 25

故此,完整版的 EVEN_ODD
和 WINDING
的功力应该是那般的:

公海710登录网址 26

而 INVERSE_EVEN_ODD和 INVERSE_WINDING,只是把这二种效应举办反转而已。

drawBitmap(Bitmap bitmap, float left, float top, Paint paint) 画 Bitmap

它的重载方法:

drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint) /
drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) /
drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

drawText(String text, float x, float y, Paint paint) 绘制文字

界面里富有的展现内容,都以绘制出来的,满含文字。 drawText()
那一个措施便是用来绘制文字的。参数 text 是用来绘制的字符串,x 和 y
是绘制的源点坐标。
经过 Paint.setTextSize(textSize),可以安装文字的深浅。
大致 canvas的常用方法讲罢了,接下去就是Paint了.

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图