欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android开发实现绘制淘宝收益图折线效果示例

程序员文章站 2022-05-26 22:46:08
本文实例讲述了android开发实现绘制淘宝收益图折线效果。分享给大家供大家参考,具体如下: 实现的效果我一会贴上,我先说下原理,我们知道要实现在canvas上画线,不就...

本文实例讲述了android开发实现绘制淘宝收益图折线效果。分享给大家供大家参考,具体如下:

实现的效果我一会贴上,我先说下原理,我们知道要实现在canvas上画线,不就是要搞一个paint嘛,然后首先肯定要设置下paint的属性,那么画文字呢,不就是textpaint吗,对,就是这么简单,接下来怎么画,折线图主要分为x轴和y轴,x轴表示日期,y表示收益,好,说道这里,大家应该知道怎么去做了,下面直接贴代码

这个方法是,画x,y坐标系的,以及上面的日期和收益了

private void drawcoordinate(canvas canvas) {
  //坐标系画笔
  paint coordinatepaint = new paint();
  coordinatepaint.setantialias(true);
  coordinatepaint.setstrokewidth(1);
  coordinatepaint.setcolor(getresources().getcolor(r.color.c5));
  //坐标系文字画笔
  textpaint coordinatetextpaint = new textpaint();
  coordinatetextpaint.setantialias(true);
  coordinatetextpaint.settextsize(scaletextsize);
  coordinatetextpaint.setantialias(true);
  coordinatetextpaint.setcolor(scaletextcolor);
  coordinatetextpaint.settextalign(align.center);
  //水平的刻度线
  float verticalscalestep = getverticalscalestep();
  coordinatetextpaint.settextalign(align.right);
  float textheight = gettextheight(coordinatetextpaint, "8");
  for (int i = 0; i < maxverticalscalevalue; i++) {
    float y = getheight() - bottompadding - (verticalscalestep * i);
    canvas.drawline(leftpadding, y, getwidth() - rightpadding, y, coordinatepaint);
    canvas.drawtext(i + "", leftpadding - 13, y + textheight / 2, coordinatetextpaint);
  }
  //垂直的刻度线
  float horizontalscalestep = gethorizontalscalestep();
  for (int i = 0; i < line.getsize(); i++) {
    float x = leftpadding + (horizontalscalestep * i);
    if (i == 0) {
      canvas.drawline(x, toppadding, x, getheight() - bottompadding, coordinatepaint);
    }
    coordinatetextpaint.setcolor(mtouchindex == i ? verticallinecolor : scaletextcolor);
    coordinatetextpaint.settextalign(i == 0 ? align.left : align.center);
    canvas.drawtext(line.getpoint(i).getx(), x, getheight() - bottompadding + textheight + 10, coordinatetextpaint);
  }
}

但是产品有个需求啊,就是点击当前日期可以查看我的收益,并且在交汇点上展示出来

private void drawcurve(canvas canvas) {
  paint curvepaint = new paint();//曲线画笔
  curvepaint.setcolor(curvecolor);
  curvepaint.setantialias(true);
  curvepaint.setstrokewidth(curvestrokewidth);
  float horizontalscalestep = gethorizontalscalestep();
  float lastxpixels = 0, newypixels = 0;
  float lastypixels = 0, newxpixels = 0;
  float useheight = getheight() - bottompadding - toppadding;
  for (int i = 0; i < line.getsize(); i++) {
    float ypercent = line.getpoint(i).gety() / maxverticalscalevalue;
    if (i == 0) {
      lastxpixels = leftpadding + i * horizontalscalestep;
      lastypixels = getheight() - bottompadding - useheight * ypercent;
    } else {
      newxpixels = leftpadding + i * horizontalscalestep;
      newypixels = getheight() - bottompadding - useheight * ypercent;
      canvas.drawline(lastxpixels, lastypixels, newxpixels, newypixels, curvepaint);
      lastxpixels = newxpixels;
      lastypixels = newypixels;
    }
    line.getpoint(i).flinex = lastxpixels;
    line.getpoint(i).fliney = lastypixels;
  }
}

点击交汇点,有文字提示说明,

