1 package com.example.canvasdemo; 2 3 import android.content.Context; 4 import android.graphics.Canvas; 5 import android.graphics.Color; 6 import android.graphics.EmbossMaskFilter; 7 import android.graphics.Paint; 8 import android.graphics.SweepGradient; 9 import android.util.AttributeSet; 10 import android.view.View; 11 /** 12 * 13 * @author liemng QQ:859686819 14 * 15 */ 16 public class ZoomPinch extends View{ 17 18 private Paint mLinePaint; 19 private Paint mPointPaint; 20 private int mLineWitdh = 18; 21 private int mPointPaintWitdh = 12; 22 23 private String mForeground = "#FFFFFF"; 24 private String mBackground = "#ff0000"; 25 26 // 梯度渐变的填充颜色 27 private int[] arcColors = new int[] { 0xFF48cbdc, 0xFF4c9fda, 0xFFeac83d, 28 0xFFc7427e, 0xFF48cbdc, 0xFF48cbdc }; 29 30 public ZoomPinch(Context context, AttributeSet attrs, int defStyleAttr) { 31 super(context, attrs, defStyleAttr); 32 initData(); 33 } 34 35 public ZoomPinch(Context context, AttributeSet attrs) { 36 this(context, attrs, 0); 37 } 38 39 public ZoomPinch(Context context) { 40 this(context, null); 41 } 42 43 public void initData(){ 44 //--绘制线段画笔 45 mLinePaint = new Paint(); 46 //--抗锯齿 47 mLinePaint.setAntiAlias(true); 48 //--防抖 49 mLinePaint.setDither(true); 50 //--线段两端的形状 51 mLinePaint.setStrokeCap(Paint.Cap.ROUND); 52 // 线段的宽度 53 mLinePaint.setStrokeWidth(mLineWitdh); 54 //--画笔颜色 55 mLinePaint.setColor(Color.parseColor("#000000")); 56 57 //--设置光源的方向 58 float[] direction = new float[]{ 1, 1, 1 }; 59 //--设置环境光亮度 60 float light = 0.4f; 61 //--选择要应用的反射等级 62 float specular = 6; 63 //--向mask应用一定级别的模糊 64 float blur = 3.5f; 65 EmbossMaskFilter emboss=new EmbossMaskFilter(direction,light,specular,blur); 66 mLinePaint.setMaskFilter(emboss); 67 68 //--绘制圆环的画笔 69 mPointPaint = new Paint(); 70 //--抗锯齿 71 mPointPaint.setAntiAlias(true); 72 //--防抖 73 mPointPaint.setDither(true); 74 //--线段两端的形状 75 mPointPaint.setStrokeCap(Paint.Cap.ROUND); 76 //--线段的宽度 77 mPointPaint.setStrokeWidth(mPointPaintWitdh); 78 //--画笔颜色 79 SweepGradient mSweepGradient = new SweepGradient(mH/2, mW/2, arcColors, null); 80 mPointPaint.setShader(mSweepGradient); 81 } 82 83 private int mH ; 84 private int mW ; 85 private int mMaxHight = 500; 86 private int topsurplus = mLineWitdh/2 + 10; 87 88 private int mProgres = 0; 89 private float mTotalProgress = mMaxHight; 90 91 private int inCircleR = 6; 92 private int outCircleR = 14; 93 94 private int currentLineProgress = 0; 95 96 @Override 97 protected void onSizeChanged(int w, int h, int oldw, int oldh) { 98 // TODO Auto-generated method stub 99 super.onSizeChanged(w, h, oldw, oldh);100 101 mH = w;102 mW = h;103 }104 105 @Override106 protected void onDraw(Canvas canvas) {107 // TODO Auto-generated method stub108 super.onDraw(canvas);109 //--平移画布110 canvas.translate(0, topsurplus);111 //--绘制背景色112 mLinePaint.setColor(Color.parseColor(mBackground));113 canvas.drawLine(mW/2, mMaxHight, mW/2, 0, mLinePaint);114 115 //--绘制前景色116 mLinePaint.setColor(Color.parseColor(mForeground));117 canvas.drawLine(mW/2, mMaxHight, mW/2, mMaxHight - currentLineProgress, mLinePaint);118 119 //--绘制圆环120 mPointPaint.setStyle(Paint.Style.STROKE);121 canvas.drawCircle(mW/2, mMaxHight - currentLineProgress , outCircleR, mPointPaint);122 mPointPaint.setStyle(Paint.Style.FILL);123 canvas.drawCircle(mW/2, mMaxHight - currentLineProgress , inCircleR, mPointPaint);124 }125 126 public void setBackgroup(String mBackgroup){127 this.mBackground = mBackgroup;128 }129 130 public void setForeground(String mForeground){131 this.mForeground = mForeground;132 }133 134 135 public void setProgress(float mProgress){136 if(this.mProgres >= mTotalProgress && mProgress > 0)137 return;138 this.mProgres += mProgress;139 140 float percent = mProgres/mTotalProgress;141 142 if(percent <0){143 this.mProgres = 0;144 return;145 }146 this.currentLineProgress = (int) (percent*mMaxHight);147 invalidate();148 }149 150 public void setMax(float mTotalProgress){151 if(mTotalProgress < 0)152 new IllegalArgumentException("invalid args && doubi");153 this.mTotalProgress = mTotalProgress;154 }155 } 效果图如下：
左侧增加文字属性：
package com.example.canvasdemo;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.EmbossMaskFilter;import android.graphics.Paint;import android.graphics.Paint.FontMetrics;import android.graphics.SweepGradient;import android.util.AttributeSet;import android.view.View;/** * * @author liemng QQ:859686819 * */public class ZoomPinch extends View{ private Paint mLinePaint; private Paint mPointPaint; private int mLineWitdh = 18; private int mPointPaintWitdh = 12; private String mForeground = "#FFFFFF"; private String mBackground = "#ff0000"; private String[] mTips = new String[]{"1.0X", "2.0X", "3.0X", "4.0X"}; // 梯度渐变的填充颜色 private int[] arcColors = new int[] { 0xFF48cbdc, 0xFF4c9fda, 0xFFeac83d, 0xFFc7427e, 0xFF48cbdc, 0xFF48cbdc }; public ZoomPinch(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initData(); } public ZoomPinch(Context context, AttributeSet attrs) { this(context, attrs, 0); } public ZoomPinch(Context context) { this(context, null); } public void initData(){ //--绘制线段画笔 mLinePaint = new Paint(); //--抗锯齿 mLinePaint.setAntiAlias(true); //--防抖 mLinePaint.setDither(true); //--线段两端的形状 mLinePaint.setStrokeCap(Paint.Cap.ROUND); // 线段的宽度 mLinePaint.setStrokeWidth(mLineWitdh); //--画笔颜色 mLinePaint.setColor(Color.parseColor("#000000")); //--设置光源的方向 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); mLinePaint.setMaskFilter(emboss); //--绘制圆环的画笔 mPointPaint = new Paint(); //--抗锯齿 mPointPaint.setAntiAlias(true); //--防抖 mPointPaint.setDither(true); //--线段两端的形状 mPointPaint.setStrokeCap(Paint.Cap.ROUND); //--线段的宽度 mPointPaint.setStrokeWidth(mPointPaintWitdh); //--画笔颜色 SweepGradient mSweepGradient = new SweepGradient(mH/2, mW/2, arcColors, null); mPointPaint.setShader(mSweepGradient); mTextPaint = new Paint(); mTextPaint.setTextSize(32); mTextPaint.setColor(Color.parseColor("#FFFFFF")); } private int averH; private int mH ; private int mW ; private int mMaxHight = 500; private int topsurplus = mLineWitdh/2 + 10; private int mProgres = 0; private float mTotalProgress = mMaxHight; private int inCircleR = 6; private int outCircleR = 14; private int currentLineProgress = 0; private Paint mTextPaint; @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mH = w; mW = h; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //--平移画布 canvas.translate(0, topsurplus); //--绘制背景色 mLinePaint.setColor(Color.parseColor(mBackground)); canvas.drawLine(mW/2, mMaxHight, mW/2, 0, mLinePaint); //--绘制前景色 mLinePaint.setColor(Color.parseColor(mForeground)); canvas.drawLine(mW/2, mMaxHight, mW/2, mMaxHight - currentLineProgress, mLinePaint); //--绘制圆环 mPointPaint.setStyle(Paint.Style.STROKE); canvas.drawCircle(mW/2, mMaxHight - currentLineProgress , outCircleR, mPointPaint); mPointPaint.setStyle(Paint.Style.FILL); canvas.drawCircle(mW/2, mMaxHight - currentLineProgress , inCircleR, mPointPaint); //--绘制左侧文字 for (int i = 0; i < mTips.length; i++) { float textW = mTextPaint.measureText(mTips[i]); FontMetrics fontMetrics = mTextPaint.getFontMetrics(); int textH = (int) (fontMetrics.descent - fontMetrics.ascent); if(i == 0){ canvas.drawText(mTips[i], mW/2 - textW*3/2, mMaxHight, mTextPaint); continue; } if(i == (mTips.length -1)){ canvas.drawText(mTips[i], mW/2 - textW*3/2, topsurplus, mTextPaint); continue; } averH = mMaxHight/(mTips.length -1); canvas.drawText(mTips[i], mW/2 - textW*3/2, mMaxHight - topsurplus - (averH*i - textH/2) , mTextPaint); } } public void setBackgroup(String mBackgroup){ this.mBackground = mBackgroup; } public void setForeground(String mForeground){ this.mForeground = mForeground; } public void setProgress(float mProgress){ if(this.mProgres >= mTotalProgress && mProgress > 0) return; this.mProgres += mProgress; float percent = mProgres/mTotalProgress; if(percent <0){ this.mProgres = 0; return; } this.currentLineProgress = (int) (percent*mMaxHight); invalidate(); } public void setMax(float mTotalProgress){ if(mTotalProgress < 0) new IllegalArgumentException("invalid args && doubi"); this.mTotalProgress = mTotalProgress; }} 效果图如下：
