文档章节

Canvas基本的基本使用

最咸的咸鱼
 最咸的咸鱼
发布于 2017/07/06 23:53
字数 916
阅读 9
收藏 0

1.1. Canvas绘制基本图形

①绘制线,矩形,圆角矩形,圆形,环形,弧形等

相关api:

Paint(画笔)相关api:
//给Paint设置颜色

paint.setColor(Color.RED);
//用此Paint绘制出的图形没有锯齿,但会损耗性能

paint.setAntiAlias(true);
//设置Paint样式(不填充),如:绘制一个空心圆,则设置如下样式

paint.setStyle(Paint.Style.STROKE);

//定义一个点,包含x和y坐标

PointF point= new PointF(x, y);

//绘制一个圆

参数1,2:圆心坐标

//参数3:半径

//参数4:画笔

canvas.drawCircle(x, y, radius, paint);

//绘制直线

//参数1,2:起点的x,y坐标

//参数3,4:起点的x,y坐标

canvas.drawLine(x1, y1,x2,y2, paint);

//定义一个矩形

//参数1:矩形的左边相对于屏幕左边缘的距离

//参数2:矩形的上边相对于屏幕上边缘的距离

//参数3:矩形的右边相对于屏幕左边缘的距离

//参数4:矩形的下边相对于屏幕上边缘的距离

RectF rect= new RectF(l, t, r, b);

//绘制弧形

//参数1:绘制弧形依赖的矩形,绘制出的弧形会与此矩形内切

//参数2:弧形的起始角度

//参数3:弧形的弧度

canvas.drawArc(rect, startAngle,sweepAngle
, false, paint);
//绘制一个矩形

canvas.drawRect(rect,paint);

//绘制一个点

//参数1,2:绘制的点的x,y坐标

canvas.drawPoint(x,y,paint);

//绘制多个点的x,y坐标

float[] pts = {x1, y1, x2, y2, x3,y3...};

//参数2:从pts集合中的哪个元素开始绘制(从哪里开始,哪里就作为x坐标,后面是y坐标,依此类推)

//参数3:包含pts集合中共几个元素
canvas.drawPoints(pts,offset,count,paint);

canvas.drawRoundRect(rectF,30f,30f,paint);

canvas的变换处理:

Android中的坐标系:默认是以屏幕左上角为原点,x方向向右为+,y方向向下为正

绘制界面是基于坐标系绘制的

若调用了canvas的translate或rotate方法相当于对坐标系进行了平移和旋转,基于旋转后的坐标系进行绘制工作.

1.2. Path绘制复杂图形

//移动到某个点

path.moveTo(x,y);

//绘制贝塞尔曲线

//贝塞尔曲线包含起始点,结束点和控制点,此api默认以path所在的点为起始点

//参数1,2:控制点的x,y坐标

//参数3,4:结束点的x,y坐标

path.quadTo(controlPointX,controlPointY,endPointX,endPointY);

//绘制一条直线,默认以path所在的点为起始点

path.lineTo(x,y);

//绘制一个弧形

//参数1:弧形内接的矩形

//参数2:弧形的起始角度

//参数3:弧形的弧度

path.arcTo(rectf,startAngle,sweepAngle);

//绘制一个路径

canvas.drawPath(path,paint);

1.3. 绘制文本

//在画布上绘制文本

//参数2,3:绘制文本的基准点的x和y坐标

canvas.drawText(text,x,y,paint);

//设置画笔的颜色

paint.setColor(Color.GREEN);

//设置画笔绘制的文本字体大小
paint.setTextSize(70);

//设置粗体
paint.setFakeBoldText(true);

//设置字体粗细

paint.setStrokeWidth(5);
//设置绘图样式 为填充

paint.setStyle(Paint.Style.FILL);
//设置绘图样式 为描边
paint.setStyle(Paint.Style.STROKE);
//设置绘图样式 为填充且描边
paint.setStyle(Paint.Style.FILL_AND_STROKE);
//绘制文本的基准点(240,400)在文本内容的中间
paint.setTextAlign(Paint.Align.CENTER);
//绘制文本的基准点(240,400)在文本内容的左边
paint.setTextAlign(Paint.Align.LEFT);

//绘制文本的基准点(240,400)在文本内容的右边
paint.setTextAlign(Paint.Align.CENTER);
//设置文本是否有下划线
paint.setUnderlineText(true);
//设置文本是否有删除线
paint.setStrikeThruText(true);

//设置文本的x方向上的缩放
paint.setTextScaleX(2);

1.4. Canvas的其他处理

注:canvas在做下列处理前必须先调用save方法处理后要调用restore方法

1,平移

canvas.translate(100,0);

2,旋转

canvas.rotate(300);

3,缩放

© 著作权归作者所有

共有 人打赏支持
最咸的咸鱼
粉丝 1
博文 3
码字总数 2366
作品 0
武汉
程序员
私信 提问
HTML5 Canvas(画布)教程 – 图像处理

本文是从 HTML 5 Canvas Tutorial - Displaying Images 这篇文章翻译而来。 Canvas 标记很多年前就被当作一个新的HTML标记成员加入到了HTML5标准中。在此之前,人们要想实现动态的网页应用,...

红薯
2011/11/25
1K
8
Html5 学习系列(五)Canvas绘图API快速入门(2)

Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来。接下里我会在本文中给各位介绍Canvas的其他API:绘制线条、绘制椭圆、绘制图片、图片处理等...

aicoder
2014/08/29
0
0
轻量级 Canvas 绘图库 - OkayPainter

OkayPainter 是一个轻量级的Canvas框架库,提供了Canvas基本图形图像、动画、层、鼠标键盘事件管理机制。 使用OkayPainter OkayPainter 码云地址:https://gitee.com/djxfire/OkayPainter ,...

Janwool
05/21
0
0
Android中TextView文字镂空效果的实现

最近在做需求的时候,设计小姐姐提了个效果,说需要TextView展示文字的时候要镂空效果,也就是文字和背景相交的地方是透明的效果就像下边这张图 虽然我刚开始没有什么思路,但是我可以googl...

HumorousMan
10/01
0
0
HTML 5 canvas —— 基本语法

目录 简述 canvas 基础 2D context API 小节 简述 HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 元素。HTML 5 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。...

程明卫
2011/04/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
今天
2
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
3
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
今天
3
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
今天
3
0
Terraform配置文件(Terraform configuration)

Terraform配置文件 翻译自Terraform Configuration Terraform用文本文件来描述设备、设置变量。这些文件被称为Terraform配置文件,以.tf结尾。这一部分将讲述Terraform配置文件的加载与格式。...

buddie
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部