绘制基础,中自定义View

2019-11-03 09:57栏目:网络操作
TAG:

澳门新葡亰平台游戏 1

Bitmap

质地来源于:扔物线的技巧分享 http://hencoder.com/

多元文章之 Android中自定义View(生机勃勃)
多如牛毛随笔之 Android中自定义View(二)
排山倒海文章之 Android中自定义View(三)
层层文章之 Android中自定义View(四)
生龙活虎连串随笔之 Android中自定义View(xml绘图)
本文来源:
http://www.jianshu.com/u/a1251e598483

线上箭头表示画线的矛头。WINDING方式和ALTEHavalNATE格局都会填充多个密闭的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 的驾驭和收获,也是多少个记录吧,等到用的时候相比比较容易于找到.

澳门新葡亰平台游戏 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") 会在原始的绘图效果上加生机勃勃层半透明的甲子革命遮罩。
恍如的不二诀窍还会有 draw途达GB(int r, int g, int b) 和 drawAPAJEROGB(int a, int r, int g, int b) ,它们和 drawColor(color) 只是利用办法各异,作用都以相符的。

图片的坐标(按一个100*100单位的区域设定卡塔 尔(阿拉伯语:قطر‎存款和储蓄在aptFigure数组中。这一个坐标会依据客商去的增长幅度和惊人按比例缩放。程序突显七个图形,一个利用ALTE中华VNATE填充方式,另叁个利用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 轴,下正上负(注意,是下正上负,不是上正下负,和读书时候学的坐标系方向分裂等卡塔 尔(英语:State of Qatar)。也正是底下这几个样子。

澳门新葡亰平台游戏 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 对象来绘制矩形。

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);

澳门新葡亰平台游戏 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); // 绘制不封口的半圆形

澳门新葡亰平台游戏 13

Path 方法第二类:协助的安装或计算

.setFillType(Path.FillType ft) 用来安装图形自相交时的填写算法,其余应用比较少;

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

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

澳门新葡亰平台游戏 14

EVEN_ODD 和 WINDING 的求实原理

EVEN_ODD

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

澳门新葡亰平台游戏 15

射线的趋势不留意,同三个点射向此外方向的射线,结果都是同等的,不相信你能够实践。

从上海体育场地能够见见,射线每穿过图形中的一条线,内外状态就时有发生一回切换,那就是怎么EVEN_ODD是三个「交叉填充」的方式。

WINDING

即 non-zero winding rule (非零环绕数原则卡塔尔国:首先,它须要您图形中的所有线条都以有绘制方向的:

澳门新葡亰平台游戏 16

接下来,形似是从平面中的点向放肆方向射出一条射线,但计算准绳不相似:以 0 为开头值,对于射线和图纸的持有交点,遭遇每一个顺时针的交点(图形从射线的右趋向右穿过卡塔 尔(英语:State of Qatar)把结果加 1,境遇每一种逆时针的交点(图形从射线的出手向左穿过卡塔 尔(阿拉伯语:قطر‎把结果减 1,最终把富有的交点都算上,获得的结果如若不是 0,则感觉那几个点在图纸内部,是要被涂色的区域;如若是 0,则感觉那些点在图纸外界,是不被涂色的区域。

澳门新葡亰平台游戏 17

和EVEN_ODD相同,射线的矛头并不影响结果。

所以,笔者前边的十二分「不难狠毒」的下结论,对于WINDING来讲并不完全准确:倘令你具有的图样都用相符的倾向来绘制,那么WINDING确实是三个「全填充」的准绳;但风流倜傥旦应用差异的来头来绘制图形,结果就不等同了。

图表的自由化:对于增添子图形类方法(如Path.addCircle()Path.addRect()卡塔 尔(英语:State of Qatar)的趋势,由艺术的dir参数来决定,这几个在近日早就讲过了;而对此画线类的诀窍(如Path.lineTo()Path.arcTo()卡塔 尔(阿拉伯语:قطر‎就更简约了,线的方向正是图片的趋向。

就此,完整版的EVEN_ODD和WINDING的意义应该是如此的:

澳门新葡亰平台游戏 18

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



到此停止,以上正是 Canvas 全数的精简图形的绘图。除了轻松图形的绘图, Canvas 仍是可以运用 draw帕特h(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); //记得改一下画笔的颜料和填充;

澳门新葡亰平台游戏 19

画三个爱心送给女对象是否浪

帕特h 能够描述直线、贰遍曲线、一遍曲线、圆、椭圆、弧形、矩形、圆角矩形。把那个图片组成起来,就足以描述出过多长短不一的图片。下边作者就说一下切实可行的怎么把这几个图片描述出来。

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 像素的职务画一条直线

澳门新葡亰平台游戏 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); // 画竖线

澳门新葡亰平台游戏 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)

澳门新葡亰平台游戏 22

close()和 lineTo(起源坐标)是全然等价的。

Path 方法第二类:协理的安装或总结
Path.setFillType(帕特h.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)假设是奇数,则这几个点被认为在图片内部,是要被涂色的区域;假若是偶数,则那么些点被感到在图片外界,是不被涂色的区域。还以左右会友的双圆为例:

澳门新葡亰平台游戏 23

WINDING
即 non-zero winding rule (非零环绕数原则)
先是,它要求你图形中的所无线条都是有绘制方向的:

澳门新葡亰平台游戏 24

然后,相似是从平面中的点向任性方向射出一条射线,但总计准则不一样样:以 0 为初步值,对于射线和图表的兼具交点,蒙受各样顺时针的交点(图形从射线的左侧向右穿过卡塔 尔(英语:State of Qatar)把结果加 1,遇到每一种逆时针的交点(图形从射线的入手向左穿过卡塔尔把结果减 1,最后把富有的交点都算上,拿到的结果假诺不是 0,则感觉那个点在图纸内部,是要被涂色的区域;假诺是 0,则感到那些点在图片外界,是不被涂色的区域。

澳门新葡亰平台游戏 25

就此,完整版的 EVEN_ODD
和 WINDING
的功效应该是这般的:

澳门新葡亰平台游戏 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了.

版权声明:本文由澳门新葡亰平台游戏发布于网络操作,转载请注明出处:绘制基础,中自定义View