private void drawtiprect(canvas canvas) {
  if (mtouchindex == -1) return;
  linepoint point = line.getpoint(mtouchindex);
  float x = point.flinex;
  float y = point.fliney;
  // 描绘竖线
  paint paint = new textpaint();
  patheffect effects = new dashpatheffect(new float[]{5, 5, 5, 5}, 1);
  paint.setpatheffect(effects);
  paint.setantialias(true);
  paint.setstrokewidth(verticallinestrokewidth);
  paint.setcolor(verticallinecolor);
  canvas.drawline(x, toppadding, x, getheight() - bottompadding, paint);
  //描绘交汇圆点
  paint.setpatheffect(null);
  paint.setstyle(paint.style.fill_and_stroke);
  paint.setcolor(color.white);
  canvas.drawcircle(x, y, circleradius, paint);
  paint.setstyle(paint.style.stroke);
  paint.setcolor(circlecolor);
  paint.setstrokewidth(circlestrokewidth);
  canvas.drawcircle(x, y, circleradius, paint);
  float midy = (toppadding + getheight() - bottompadding) / 2;
  float midx = (leftpadding + getwidth() - rightpadding) / 2;
  //描绘圆角矩形
  textpaint textpaint = new textpaint();
  textpaint.settextsize(tiptextsize);
  textpaint.settextalign(align.center);
  textpaint.setcolor(tiptextcolor);
  textpaint.setantialias(true);
  string label = tipprefix + point.gety();
  float textwidth = textpaint.measuretext(label) + 15;
  float textheight = gettextheight(textpaint, label) + 8;
  float hmargin = 10;//水平间距
  float vmargin = 8;//垂直间距
  float w = textwidth + hmargin * 2;//宽
  float h = textheight + vmargin * 2;//高
  rectf rect = new rectf();
  if (x > midx) {
    rect.right = x - hmargin;
    rect.left = x - w;
  } else {
    rect.left = x + hmargin;
    rect.right = x + w;
  }
  if (y > midy) {
    rect.top = y - h;
    rect.bottom = y - vmargin;
  } else {
    rect.bottom = y + h;
    rect.top = y + vmargin;
  }
  paint roundrectpaint = new paint();
  roundrectpaint.setcolor(tiprectcolor);
  roundrectpaint.setstyle(paint.style.fill);
  roundrectpaint.setantialias(true);
  canvas.drawroundrect(rect, 3, 3, roundrectpaint);
  // 描绘圆角矩形中间的文字
  float roundtextx = (rect.left + rect.right) / 2;
  float roundtexty = (rect.top + rect.bottom + gettextheight(textpaint, label)) / 2;
  canvas.drawtext(label, roundtextx, roundtexty, textpaint);
}

好了核心的代码就这么多了,由于我们把它当做的是控件再用,那么我们在初始化的时候,肯定会引入一些自定义的样式表,

private void initviews(attributeset attrs, int defstyle) {
  typedarray typedarray = getcontext().obtainstyledattributes(attrs, r.styleable.linegraph, defstyle, 0);
  scaletextsize = typedarray.getdimension(r.styleable.linegraph_scale_text_size, 20);
  scaletextcolor = typedarray.getcolor(r.styleable.linegraph_scale_text_color, getresources().getcolor(r.color.c5));
  tiprectcolor = typedarray.getcolor(r.styleable.linegraph_tip_rect_color, getresources().getcolor(r.color.c8));
  tiptextsize = typedarray.getdimension(r.styleable.linegraph_tip_text_size, 22);
  tiptextcolor = typedarray.getcolor(r.styleable.linegraph_tip_text_color, getresources().getcolor(r.color.c12));
  curvestrokewidth = typedarray.getdimension(r.styleable.linegraph_curve_stroke_width, 4);
  curvecolor = typedarray.getcolor(r.styleable.linegraph_curve_color, getresources().getcolor(r.color.c8));
  verticallinestrokewidth = typedarray.getdimension(r.styleable.linegraph_vertical_line_stroke_width, 2);
  verticallinecolor = typedarray.getcolor(r.styleable.linegraph_vertical_line_color, getresources().getcolor(r.color.c8));
  circlestrokewidth = typedarray.getdimensionpixelsize(r.styleable.linegraph_circle_stroke_width, 3);
  circlecolor = typedarray.getcolor(r.styleable.linegraph_circle_color, getresources().getcolor(r.color.c8));
  circleradius = typedarray.getdimensionpixelsize(r.styleable.linegraph_circle_radius, 7);
  typedarray.recycle();
  bottompadding = dip2px(getcontext(), 20);
  toppadding = dip2px(getcontext(), 10);
  leftpadding = dip2px(getcontext(), 20);
  rightpadding = dip2px(getcontext(), 10);
}

样式表文件我就不多说了,行如下面的格式,

<declare-styleable name="linegraph">
  <attr name="scale_text_size" format="dimension" />
  <attr name="scale_text_color" format="color" />
  <attr name="tip_text_size" format="dimension" />
  <attr name="tip_text_color" format="color" />
  <attr name="tip_rect_color" format="color" />
  <attr name="curve_stroke_width" format="dimension" />
  <attr name="curve_color" format="color" />
  <attr name="vertical_line_stroke_width" format="dimension" />
  <attr name="vertical_line_color" format="color" />
  <attr name="circle_stroke_width" format="dimension" />
  <attr name="circle_color" format="color" />
  <attr name="circle_radius" format="dimension" />
</declare-styleable>

最后贴上个效果图:

Android开发实现绘制淘宝收益图折线效果示例

git下载地址:

或者点击此处本站下载

更多关于android相关内容感兴趣的读者可查看本站专题:《android图形与图像处理技巧总结》、《android开发入门与进阶教程》、《android调试技巧与常见问题解决方法汇总》、《android基本组件用法总结》、《android视图view技巧总结》、《android布局layout技巧总结》及《android控件用法总结

希望本文所述对大家android程序设计有所帮助。