当前位置： 移动技术网 > IT编程>移动开发>Android > Android实现渐变色的圆弧虚线效果

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

怎么办才好,曾以晴,森林猢狲军需官

首先来看看效果图：


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

总结

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网