View绘制系列(10)

Wesley13
• 阅读 693

Canvas基础变换

前面学习了Canvas相关的一些绘制方法,不知道大家发现没?我们都是根据左上角(0,0)点算出来新的坐标,然后再绘制,这样明显不符合我们平常基于坐标原点绘制的习惯,那么我们能不能直接在原点绘制图形,然后通过操作Canvas来实现移动到目标位置呢?答案是肯定的,这就需要用到Canvas变换方法了。

Canvas变换方法总体分为四类:平移,旋转,放缩,错切。

平移

代码如下:

@Overrideprotected void onDraw(Canvas canvas) {    super.onDraw(canvas);    //移动画布坐标原点到View几何中心    canvas.translate(getWidth()/2,getHeight()/2);    Paint paint = new Paint();    paint.setStyle(Paint.Style.STROKE);    paint.setColor(Color.BLUE);    paint.setStrokeWidth(20);    canvas.drawCircle(0,0,200,paint);    //保存当前绘制    canvas.save();    //恢复画布到绘制圆的状态    canvas.restore();}

绘制效果:

View绘制系列(10)

旋转

代码如下:

Paint paint = new Paint();paint.setStyle(Paint.Style.STROKE);paint.setColor(Color.BLUE);paint.setStrokeWidth(20);//旋转画布30度,中心旋转,以顺时针方向为正,逆时针方向为负canvas.rotate(30);canvas.drawRect(600,600,1000,900,paint);canvas.save();canvas.restore();

运行效果:

View绘制系列(10)

放缩

代码如下:

Paint paint = new Paint();paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(20);paint.setColor(Color.GRAY);//绘制原始圆环canvas.drawCircle(600,600,400,paint);canvas.scale(0.5f,0.5f);paint.setColor(Color.BLUE);//绘制缩放0.5f的圆环canvas.drawCircle(600,600,400,paint);canvas.save();canvas.restore();

绘制效果:

View绘制系列(10)

错切

代码如下:

Paint paint = new Paint();paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(20);paint.setColor(Color.GRAY);//绘制原始圆环canvas.drawRect(100,0,600,600,paint);canvas.save();//y轴逆时针旋转45度,x轴不变canvas.skew(1,0);paint.setColor(Color.BLUE);//绘制缩放0.5f的圆环canvas.drawRect(100,0,600,600,paint);canvas.save();canvas.restore();

运行效果:

View绘制系列(10)

对于canvas.skew(float sx,float sy)方法而言,sx及sy分别表示画布在x及y方向上倾斜角度对应的tan值,当不需要旋转时,值取。

当sx=1时,表示将画布向X正方向旋转45度,其实就是X轴不变,Y轴逆时针旋转45度

当sy=1时,表示将画布向Y正方向旋转45度,其实就是Y轴不变,X轴顺时针旋转45度

如下图所示:

View绘制系列(10)

在错切作用下,用于坐标轴夹角发生变化,所以原始图形和变换后图形并不一定落在同一个左顶点,修改上述代码中左顶点坐标为(100,100),运行效果如下图所示:

View绘制系列(10)

具体造成原因如下图:

View绘制系列(10)

本文分享自微信公众号 - 小海编码日记(gh_1f87b8c00ede)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Python进阶者 Python进阶者
2年前
手把手教你使用CanvasAPI打造一款拼图游戏
一、canvas简介1.canvas是HTML5提供的一种新标签,双标签;2.HTML5 canvas标签元素用于图形的绘制,通过脚本(通常是JavaScript)来完成;3.canvas标签只是图形容器,必须使用脚本来绘制图形;Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画;二、案例目标我们今天的目标是使用HTML5
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Python进阶者 Python进阶者
2年前
Canvas之鼠标滑动特效
大家好,我是皮皮。我们会看到很多网页的粒子特效;如上图所示,这些都是借助HTML新特性,使用新增标签Canvas得到的效果;那么我们来了解下canvas。什么是Canvas在MDN中是这样定义  的: 是HTML5新增的元素,可用于通过使用JavaScript中的脚本来绘制图形。例如,它可以用于绘制图形、制作照片、创建动画,甚至可以进行实时
Stella981 Stella981
3年前
PhoneGap设置Icon
参考:http://cordova.apache.org/docs/en/latest/config\_ref/images.html通过config.xml中的<icon标签来设置Icon<iconsrc"res/ios/icon.png"platform"ios"width"57"height"57"densi
Stella981 Stella981
3年前
CoreGraphics 之CGAffineTransform仿射变换(3)
 CoreGraphics的仿射变换可以用于平移、旋转、缩放变换路径或者图形上下文。  (1)平移变换将路径或图形上下文中的形状的当前位置平移到另一个相对位置。举例来说,如果你在(10,20)的位置处画一个点,对它应用(30,40)的平移变换,然后绘制它,这个点将被绘制在(40,60)的位置处。为了创建一个平移变换,使用CGAffineTra
Wesley13 Wesley13
3年前
HTML5实现绘制几何图形
HTML5新增了一个<canvas.../属性。该元素自身并不绘制图形,只是相当于一张空画布。如果开发者需要向<canvas.../上绘制图形则必须使用JavaScript脚本进行绘制。为了向<canvas.../元素上绘图,必须经过如下3步。获取<canvas.../元素对应的DOM对象,这是一个Canvas对象。调用Canvas对象
Wesley13 Wesley13
3年前
12、开源游戏
在前面中我们初始化了游戏的资源,这次我们来说下地图的绘制和游戏主循环设计。地图绘制    以前说过地图是用tiled画好,导出为图片形式的,所以地图的绘制,就是把这个图片绘制到canvas的过程。这样绘制地图就简单了,使用drawImage方法绘制即可。    这里有个2问题,1是地图的大小一般肯定是大于canvas的,所以我们只是把地图
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这