Android绘制简单图形

最新推荐文章于 2025-08-15 11:12:11 发布

原创最新推荐文章于 2025-08-15 11:12:11 发布 · 786 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#android #paint #canvas #path

android 专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了如何在Android中利用android.graphics.Paint和Canvas API创建图形。通过设置Paint对象的颜色和样式属性，结合Canvas提供的绘图方法，可以在自定义View中绘制出复杂的图形，如八边形。博客提供了CustomDrawableView.java和MainActivity.java的示例代码，展示如何在应用程序中实现图形绘制。

Android通过自带的API可以绘制出生动形象的图形。想要画一幅画，其首先需要笔和纸，Android用android.graphics.Paint画笔对象，用android.graphics.Canvas作为画布对象，先简单的介绍一下Paint和Canvas的常用方法。

Paint类定义了画笔的颜色和样式的信息，主要的方法有：

/*
 * setAlpha(a):设置画笔的透明度
 * setAntiAlias(flag):设置画笔的抗锯齿效果，会消耗较大资源，
*                    绘制图形速度会变慢。
 * setARGB(a, r, g, b): 设置画笔的透明度和颜色值。 
* setColor(color):设置画笔的颜色
* setDither(dither):设定是否使用图像抖动处理，
*                   会使绘制出来的图片颜色更加平滑和饱满，图像更加清晰 
* setShader(shader):设置图像效果，使用Shader可以绘制出各种渐变效果
* setShadowLayer(radius, dx, dy, color):设置阴影效果
*                radius:阴影的角度
*                dx,dy:距x，y轴的距离                          
* setStyle(style):设置画笔的样式
* setTextSize(textSize):设置绘制文字的字号大小  
*/

Canvas表示画布对象，通过画布对象可以画出点、线、矩形、圆形、文字等图形，先简单介绍一下这些方法：

/**
* 画一条直线
* drawLine(float startX,float startY,float stopX,float stopY,Paint paint)
* 画一个点
* drawPoint(float x,float y,Paint paint)
* 绘制文字
* drawText(String text,int start,int end,Paint paint)
* 绘制一个路径，参数一为Path路径对象
* drawPath(Path path, Paint paint)
* 绘制圆
* drawCircle(float cx, float cy, float radius,Paint paint)
* 画椭圆，oval是扫描区域
* drawOval(RectF oval, Paint paint)
* 画弧
* drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
* 画矩形
* drawRect(float left, float top, float right, float bottom, Paint paint)
*/

下面运用这些方法画一个漂亮的图形，先上效果图：

上图中的八边形就是我们要画的部分，现在开始画图。首先先定义一个View来显示所画的图形：

CustomDrawableView.java

package com.example.test;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.view.View;

public class CustomDrawableView extends View
{
	/**
	 * 可以拆开为几部分来画：
	 * 1、对准八个方向的四条白线
	 * 2、画八边形的边
	 * 3、描点
	 * 4、画中间部分的多边形
	 */
	
	private Paint pbg; // 画背景
	private Paint pline; // 画线
	private Paint ppoint; // 画点
	private float radius = 200; // 半径

	float px_1 = (float) (radius - Math.sqrt(radius * radius / 2));
	float px_2 = (float) (radius + Math.sqrt(radius * radius / 2));

	
	public CustomDrawableView(Context context)
	{
		super(context);
		pbg = new Paint();
		pbg.setStyle(Paint.Style.FILL);// 设置实心
		pbg.setColor(Color.WHITE);//设置画笔的颜色
		pbg.setAlpha(80);//设置画笔的透明度
		pbg.setAntiAlias(true);//设置抗锯齿效果

		pline = new Paint();
		pline.setColor(Color.YELLOW);
		pline.setStrokeWidth(5);//设置画笔的粗细
		pline.setAntiAlias(true);

		ppoint = new Paint();
		ppoint.setColor(Color.YELLOW);
		ppoint.setStrokeWidth(5);
		ppoint.setAntiAlias(true);
	}

	@Override
	protected void onDraw(Canvas canvas)
	{
		createDefalult4Line(canvas);// 画4条长线
		create8Path(canvas, radius, 1);// 画背景的8边形,最外面那条
		create8Path(canvas, radius, 0.8);
		create8Path(canvas, radius, 0.6);
		create8Path(canvas, radius, 0.4);
		create8Path(canvas, radius, 0.2);
		createPoints(canvas);// 画点
		crateArea(canvas); // 画多边形区域
	}

