首页 > 系统 > Android > 正文

Android实现渐变色的圆弧虚线效果

2019-12-12 04:55:33
字体:
来源:转载
供稿:网友

首先来看看效果图:


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(); }}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表