android上实现转盘(canvas绘图)

假期某天突然想做一个转盘,以满足某一天不知道吃什么的时候由转盘决定午餐内容(=。=)作为一个初学者——没有所谓的客户需求只有自己是否满意:)

首先即需要做一个转盘出来,搜索到了canvas,一个常用的2D绘图软件,html5里面也经常用到这个,android做了移植,系统自带,直接import android.graphics.canvas即可。

canvas简单科普

canvas在绘图的过程中需要四个基本组件,分别是bitmap(存储像素),canvas(画布),所画内容(圆,长方形blabla),还有画笔paint(线条粗细,实心还是空心,抗锯齿啊blabla)。bitmap是最终呈现结果的一个平台,下图是canvas的创建过程

canvas的创建

可以发现canvas必须传入一个bitmap参数,Canvas 本意是画布的意思,但是在Android中,它就只是一个媒介,可以通过Canvas来调用drawRect,drawCircle等等,但是实际上画的这些东西最终展现的时候, 都是像素,但是只有Bitmap才能保存像素,而Canvas并不行,所以在创建Canvas的时候,就必须传递一个Bitmap,用来承载画的内容。 

形象的说:bitmap是一张纸,canvas是画布,笔只能通过画布画到纸上,最终拿走画布展示给大家的还是那张纸上的内容。

canvas绘图基本函数

Android之canvas详解

我只讲一下我接下来要使用的函数

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

第一个参数RectF传入一个区域,画的圆弧将会在这个区域内,具体不懂自行百度thx。第二个参数startangle顾名思义开始角度,第三个扫过的弧度,第四个参数true封闭的,false则是一段弧线,第五个参数传入画笔。

canvas.rotate(angle)

使画布旋转一定的角度

canvas.translate(x,y)画布中心移动到(x,y)

转盘的实现

android中图像需要显示在view中,于是我们首先建立一个类继承自view

创建int数组mcolors指定每一瓣的颜色

view中有一个ondraw函数,    可以实现绘图功能,我们所有的绘制都应该在这个函数中实现。所以我们需要重写这个函数

重写view中的ondraw

接着设定画笔Paint的参数


setStyle中的FILL代表填满,STROKE代表空心的

想象一下绘制如图所示的圆盘,其实是由12块扇形组成的,而drawarc刚好可以绘制扇形,每绘制一个扇形,将画布旋转30度接着画,旋转一圈图片就实现了。至于颜色是在Paint画笔中设定的,传入一个自己想要的颜色数组即可。

由于我想将这个圆绘制在view正中间,mWidth,mHeight为view的长宽,(r的设定是自己设置的1.1倍的最小长or宽-50【大家也可以自行设定】)

new Rectf

rect表示创建了一个矩形区域,接着就可以用一个for循环

于是上图的扇形就画好了!

可是转盘上需要添加字体或者图片吧,起码得有菜名啊!!!QAQ

这时候就要用到canvas的另外几个绘制文字的函数,比如 我用的drawText(text,x,y,paint)第一个是文本,x,y代表传入坐标(其实不太准确,自行百度吧各位~)最后一个当然是传入画笔啦,由于有12个扇形,最简单的方法就是在for循环里同时加上drawText,每画一个扇形加一次文字xixi。【point:画布是可以覆盖的!如果你先绘制文字再绘制扇形,文字就被遮挡看不见了!】

传入Text数组

这里传入了每一个菜名的数组~这时候需要确定x,y的坐标了!

想象了一下最终结果应该是这样,每个都大概是扇形中间的样子,哦哈想到了三角函数!对!

验证一下~哈哈实现了!然后把这个view添加到mainActivity的XML中并设置了一个id/PaintBoard


如何让它旋转起来呢

这部分就大致属于简单动画部分了!好在android有一个函数实现了这个功能

Android 常用动画之RotateAnimation    

在MainActivity里开始添加动画了!

想要实现的效果是,点击转盘转盘就开始转动

RotateAnimation参数: 

  如果pivotXType=Animation.RELATIVE_TO_SELF,则参数pivotXValue为旋转中心在控件自身水平位置百分比,如果X和Y的Value都设置为0.5,则该控件以自身中心旋转。

看完上面的那个链接相信掌握的也八九不离十了,但是问题又来了,一般转盘一开始都是匀速的,然后慢慢变慢这个怎么办呢?rotate提供了LinearInterpolator和DecelerateInterpolator还有Accelerateinterpolator,于是我创建了两个Rotate——rotate1和rotate2,一个匀速运动一个减速运动,匀速的运动时长固定为1000,减速的那个rotate2使用了随机数Number在200-2000范围内波动。

设置rotate1和rotate2

对rotate1进行监听!!!setanimationlistener中重写了三个方法,分别对应的是停止开始和重复时应该有的操作!我们只需要在rotate1结束的时候让我们的view开始参数为rotate2的转动就行了!mPaintBoard.startAnimation(rotate2);

添加rotate1的监听

好了现在转盘可以转了!但是没有指示标~偷懒的我在下载了个箭头icon然后添加到xml

xml中添加小箭头图标

大概是这样...

这时候基本的转盘已经实现了!


Question1:字体的问题。。。当转盘转起来的时候,

这些字都歪了!

嗯对应该做一个这样子的才对吖!

于是蠢蠢的自己分别计算了四个坐标位置,

然后把菜名拆开填进去...


最终的最终!

Question2:程序毕竟要长期使用。。看来我还需要改成可以随意更改上面菜名儿的app。。改好了再发吧~


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,039评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,223评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,916评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,009评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,030评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,011评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,934评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,754评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,202评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,433评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,590评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,321评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,917评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,568评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,738评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,583评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,482评论 2 352

推荐阅读更多精彩内容