	public void crateArea(Canvas canvas)
	{
		// 区域边线
		Paint paintArea = new Paint();
		paintArea.setColor(Color.YELLOW);
		paintArea.setAntiAlias(true);
		paintArea.setStyle(Paint.Style.STROKE); // 设置为空心
		paintArea.setStrokeWidth(0.5f);
		// 区域填充
		Paint paintFill = new Paint();
		paintFill.setARGB(100, 0xff, 0xc0, 76);
		paintFill.setStyle(Paint.Style.FILL);

		Path path = new Path();
		path.moveTo(radius - 50, radius);
		path.lineTo((float) (radius - radius * Math.cos(Math.PI / 4) + 30),
				(float) (radius - radius * Math.cos(Math.PI / 4) + 30));
		path.lineTo(radius, radius - 50);
		path.lineTo((float) (radius + radius * Math.cos(Math.PI / 4) - 60),
				(float) (radius - radius * Math.cos(Math.PI / 4) + 60));
		path.lineTo(radius + 80, radius);
		path.lineTo((float) (radius + radius * Math.cos(Math.PI / 4) - 90),
				(float) (radius + radius * Math.cos(Math.PI / 4) - 90));
		path.lineTo(radius, radius + 40);
		path.lineTo((float) (radius - radius * Math.cos(Math.PI / 4) + 40),
				(float) (radius + radius * Math.cos(Math.PI / 4) - 40));
		path.close();

		canvas.drawPath(path, paintFill);
		canvas.drawPath(path, paintArea);
	}

	public void createPoints(Canvas canvas)
	{
		canvas.drawPoint(radius - 50, radius, ppoint);
		canvas.drawPoint(
				(float) (radius - radius * Math.cos(Math.PI / 4) + 30),
				(float) (radius - radius * Math.cos(Math.PI / 4) + 30), ppoint);
		canvas.drawPoint(radius, radius - 50, ppoint);
		canvas.drawPoint(
				(float) (radius + radius * Math.cos(Math.PI / 4) - 60),
				(float) (radius - radius * Math.cos(Math.PI / 4) + 60), ppoint);
		canvas.drawPoint(radius + 80, radius, ppoint);
		canvas.drawPoint(
				(float) (radius + radius * Math.cos(Math.PI / 4) - 90),
				(float) (radius + radius * Math.cos(Math.PI / 4) - 90), ppoint);
		canvas.drawPoint(radius, radius + 40, ppoint);
		canvas.drawPoint(
				(float) (radius - radius * Math.cos(Math.PI / 4) + 40),
				(float) (radius + radius * Math.cos(Math.PI / 4) - 40), ppoint);
	}

	private void createDefalult4Line(Canvas canvas)
	{
		canvas.drawLine(0, radius, radius * 2, radius, pbg);
		canvas.drawLine(radius, 0, radius, radius * 2, pbg);
		canvas.drawLine(px_1, px_1, px_2, px_2, pbg);
		canvas.drawLine(px_1, px_2, px_2, px_1, pbg);
	}

	private void create8Path(Canvas canvas, float raidu, double level)
	{
		float c = (float) (raidu * level);
		float px_1 = (float) (raidu - Math.sqrt(c * c / 2));
		float px_2 = (float) (raidu + Math.sqrt(c * c / 2));

		//Path类可以预先在View上将N个点连成一条"路径",
		//然后调用Canvas的drawPath(path,paint)即可沿着路径绘制图形
		Path path1 = new Path();
		path1.moveTo(px_1, px_1);
		path1.lineTo(raidu, (float) (raidu - raidu * level));
		path1.lineTo(px_2, px_1);
		path1.lineTo((float) (raidu + raidu * level), raidu);
		path1.lineTo(px_2, px_2);
		path1.lineTo(raidu, (float) (raidu + raidu * level));
		path1.lineTo(px_1, px_2);
		path1.lineTo((float) (raidu - raidu * level), raidu);
		path1.close();// 封闭
		canvas.drawPath(path1, pbg);
	}
}

定义好View后，在一个Activity中将该View显示出来

MainActivity.java

package com.example.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;

public class MainActivity extends Activity
{
	private CustomDrawableView mCustomDrawableView;
	private LinearLayout lay_container;
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);// 设置布局文件
		lay_container = (LinearLayout) findViewById(R.id.container);
		mCustomDrawableView = new CustomDrawableView(this);
		LinearLayout.LayoutParams layparams = new LinearLayout.LayoutParams(
				LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		layparams.leftMargin = 100;
		layparams.topMargin = 100;
		mCustomDrawableView.setLayoutParams(layparams);
		lay_container.addView(mCustomDrawableView);
	}
}

再上布局文件，activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    android:orientation="vertical" >
</LinearLayout>

OK,这样一个漂亮的图形就画出来了... ...