Canvas对画布及文字控制基础API学习
这次纯API练习,比较简单,但是是为了之后的结合项目打基础的,所以也不能忽视它,下面开始:
Canvas的平移、旋转、缩放
这里还是以上次画那个青春痘的DEMO为例【http://www.cnblogs.com/webor2006/p/7341697.html】,在此基础上进行画步操作,先贴一下目前的代码及效果:
/*** 自定义View操练----画一个形象可爱的笑脸^_^*/ public class MyView extends View {private Paint paint;/* 笑脸圆的坐标 */private final PointF facePoint = new PointF(240, 400);/* 笑脸圆的半径 */private final int faceRadius = 200;/* 眉毛线开始坐标 */private final PointF eyebrowStartPoint = new PointF(140, 250);/* 眉毛线结束坐标 */private final PointF eyebrowEndPoint = new PointF(340, 250);/* 鼻子中竖线开始坐标 */private final PointF noseLine1StartPoint = new PointF(240, 250);/* 鼻子中竖线结束坐标 */private final PointF noseLine1EndPoint = new PointF(240, 500);/* 鼻子左勾线结束坐标,其它的开始坐标为noseLine1EndPoint */private final PointF noseLine2EndPoint = new PointF(150, 450);/* 左眼圆的坐标 */private final PointF leftEyePoint = new PointF(170, 330);/* 右眼圆的坐标 */private final PointF rightEyePoint = new PointF(310, 330);/* 眼睛圆的半径 */private final int eyeRadius = 60;/* 嘴的圆弧外接矩形 *///参数为left(距屏幕左边的x坐标位置)、top(距屏幕左边的x坐标位置)、right(距屏幕左边的x坐标位置)、bottom(距屏幕左边的x坐标位置)private final RectF mouseRectF = new RectF(60, 300, 420, 550);/* 嘴的圆弧起始角度 */private final float startAngle = 380f;/* 嘴的圆弧的弧度 */private final float sweepAngle = 140f;/* 左美丽青春痘 */private final float[] leftAcnePoints = {130, 414, 111, 442, 152, 442, 130, 470, 130, 442};/* 左美丽青春痘 */private final float[] rightAcnePoints = {350, 414, 331, 442, 372, 442, 350, 470, 350, 442};/* 左朵耳相关的坐标点,用Path将其连接优化耳朵 */private final PointF leftEarMovePoint = new PointF(65, 300);private final PointF leftEarBezierEndPoint1 = new PointF(40, 400);private final PointF leftEarBezierEndPoint2 = new PointF(65, 500);private final PointF leftEarBezierControlPoint1 = new PointF(0, 336);private final PointF leftEarBezierControlPoint2 = new PointF(0, 460);/* 右朵耳相关的坐标点,用Path将其连接优化耳朵 */private final PointF rightEarMovePoint = new PointF(413, 300);private final PointF rightEarBezierEndPoint1 = new PointF(440, 400);private final PointF rightEarBezierEndPoint2 = new PointF(413, 500);private final PointF rightEarBezierControlPoint1 = new PointF(480, 336);private final PointF rightEarBezierControlPoint2 = new PointF(480, 460);public MyView(Context context) {this(context, null);}public MyView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init() {paint = new Paint();//设置画笔的颜色 paint.setColor(Color.RED);//设置抗锯齿:开启它会有些性能损耗,但是画面更加平滑~paint.setAntiAlias(true);//设置画笔的样式:绘制空心图形 paint.setStyle(Paint.Style.STROKE);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//1、画个圆脸://参数1,2:圆心的x,y坐标//参数3 radius:圆的半径 canvas.drawCircle(facePoint.x, facePoint.y, faceRadius, paint);//2、画一字眉://参数1,2:线的起始坐标点//参数3,4:线的结束坐标点canvas.drawLine(eyebrowStartPoint.x, eyebrowStartPoint.y, eyebrowEndPoint.x, eyebrowEndPoint.y, paint); //画一个眉毛,这里用一横线来形象的代表~~//3、画勾鼻:canvas.drawLine(noseLine1StartPoint.x, noseLine1StartPoint.y, noseLine1EndPoint.x, noseLine1EndPoint.y, paint); //画鼻子中竖线canvas.drawLine(noseLine1EndPoint.x, noseLine1EndPoint.y, noseLine2EndPoint.x, noseLine2EndPoint.y, paint); //画鼻子左勾线//4、画两眼:canvas.drawCircle(leftEyePoint.x, leftEyePoint.y, eyeRadius, paint);//画左眼睛,用萌萌哒的正圆来形象的代表~~canvas.drawCircle(rightEyePoint.x, rightEyePoint.y, eyeRadius, paint);//画右眼睛,用萌萌哒的正圆来形象的代表~~//5、画嘴://参数1 RectF:矩形,是圆弧所在圆的外接矩形//参数2 startAngle:弧的起始角度//参数3 sweepAngle:弧的弧度//参数4 useCenter: 如果为true则会以圆中心画一个弧;如果为false则只要一个弧线,没有中心点到弧的一个连线canvas.drawArc(mouseRectF, startAngle, sweepAngle, false, paint);//for test:看一下是不是刚好圆弧就是在外切矩形里面//canvas.drawRect(mouseRectF, paint);//6、画美丽青春痘://参数1 pts: 绘制的点的坐标集合,[x0 y0 x1 y1 x2 y2 ...]//参数2 offset: 参数1中的这么一串数字哪个表示X,哪个表示Y,则由此参数决定,也就是指定参数1中哪个点作为起始点作为横坐标,然后依次顺延//比如:如果传0,则第一个数表示x、第二个数表示y;而如果传1则第二个数是x,第三个数是y,之后的一次顺延//参数3 count: 需要使用集合中的几个元素canvas.drawPoints(leftAcnePoints, 0, leftAcnePoints.length, paint);//画左美丽青春痘canvas.drawPoints(rightAcnePoints, 0, rightAcnePoints.length, paint);//画右美丽青春痘//7、画耳朵方案三【利用贝塞尔曲线终极优化】://利用path来优化耳朵,之前是一个太不真实的矩形代替滴Path leftEarPath = new Path();leftEarPath.moveTo(leftEarMovePoint.x, leftEarMovePoint.y);leftEarPath.quadTo(leftEarBezierControlPoint1.x, leftEarBezierControlPoint1.y, leftEarBezierEndPoint1.x, leftEarBezierEndPoint1.y);leftEarPath.quadTo(leftEarBezierControlPoint2.x, leftEarBezierControlPoint2.y, leftEarBezierEndPoint2.x, leftEarBezierEndPoint2.y);canvas.drawPath(leftEarPath, paint);Path rightEarPath = new Path();rightEarPath.moveTo(rightEarMovePoint.x, rightEarMovePoint.y);rightEarPath.quadTo(rightEarBezierControlPoint1.x, rightEarBezierControlPoint1.y, rightEarBezierEndPoint1.x, rightEarBezierEndPoint1.y);rightEarPath.quadTo(rightEarBezierControlPoint2.x, rightEarBezierControlPoint2.y, rightEarBezierEndPoint2.x, rightEarBezierEndPoint2.y);canvas.drawPath(rightEarPath, paint);} }
记住这张笑脸的位置,下面的实验会对其进行位置变换,可以有个感观上的认识。
①、Canvas的平移:
先来贴一下官网平移API的介绍:
下面将画布的x坐标平移200,看下效果:
编译运行:
效果比较简单,但是需要用坐标系的概念去理解它,如下:
②、Canvas的旋转:
先将①实验的代码还原,基于正脸进行旋转实验,先上官网apI介绍:
下面实验下,将画片旋转-45度:
编译运行:
如何理解?还得去分析坐标系,如图:
③、Canvas的缩放:
继续先将②的测试代码还原,先看一下官方API的介绍:
下面看代码:
编译运行:
由于比较好理解,就不多解释,不过这里有个注意点:
推荐写法是在做上面几个画布动作之前先调用save(),等操作处理完之后,再调用restore方法,具体如下:
@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.save();//平移画布 // canvas.translate(200, 0);//旋转画布 // canvas.rotate(-45);//缩放画布canvas.scale(0.2f, 0.2f);//1、画个圆脸://参数1,2:圆心的x,y坐标//参数3 radius:圆的半径 canvas.drawCircle(facePoint.x, facePoint.y, faceRadius, paint);//2、画一字眉://参数1,2:线的起始坐标点//参数3,4:线的结束坐标点canvas.drawLine(eyebrowStartPoint.x, eyebrowStartPoint.y, eyebrowEndPoint.x, eyebrowEndPoint.y, paint); //画一个眉毛,这里用一横线来形象的代表~~//3、画勾鼻:canvas.drawLine(noseLine1StartPoint.x, noseLine1StartPoint.y, noseLine1EndPoint.x, noseLine1EndPoint.y, paint); //画鼻子中竖线canvas.drawLine(noseLine1EndPoint.x, noseLine1EndPoint.y, noseLine2EndPoint.x, noseLine2EndPoint.y, paint); //画鼻子左勾线//4、画两眼:canvas.drawCircle(leftEyePoint.x, leftEyePoint.y, eyeRadius, paint);//画左眼睛,用萌萌哒的正圆来形象的代表~~canvas.drawCircle(rightEyePoint.x, rightEyePoint.y, eyeRadius, paint);//画右眼睛,用萌萌哒的正圆来形象的代表~~//5、画嘴://参数1 RectF:矩形,是圆弧所在圆的外接矩形//参数2 startAngle:弧的起始角度//参数3 sweepAngle:弧的弧度//参数4 useCenter: 如果为true则会以圆中心画一个弧;如果为false则只要一个弧线,没有中心点到弧的一个连线canvas.drawArc(mouseRectF, startAngle, sweepAngle, false, paint);//for test:看一下是不是刚好圆弧就是在外切矩形里面//canvas.drawRect(mouseRectF, paint);//6、画美丽青春痘://参数1 pts: 绘制的点的坐标集合,[x0 y0 x1 y1 x2 y2 ...]//参数2 offset: 参数1中的这么一串数字哪个表示X,哪个表示Y,则由此参数决定,也就是指定参数1中哪个点作为起始点作为横坐标,然后依次顺延//比如:如果传0,则第一个数表示x、第二个数表示y;而如果传1则第二个数是x,第三个数是y,之后的一次顺延//参数3 count: 需要使用集合中的几个元素canvas.drawPoints(leftAcnePoints, 0, leftAcnePoints.length, paint);//画左美丽青春痘canvas.drawPoints(rightAcnePoints, 0, rightAcnePoints.length, paint);//画右美丽青春痘//7、画耳朵方案三【利用贝塞尔曲线终极优化】://利用path来优化耳朵,之前是一个太不真实的矩形代替滴Path leftEarPath = new Path();leftEarPath.moveTo(leftEarMovePoint.x, leftEarMovePoint.y);leftEarPath.quadTo(leftEarBezierControlPoint1.x, leftEarBezierControlPoint1.y, leftEarBezierEndPoint1.x, leftEarBezierEndPoint1.y);leftEarPath.quadTo(leftEarBezierControlPoint2.x, leftEarBezierControlPoint2.y, leftEarBezierEndPoint2.x, leftEarBezierEndPoint2.y);canvas.drawPath(leftEarPath, paint);Path rightEarPath = new Path();rightEarPath.moveTo(rightEarMovePoint.x, rightEarMovePoint.y);rightEarPath.quadTo(rightEarBezierControlPoint1.x, rightEarBezierControlPoint1.y, rightEarBezierEndPoint1.x, rightEarBezierEndPoint1.y);rightEarPath.quadTo(rightEarBezierControlPoint2.x, rightEarBezierControlPoint2.y, rightEarBezierEndPoint2.x, rightEarBezierEndPoint2.y);canvas.drawPath(rightEarPath, paint);canvas.restore();}
绘制文本
这里用一个新的工程来实验,其代码结构比较简单,一个Activity,一个自定义的view:
①、绘制文本:
先看一下官方API:
比较好理解:
编译运行:
但是字体有点小,于是乎看②
②、设置文本大小:
太小儿科上,直接上代码,不解释:
编译运行:
③、设置文本粗体:
④、设置文本下划线:
编译运行:
⑤、设置文本中划线:
⑥、设置文本对齐方式:
这个有必要解释一下,先看下官网API:
其中有三种对齐方式:
下面先上代码看结果:
居中对齐:
编译运行:
左对齐:
编译运行:
右对齐:
编译运行:
呃~~发现问题木有,居然向左对齐文字在屏幕偏右,而向右对齐文字在屏幕偏右,这是为啥呢,下面解释一下:
而对齐方式就是依据上面的基准点来的,规则如下:
居中对齐,则是基准点位于文本的中间;
居右对齐,则是基准点位于文本的右边;
居左对齐,则是基准点位于文本的左边;
⑦、设置文本x方向缩放:
先看一下官网API:
下面看下代码效果:
编译运行:
也就是X横向扩宽了2倍,但是木有对Y进行扩宽的api。
转载于:https://www.cnblogs.com/webor2006/p/7400259.html
Canvas对画布及文字控制基础API学习相关推荐
- html5画布funcition,2020前端基础知识学习第一节(示例代码)
一.选择题 1. 浏览器端的存储技术有哪些() A.cookie B.localStorage C.session D.userData 答案:A B D 分析:cookie通常用于存储用户等登录信息 ...
- HTML5 Canvas 基础API和实例
开发HTML代码是一件简单的事情,一个文字编辑器,然后一个支持HTML5的浏览器即可(本人的浏览器是Firefox8.0.1).了解HTML的朋友应该知道,HTML5中最让人兴奋的API是canvas ...
- H5 canvas基础入门到捕鱼达人小游戏实现(3)-canvas运动入门,渐变,文字渲染,阴影
上一篇主要讲解了矩形柱状图,弧形和饼图的绘制,但是离我们的目标还是有点远,不要紧,我们基础api都还没有学习完,今天继续. 本节主要内容 - canvas画板制作 - 块的直线运动 - 粒子运动 - ...
- canvas在画布上创建向上下左右3D影子文字
canvas在画布上创建向上下左右3D影子文字 简单实现canvas中的文字3D影子;如有代码问题请留言,谢谢; <!DOCTYPE html> <html><head& ...
- android画布设置最外层,Android自定义View高级(三)-Canvas之画布操作
一.Canvas简介 Canvas我们可以称之为画布,能够在上面绘制各种东西,是Android平台2D图形绘制的基础. 二.Canvas的常用操作 操作类型 相关API 备注 绘制颜色 drawCol ...
- 【canvas 图形画布标签】(使用详解)
canvas 图形画布标签 1. 如何定义一个 图形画布 ? 1.1 canvas 图形画布 标签的属性 有哪些 ? 1.2 canvas 图形画布的 基本用法 有哪些 ? 1.3 如何使用 canv ...
- HTML5中的canvas(画布)
HTML5中的canvas(画布) 1.关于canvas的简介 1.canvas是HTML5标签,表示画布,canvas只是作为图像绘制的容器,所有的绘制工作都在脚本JavaScript内部完成. 2 ...
- 【Vue知识点- No2.】vue脚手架、基础API
No2.vue脚手架.基础API 必安装-vue-devtools 搜索vue-devtools回车-然后添加至Chrome等待下载后自动安装-右上角显示已经添加即代表成功 vscode-插件补充 v ...
- vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件 安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
- plc维修入门与故障处理实例_电气控制基础+PLC编程入门+工程应用实例
以S7-300/400PLC为主线 电气控制基础+PLC编程入门+工程应用实例 点击图片 购买 编辑推荐1.西门子S7300/400PLC应用广.市场占有率高 2.本书通过大量的实验案例和真实的工程 ...
最新文章
- Jetson TX1使用usb camera采集图像 (1)
- Python:使用SWIG编写C语言扩展
- LifeCycle源码解读
- 对数据进行插入操作并且获取主键的值
- jpa 手动预编译_编译时检查JPA查询
- 7.16模块及软件开发目录规范
- Hystrix原理讲解
- 身为程序员的唐僧说:只要我不死,就能取到真经!
- non linear processor
- Hi3518EV200实现H264视频采集的源码及流程详解(不依赖SAMPLE库)
- 肯德尔系数怎么分析_肯德尔和谐系数
- CAShapeLayer把图片做成圆形效果
- Google, with new Pixel and camera, is serious about devices
- 刚申请的博客,就发一个老师让做的“一分钟打动面试官”作业做为纪念吧!!!...
- Android打开自启动设置页面
- 华师大计算机学院院士,华师大新建4大学院1个研究院顺应AI发展
- Leetcode 2214. Minimum Health to Beat Game [Python]
- 如何快速定位 elastic search 运行出现的 bug HTTP/1.1 400 Bad Request type is missing VALUE_NUMBER_INT
- Q-Learning 、Sarsa与 DQN算法
- Open3D RANSAC算法拟合分割多条直线