Canvas笔记
JasonDev324

对绘图的基本理解

绘图的两个基本工具是Paint跟Canvas

Canvas 决定画什么(简称View) 例如 点、线、面、圆
Paint 决定怎么画(简称Style) 例如 颜色、线条粗细等。

Paint的常用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//设置画笔边框粗细,值越大,越粗
setStrokeWidth(float width);

//设置alpha不透明度,a范围为0~255,值越低,越透明
setAlpha(int a)

//是否抗锯齿,true为抗锯齿
setAntiAlias(boolean a)

//设置颜色,设置RGB颜色
//用法1:setColor(Color.RED);
//用法2:setColor(Color.parseColor("#1abc9c"));
setColor(int color)

//画笔类型 STROKE空心 FILL 实心
setStyle(Style style)


//设置图形重叠时的处理方式,如合并,取交集或并集,经常用来制作橡皮的擦除效果
setXfermode(xfermode);

如果要绘制多边形,可以通过Path类 ,然后通过drawPath方法来画出该形状。

Canvas的常用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//画矩形
//drawRect(new Rect(x轴起始坐标,y轴起始坐标,x轴结束坐标,y轴结束坐标)); 可理解为对角线两个点之间形成的矩形,即起始点、结束点
drawRect(Rect r, Paint paint);

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

//绘制圆角矩形
drawRoundRect(RectF r,Paint paint);

//绘制圆弧
//理解1.oval是矩形、startAngle是开始角度,sweepAngle是扫描过的角度,useCenter为true绘制扇形,false绘制圆弧。
//理解2.瞬时间方向,弧形角度增大。
//理解3.sweepAngle是指扫描角度,即一个扇形,例如开始角度-180,扫描角度为270,则形状以x负半轴开始扫描,扫描3个90度的扇形。
//用法
//先绘制一个正方形,然后设置起始角度,扫描角度。见示例。

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

//将画布以(x,y)点为中心。
//translate(mWidth / 2, mHeight / 2);画布以屏幕中心点为原点
translate(float dx, float dy)

示例 - 绘制弧形

image

1
2
3
4
5
6
7
8
//绘制红色的矩形
paint.setColor(Color.RED);
Rect rect = new Rect(-40,-40,40,40);
canvas.drawRect(rect,paint);

//绘制蓝色扇形 0-90度(四分之一圆)
paint.setColor(Color.BLUE);
canvas.drawArc(rect,0,90,true,paint);

示例 - 绘制三角形

1
2
3
4
5
6
Path path = new Path();
path.moveTo(10,340); //设置起始位置坐标
path.lineTo(70,340);//画底部的线
path.lineTo(35,290);//画另外一条边、最后一条自动连接 不需再画
path.close();
canvas.drawPath(path,p);

技巧

关于画文字:
如何让drawText内容居中?
1.画存放文字的矩形。
2.paint设置TextAlign,Paint.Align.CENTER
3.drawText使用矩形的centerX、bottom作为中心点

path 画线时,若path调用了close,则setStrokeCap无效
画矩形、椭圆、扇形、弧线、文字都需要先画一个矩形,(获取其对角线两个点的坐标即可)

drawArc(float left, float top, float right, float bottom, float startAngle,
float sweepAngle, boolean useCenter, @NonNull Paint paint)
关于画扇形、弧线:
1.顺时针为正角度。
2.startAngle表示角度,sweepAngle表示变化的角度(例如 -60表示逆时针旋转60度),useCenter表示扇形是否连接到中心点。

关于Path的使用:
1.addArc用于绘制弧线
2.lineTo、arcTo都用于画线。arcTo用于画弧线。forceMoveTo表示是否强制移动到弧线起点。
arcTo(float left, float top, float right, float bottom, float startAngle,
float sweepAngle, boolean forceMoveTo)

颜色的处理:
1.setColor、setRGB
2.setColorFilter(设置颜色过滤)、setShader (设置各种渐变)
3.setXferMode(设置图层显示方式)
线的处理:
1.setStrokeWidth
2.setStrokeCap(设置线头形状)
3.setStrokeJoin(设置拐角形状)
4.setStrokeMiter(设置拐角延长线)
5.setPathEffect(设置轮廓的形状)

关于图层的显示:

  1. 先画的叫DST,后画的是SRC
  2. DST_OVER表示A在B上
  3. DST_OUT表示在A上挖空B
  4. DST_IN表示重叠部分变成前者的颜色,不重叠部分变成白色

canvas.translate(x,y)表示绘制容器相对原来的起始坐标,横向移动了x,纵向移动了y,并不是表示将绘制容器的起始点移动到点(x,y)

绘制文字:
1.drawText
2.drawTextOnPath
3.如何绘制多行文字
StaticLayout
4.setTypeface设置字体
paint.setTypeface(Typeface.createFromAsset(getContext().getAssets(), “Satisfy-Regular.ttf”));
5.setFakeBoldText设置粗体
6.setLetterSpacing设置间距
7.getTextBounds获取文字的显示范围
8.measureText测量文字的宽度并返回

优秀文章参考
Paint参考

弧度知识

Powered by Hexo & Theme Keep
Total words 22k Unique Visitor Page View