1. 程式人生 > >Android漸變色的圓弧虛線

Android漸變色的圓弧虛線

Android漸變色的圓弧虛線

在學習Android的paint類的時候學習了PathEffect路徑效果和Shader渲染效果。做了下面的一個效果的自定義的view組主要是用DashPathEffect、SweepGradient的API形成的效果。下面是效果圖:
Android漸變色的圓弧虛線

1,SweepGradient(梯度渲染)

public SweepGradient (float cx, float cy, int[] colors, float[] positions)

掃描渲染,就是以某個點位中心旋轉一週所形成的效果!引數依次是:
cx:掃描的中心x座標
cy:掃描的中心y座標
colors

:梯度漸變的顏色陣列
positions:指定顏色陣列的相對位置

public static final int[] SWEEP_GRADIENT_COLORS = new int[]{Color.GREEN, Color.GREEN, Color.BLUE, Color.RED, Color.RED};
mColorShader = new SweepGradient(radius, radius,SWEEP_GRADIENT_COLORS,null);

效果圖:
SweepGradient

2,DashPathEffect(Path的線段虛線化)

* DashPathEffect(float[] intervals, float phase)*

intervals:為虛線的ON和OFF的陣列,陣列中元素數目需要 >= 2
phase:為繪製時的偏移量

//計算路徑的長度
PathMeasure pathMeasure = new PathMeasure(mPath, false);
float length = pathMeasure.getLength();
float step = length / 60;
dashPathEffect = new DashPathEffect(new float[]{step / 3, step * 2 / 3}, 0);

效果圖:
DashPathEffect

3,下面是全部的程式碼:

package
com.example.yyw.xfermodedemo; import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.DashPathEffect; import android.graphics.Paint; import android.graphics.Path; import android.graphics.PathMeasure; import android.graphics.RectF; import android.graphics.SweepGradient; import android.util.AttributeSet; import android.view.View; /** * Created by yyw on 2016/10/11. */ public class OilTableLine extends View { public static final int[] SWEEP_GRADIENT_COLORS = new int[]{Color.GREEN, Color.GREEN, Color.BLUE, Color.RED, Color.RED}; private int tableWidth = 50; private Paint mPaint; private Path mPath; private RectF mTableRectF; //把路徑分成虛線段的 private DashPathEffect dashPathEffect; //給路徑上色 private SweepGradient mColorShader; //指標的路徑 private Path mPointerPath; private float mCurrentDegree = 60; public OilTableLine(Context context, AttributeSet attrs) { super(context, attrs); mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setDither(true); mPaint.setColor(Color.BLACK); mPath = new Path(); mPointerPath = new Path(); startAnimator(); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); float size = Math.min(w, h) - tableWidth * 2; //油表的位置方框 mTableRectF = new RectF(0, 0, size, size); mPath.reset(); //在油表路徑中增加一個從起始弧度 mPath.addArc(mTableRectF, 60, 240); //計算路徑的長度 PathMeasure pathMeasure = new PathMeasure(mPath, false); float length = pathMeasure.getLength(); float step = length / 60; dashPathEffect = new DashPathEffect(new float[]{step / 3, step * 2 / 3}, 0); float radius = size / 2; mColorShader = new SweepGradient(radius, radius,SWEEP_GRADIENT_COLORS,null); //設定指標的路徑位置 mPointerPath.reset(); mPointerPath.moveTo(radius, radius - 20); mPointerPath.lineTo(radius, radius + 20); mPointerPath.lineTo(radius * 2 - tableWidth, radius); mPointerPath.close(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); float dx = (getWidth() - mTableRectF.width()) / 2; float dy = (getHeight() - mTableRectF.height()) / 2; //把油表的方框平移到正中間 canvas.translate(dx, dy); canvas.save(); //旋轉畫布 canvas.rotate(90, mTableRectF.width() / 2, mTableRectF.height() / 2); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(tableWidth); mPaint.setPathEffect(dashPathEffect); mPaint.setShader(mColorShader); canvas.drawPath(mPath, mPaint); canvas.restore(); //還原畫筆 mPaint.setPathEffect(null); mPaint.setShader(null); mPaint.setStyle(Paint.Style.FILL); mPaint.setStrokeWidth(tableWidth / 10); canvas.save(); canvas.rotate(150 + mCurrentDegree, mTableRectF.width() / 2, mTableRectF.height() / 2); canvas.drawPath(mPointerPath, mPaint); canvas.restore(); } public void startAnimator() { ValueAnimator animator = ValueAnimator.ofFloat(0, 240); animator.setDuration(40000); animator.setRepeatCount(ValueAnimator.INFINITE); animator.setRepeatMode(ValueAnimator.RESTART); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mCurrentDegree = (int) (0 + (Float) animation.getAnimatedValue()); invalidate(); } }); animator.start(); } }