文档章节

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
轻量级 Canvas 绘图库 - OkayPainter

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

Janwool
05/21
0
0
Html5 学习系列(五)Canvas绘图API快速入门(2)

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

aicoder
2014/08/29
0
0
HTML 5 canvas —— 基本语法

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

程明卫
2011/04/01
0
0
画影图形: SVG & Canvas Shapes

画影图形指描画犯人面影,悬赏通缉。这里用法明显有问题,不过取其表义而已。 在一个前端看来,画图有三种方法,Cavas,SVG 以及 CSS。至于三者优劣,将在此针对各种图形做逐一比较,有方,圆...

shanyue
07/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

20180925 df与du命令、fdisk磁盘分区

df 命令 disk filesystem的缩写,查看已挂载磁盘的总容量、使用容量、剩余容量信息。 [root@centos01 ~]# dfFilesystem 1K-blocks Used Available Use% Mounted on/dev/sda3 27...

野雪球
25分钟前
0
0
Shell编程(expect同步文件、指定host和同步文件、构建文件分发系统、批量执行命令)

expect脚本同步文件 需求:自动同步文件 实验准备: A机器:192.168.248.130 B机器:192.168.248.129 实现: 1.A机器编写4.expect脚本文件,内容如下所示: #!/usr/bin/expectset passwd "...

蛋黄_Yolks
51分钟前
2
0
ppwjs之bootstrap颜色:背景颜色

<!DOCTYPT html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>ppwjs欢迎您</title><link rel="icon" href="/favicon.ico" ......

ppwjs
51分钟前
1
0
Ubuntu与 Fedora之对比

大家好。今天我将重点介绍两个流行的Linux发行版之间的一些特性和差异; Ubuntu 18.04和Fedora 28。它们都有自己的包管理; Ubuntu使用DEB,而Fedora使用RPM,但它们都具有相同的桌面环境(GNO...

linuxprobe16
55分钟前
2
0
线性代数入门

线性代数的概念对于理解机器学习背后的原理非常重要,尤其是在深度学习领域中。它可以帮助我们更好地理解算法内部到底是怎么运行的,借此,我们就能够更好的做出决策。所以,如果你真的希望了...

牛奋Debug
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部