用MaskFilter画抽奖大转盘Demo

1、前言

MaskFilter类可以为Paint分配边缘效果。

对MaskFilter的扩展可以对一个Paint边缘的alpha通道应用转换。

Android包含了下面几种MaskFilter：BlurMaskFilter 指定了一个模糊的样式和半径来处理Paint的边缘。EmbossMaskFilter 指定了光源的方向和环境光强度来添加浮雕效果。

使用方法：

 // 设置光源的方向    float[] direction = new float[]{ 1, 1, 1 };    //设置环境光亮度    float light = 0.4f;    // 选择要应用的反射等级    float specular = 6;    // 向mask应用一定级别的模糊    float blur = 3.5f;    EmbossMaskFilter emboss=new EmbossMaskFilter(direction,light,specular,blur);    // 应用mask
myPaint.setMaskFilter(emboss);

在Sdk 自带的apidemos里有很好的学习例子，两种效果图如下，有兴趣可以去细究

2、大转盘完成的效果图为

3、简单思路

先画一个半透明的背景，然后画不同颜色的扇形，画好扇形后在水平的右边画文字，然后在把文字旋转到对应的颜色条上，不明白的可以看一下Canvas的旋转。画完背景后就可以叠加两立体效果了，叠加完我们就开始画内园和箭头了，先画一个小园，然后我们以小园的直径为三角行的底边画一个等腰三角型，当然这个三角形的高要大于小园的半径，就可以画出一个带小箭头的圆了。后面只用旋转这个三角形的角度就可以简单的做成是一个旋转的小动画了。

4、具体核心代码

package com.spring.slider;import android.app.Activity;
import android.content.Context;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.EmbossMaskFilter;
import android.graphics.MaskFilter;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.Paint.Style;
import android.graphics.PorterDuff.Mode;
import android.graphics.Path;
import android.graphics.RadialGradient;
import android.graphics.RectF;
import android.graphics.Shader.TileMode;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;public class SlyderView extends View{public SlyderView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context);}public SlyderView(Context context, AttributeSet attrs) {super(context, attrs);init(context);}public SlyderView(Context context) {super(context);init(context);}/*** 屏幕宽度*/private int screenW;/*** 屏幕的高度*/private int screenH;/*** 分割的度数*/private int [] drgrees = {20,50,40,90,70,40,50};/**** 分割的文字*/private String [] strs = {"level1","level2","level3","level4","level5","level6","level7"};/*** 分割的颜色*/private int [] colos = new int[] { 0xfed9c960, 0xfe57c8c8, 0xfe9fe558, 0xfef6b000, 0xfef46212, 0xfecf2911, 0xfe9d3011 };/*** 画笔*/private Paint paint;/*** 文字的大小*/private float textSize  = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, getResources().getDisplayMetrics());/*** 文字的颜色*/private int textcolor = Color.WHITE;/*** 园的半径*/private float radius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 100, getResources().getDisplayMetrics());/*** 画文字的距离*/private float textdis = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 80, getResources().getDisplayMetrics());/*** 画箭头的大小*/private float roketSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics());private float initDegress = 0;/*** 圆心*/private float centerX;/*** 圆心*/private float centerY;/*** 立体边缘*/private MaskFilter filter = new EmbossMaskFilter(new float[] { 1, 1, 1 },0.4f, 6, 3.5f);  private MaskFilter outerFilter = new BlurMaskFilter(10, BlurMaskFilter.Blur.OUTER);private MaskFilter innerFilter = new BlurMaskFilter(10, BlurMaskFilter.Blur.INNER);@SuppressWarnings("deprecation")private void init(Context context){paint = new Paint();paint.setAntiAlias(true);paint.setStyle(Style.FILL);paint.setColor(Color.WHITE);screenW = ((Activity)context).getWindowManager().getDefaultDisplay().getWidth();screenH = ((Activity)context).getWindowManager().getDefaultDisplay().getHeight();int[] colores = new int[3];colores[0] = Color.rgb(0xfF, 0x99, 0x00);colores[1] = Color.rgb(0xff, 0xff, 0x00);colores[2] = Color.rgb(0xff, 0x99, 0x00);float[] positions = new float[3];positions[0] = 0.0f;positions[1] = 0.5f;positions[2] = 1.0f;gradient = new RadialGradient(centerX, centerY, radius/5, colores, positions, TileMode.CLAMP);}/*** 绘制三角箭头*/private Path path = new Path(); /*** 绘制矩形框*/private RectF oval;/*** 外圆内阴影矩阵*/private ColorMatrixColorFilter colorFilter = new ColorMatrixColorFilter(new float[]{1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,-1,255});@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);centerX = screenW/2;centerY = screenH/2;oval = new RectF(centerX-radius,centerY-radius,centerX+radius,centerY+radius);float start = 0;paint.setColor(Color.rgb(0xdd, 0xdd, 0xdd));paint.setAlpha(127);canvas.drawCircle(centerX, centerY, radius+10, paint);paint.setAlpha(255);//画扇形paint.setAntiAlias(true);for(int i=0;i<drgrees.length;i++){float sweepAngle = drgrees[i];float startAngle = start;paint.setColor(colos[i%colos.length]);canvas.drawArc(oval, startAngle, sweepAngle, true, paint);start += drgrees[i];}//画文字paint.setColor(textcolor);paint.setAntiAlias(true);paint.setTextSize(textSize);paint.setTextAlign(Paint.Align.RIGHT);start = 0;for(int i=0;i<drgrees.length;i++){canvas.save();canvas.rotate(start+drgrees[i]/2, centerX, centerY);canvas.drawText(strs[i], centerX+textdis, centerY, paint);canvas.restore();start += drgrees[i];}int saveCount = canvas.save();//画外层立体效果paint.setColorFilter(colorFilter);canvas.saveLayer(oval,paint,Canvas.ALL_SAVE_FLAG);paint.setColorFilter(null);canvas.drawARGB(255, 0, 0, 0);paint.setXfermode(new PorterDuffXfermode(Mode.CLEAR));canvas.drawCircle(centerX, centerY, radius, paint);paint.setXfermode(null);paint.setMaskFilter(innerFilter);paint.setColor(Color.argb(0xff, 0, 0, 0));canvas.drawCircle(centerX, centerY, radius, paint);paint.setMaskFilter(null);canvas.restoreToCount(saveCount);//画内圆和内园效果canvas.save();paint.setColor(Color.argb(0xff, 0, 0, 0));paint.setAntiAlias(true);paint.setMaskFilter(outerFilter);canvas.rotate(initDegress, centerX, centerY);canvas.drawCircle(centerX, centerY, radius/3, paint);paint.setMaskFilter(null);paint.setColor(Color.WHITE);canvas.drawCircle(centerX, centerY, radius/3, paint);//画三角型叠加当箭头path.moveTo(centerX-radius/3, centerY);path.lineTo(centerX, centerY-radius/3-roketSize);path.lineTo(centerX+radius/3, centerY);path.close();canvas.drawPath(path, paint);canvas.restore();paint.setMaskFilter(filter);paint.setColor(Color.GREEN);paint.setShader(gradient);canvas.drawCircle(centerX, centerY, radius/5, paint);paint.setMaskFilter(null);paint.setShader(null);//重绘调整三角的指向达到滚动的效果，现实项目中可不能这样用的，效率太低下了，拆分View用动画完成滚动才是王道if(isRunning){if(initDegress>=360){initDegress = 0;}initDegress +=4;invalidate();}if(isStoping){if(initDegress<=360){initDegress+=4;invalidate();}else{if(initDegress-360<stop_degress){initDegress+=2;invalidate();}}}}private boolean isRunning = false;private boolean isStoping = false;private int stop_degress =90;/*** 渐变*/private RadialGradient gradient;public void play(){isRunning = true;invalidate();}public void stop(int count){for(int i =0;i<=count;i++){if(i == count){stop_degress +=drgrees[i]/2; }else{stop_degress +=drgrees[i]; }}isStoping = true;isRunning = false;invalidate();}}

