Android用Canvas画一个折线图,并加以简单封装,系列教学

//画布宽度

canvasWidth = canvas.getWidth();

//画布高度

canvasHeight = canvas.getHeight();

widthCriterion = canvasWidth /10; //将画布宽分为10份

hightCriterion = canvasHeight /10; //将画布高分为10份

minCriterion = widthCriterion > hightCriterion ? hightCriterion /2: widthCriterion /2; //画xy轴角的依据

daxesPaint=new Paint();

daxesPaint.setColor(Color.BLACK);

daxesPaint.setAntiAlias(true); //去掉锯齿效果

daxesPaint.setStrokeWidth(7.0f);//画笔宽度

//第一个方法:画xy轴

drawDaxes(canvas,daxesPaint);

//开始绘制xy轴坐标

axispointPaint=daxesPaint;

drawAxispoint(canvas,axispointPaint);

//开始绘制折线和坐标点

brokenLinePaint=axispointPaint;

brokenLinePaint.setStrokeWidth(5.0f);

drawbrokenLine(canvas,brokenLinePaint);

}

private void drawDaxes(Canvas canvas,Paint p){

//开始y绘制坐标系

canvas.drawLine(widthCriterion,hightCriterion,widthCriterion,hightCriterion*9,p);

//绘制y角

canvas.drawLine(widthCriterion-minCriterion,hightCriterion+minCriterion,widthCriterion+2,hightCriterion,p);

canvas.drawLine(widthCriterion,hightCriterion,widthCriterion+minCriterion-2,hightCriterion+minCriterion,p);

//开始x绘制坐标系

canvas.drawLine(widthCriterion-4,hightCriterion9,widthCriterion9,hightCriterion*9,p);

//绘制x角

canvas.drawLine(widthCriterion9-minCriterion,hightCriterion9-minCriterion,widthCriterion9,hightCriterion9+2,p);

canvas.drawLine(widthCriterion9-minCriterion,hightCriterion9+minCriterion,widthCriterion9,hightCriterion9-2,p);

}

private void drawAxispoint(Canvas canvas,Paint p){

textFont=widthCriterion/5*2;

Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);

p.setTypeface( font );

p.setTextSize(textFont);

for (int i = 1; i <=8 ; i++) {

String text= String.valueOf(-1+i);

int stringWidth = (int) p.measureText(text); //文本长度

canvas.drawText(text, iwidthCriterion-stringWidth/2, hightCriterion9+textFont, p);// 画文本

}

for (int i = 1; i <=7 ; i++) {

String text= String.valueOf(i);

int stringWidth = (int) p.measureText(text);

//文本长度

canvas.drawText(text, widthCriterion-textFont, hightCriterion9-ihightCriterion+stringWidth/2, p);// 画文本

}

}

private void drawbrokenLine(Canvas canvas,Paint p){

canvas.drawLine(widthCriterion,hightCriterion9,widthCriterion2,hightCriterion*2,p);

canvas.drawLine(widthCriterion2,hightCriterion2,widthCriterion3,hightCriterion5,p);

canvas.drawLine(widthCriterion3,hightCriterion5,widthCriterion4,hightCriterion7,p);

canvas.drawLine(widthCriterion4,hightCriterion7,widthCriterion5,hightCriterion6,p);

canvas.drawLine(widthCriterion5,hightCriterion6,widthCriterion6,hightCriterion7,p);

canvas.drawLine(widthCriterion6,hightCriterion7,widthCriterion7,hightCriterion2,p);

canvas.drawLine(widthCriterion7,hightCriterion2,widthCriterion8,hightCriterion3,p);

//画折线上的点

canvas.drawCircle(widthCriterion, hightCriterion*9, 10, p);

canvas.drawCircle(widthCriterion2,hightCriterion2, 10, p);

canvas.drawCircle(widthCriterion3,hightCriterion5, 10, p);

canvas.drawCircle(widthCriterion4,hightCriterion7, 10, p);

canvas.drawCircle(widthCriterion5,hightCriterion6, 10, p);

<
  • 30
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Android 上绘制折线图,可以使用 Canvas 和 Paint 类来实现。 首先,你需要创建一个自定义 View 组件,并在其 onDraw() 方法中实现绘图逻辑。在绘制折线图时,你需要先计算出每个数据点的坐标,然后使用 Path 类绘制连接这些点的线条。 下面是一个简单的示例代码,实现了一个基本的折线图绘制: ```java public class LineChartView extends View { private List<Float> mData = new ArrayList<>(); public LineChartView(Context context) { super(context); } public LineChartView(Context context, AttributeSet attrs) { super(context, attrs); } public LineChartView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public void setData(List<Float> data) { mData = data; invalidate(); // 通知 View 进行重新绘制 } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 设置笔颜色和样式 Paint paint = new Paint(); paint.setColor(Color.BLUE); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(5); // 计算每个数据点的坐标 int width = getWidth(); int height = getHeight(); float xInterval = width / (mData.size() - 1); float yInterval = height / Collections.max(mData); Path path = new Path(); for (int i = 0; i < mData.size(); i++) { float x = i * xInterval; float y = height - mData.get(i) * yInterval; if (i == 0) { path.moveTo(x, y); } else { path.lineTo(x, y); } } // 绘制折线图 canvas.drawPath(path, paint); } } ``` 在 Activity 中,你可以通过调用 setData() 方法来设置折线图的数据,并将自定义 View 组件添加到布局中: ```java List<Float> data = new ArrayList<>(); data.add(10f); data.add(20f); data.add(50f); data.add(30f); data.add(40f); LineChartView lineChartView = new LineChartView(this); lineChartView.setData(data); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT); linearLayout.addView(lineChartView, layoutParams); ``` 上述代码会在 LinearLayout 中添加一个折线图,其中数据为 [10, 20, 50, 30, 40]。你可以根据自己的需求来修改上述代码,实现更加复杂的折线图绘制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值