5、后续

上面的实现方式还是有点不理想，特别是旋转的动画，这里是用重绘实现的。每次绘制都会耗费大量的资源，后续用旋转的动画来改进这个大转盘。

有时候这个MaskFilter会不起作用，解决看这个http://stackoverflow.com/questions/15690873/emboss-mask-filter-not-working

工程下载地址：

http://download.csdn.net/detail/hxc2008q/6703111

最近搞了个微信公众号，为各种程序员枯燥的写码生活添加一些生活调料，

在等待编译的过程看一篇美丽的图文放松放松肌肉。希望各位看官赏脸关注一下

公众号：马桶上的哲学

读哲名理，提升逼格

用MaskFilter画抽奖大转盘Demo相关推荐

vue幸运抽奖大转盘的丑绝实现
自己通过canvas+vue(vue不是必备的可以)实现的一个抽奖转盘,重点在实现逻辑,所以样式丑绝. 基本效果图,中间指针可以替换为图片数据格式转盘的分块由传入的数组长度确定,分为4,6,8块还 ...
微信小程序独家秘笈之抽奖大转盘
代码地址如下: http://www.demodashi.com/demo/14209.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
css3抽奖转盘,从零制作CSS3抽奖大转盘
今天的任务是做一个纯CSS3的还算比较漂亮的抽奖大转盘,也就是下图效果. 我只说思路和重要的CSS3代码. Paste_Image.png 外盘外盘是指有彩灯的深橙色圆环,以及圆环的外边线. 外盘设 ...
用c语言写抽奖大转盘,iOS抽奖大转盘的二种实现方法
有个朋友需要写个抽奖大转盘的功能,就让我帮忙写了下.我用了2种方法实现了效果,在这里和大家一起分享下. 一.一键转动大转盘我一开始拿到手的是一堆的图片,然后自己花了点时间,搭建出美工要求的UI,接下 ...
javaScript实现抽奖大转盘（一）
今天试了试自己写个抽奖大转盘. 先是借了两张别人的图片: 下面是布局部分: <div class="round"><div class="box&quo ...
抽奖大转盘-React-移动端
抽奖大转盘-React-移动端 react安装修改项目结构配置路由删除一些不必要的文件大转盘整理代码结构和一些静态资源书写静态页面移动端px-rem转换静态页面静态页面样式抽奖大转 ...
优秀课程案例：使用Scratch制作一个抽奖大转盘方法二！
点击上面微信号关注我关注我哟每天坚持早上9:00左右推送文章,争取做到日更,喜欢的可以设置星标,并分享点赞我们的文章,非常感谢大家的支持,您的点击的在看就是我们的动力! 昨天我们分享了一个抽奖大转盘: ...
Redis 抽奖大转盘的实战示例
本文主要介绍了Redis 抽奖大转盘的实战示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下.编程学习资料点击领取目录 1. 项目介绍 2. 项目演示 3. 表结 ...
jQuery实现简单抽奖大转盘
上效果!!! 初始页面效果点击开始后效果上代码 <!DOCTYPE html> <html lang="en"> <head><met ...

用MaskFilter画抽奖大转盘Demo

用MaskFilter画抽奖大转盘Demo相关推荐

最新文章

热门文章