Android中Canvas绘图方法的实现

原创 于 2017-10-09 21:15:27 发布 · 4.5k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Android #Canvas #图形 #2D

本文介绍如何在Android中使用Canvas进行2D图形绘制，通过重写View的onDraw方法，详细讲解常用的方法及实现代码，帮助读者理解并实现自定义视图效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Android中2D图形可以使用Canvas来实现，我们可以通过重写View.onDraw()方法来实现Canvas对象。


常用方法

drawBitmap()

绘制位图

drawCircle()

绘制圆形

drawColor()

绘制填充画布颜色

drawLine()

绘制直线

drawPath()

绘制路径

drawPoint()

绘制点

drawRect()

绘制矩形

drawText()

绘制文字

最终效果

 

创建项目

 

实现代码

MainActivity.java

package com.lujie.canvasdemo;

import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;


public class MainActivity extends Activity {

	private LinearLayout layout;
	private Button button_drawLine;
	private Button button_drawCircle;
	private Button button_drawRect;
	private Button button_dark;
	private Button button_drawPoint;
	private Button button_drawLogo;
	private Button button_drawText;
	private Button button_autoDraw;
	
	private boolean flag = false;
	
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        initUI();
    }
    
    private void initUI() {
    	layout = (LinearLayout) findViewById(R.id.linearLayout_main);
    	button_drawLine = (Button) findViewById(R.id.button_drawLine);
    	button_drawCircle = (Button) findViewById(R.id.button_drawCircle);
    	button_drawRect = (Button) findViewById(R.id.button_drawRect);
    	button_dark = (Button) findViewById(R.id.button_dark);
    	button_drawPoint = (Button) findViewById(R.id.button_drawPoint);
    	button_drawLogo = (Button) findViewById(R.id.button_drawLogo);
    	button_drawText = (Button) findViewById(R.id.button_drawText);
    	button_autoDraw = (Button) findViewById(R.id.button_autoDraw);
    	
    	final MyView view = new MyView(this);
    	DisplayMetrics display = new DisplayMetrics();
    	getWindowManager().getDefaultDisplay().getMetrics(display);
    	int width = display.widthPixels;
    	
    	view.setMinimumWidth(width);
    	view.setMinimumHeight(width);
    	view.setWidth(width);
    	layout.addView(view);
    	
    	button_drawLine.setOnClickListener(new View.OnClickListener() {
			public void onClick(View v) {
				view.setDrawType(1);
				view.invalidate();	
			}
		});
    	
    	button_drawCircle.setOnClickListener(new View.OnClickListener() {
			public void onClick(View v) {
				view.setDrawType(2);
				view.invalidate();	
			}
		});
    	
    	button_drawRect.setOnClickListener(new View.OnClickListener() {
			public void onClick(View v) {
				view.setDrawType(3);
				view.invalidate();	
			}
		});
    	
    	button_dark.setOnClickListener(new View.OnClickListener() {
			public void onClick(View v) {
				view.setDrawType(4);
				view.invalidate();	
			}
		});
    	
    	button_drawPoint.setOnClickListener(new View.OnClickListener() {
			public void onClick(View v) {
				view.setDrawType(5);
				view.invalidate();	
			}
		});
    	
    	button_drawLogo.setOnClickListener(new View.OnClickListener() {
			public void onClick(View v) {
				view.setDrawType(6);
				view.invalidate();	
			}
		});
    	
    	button_drawText.setOnClickListener(new View.OnClickListener() {
			public void onClick(View v) {
				view.setDrawType(7);
				view.invalidate();	
			}
		});
    	
    	button_autoDraw.setOnClickListener(new View.OnClickListener() {
			public void onClick(View v) {
				if(flag)	view.stopDraw();
				else	view.autoDraw();
				flag = !flag;
			}
		});
    }
}

 

MyView.java

package com.lujie.canvasdemo;

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

public class MyView extends View{
	
	private int width;
	private int drawType = -1;
	private Thread thread = null;
	private boolean flag = false;
	
	public MyView(Context context) {
		super(context);
	}
	
	public void setWidth(int width) {
		this.width = width;
	}
	
	public void setDrawType(int drawType) {
		this.drawType = drawType;
	}
	
	public void autoDraw() {
		flag = true;
		thread = new Thread() {
			public void run() {
				for(drawType = 1; flag; drawType++) {
					if(drawType > 7) {
						drawType = 1;
					}
					setDrawType(drawType);
					postInvalidate();
					try {
						Thread.sleep(1000);
					}catch(InterruptedException e) {
						e.printStackTrace();
					}
				}
			}
		};
		thread.start();
	}
	
	public void stopDraw() {
		flag = false;
	}
	
	protected void onDraw(Canvas canvas) {
		Paint paint = new Paint();
		paint.setAntiAlias(true);
		paint.setColor(Color.rgb(255,255,215));
		canvas.drawRect(new Rect(0, 0, width, width), paint);
		
		switch(drawType) {
		case 1:
			paint.setColor(Color.CYAN);
			canvas.drawLine(50, 50, 180, 180, paint);
			break;
		case 2:
			paint.setColor(Color.RED);
			canvas.drawCircle(width/2, width/2, 50, paint);
			break;
		case 3:
			paint.setColor(Color.rgb(85,99,200));
			canvas.drawRect(50, 50, 150, 120, paint);
			break;
		case 4:
			canvas.drawColor(Color.rgb(235,235,195));
			break;
		case 5:
			paint.setColor(Color.rgb(55,55,99));
			canvas.drawPoint(50, 50, paint);
			canvas.drawPoint(60, 50, paint);
			canvas.drawPoint(70, 50, paint);
			canvas.drawPoint(80, 50, paint);
			canvas.drawPoint(80, 55, paint);
			canvas.drawPoint(80, 60, paint);
			canvas.drawPoint(80, 65, paint);
			canvas.drawPoint(80, 70, paint);
			canvas.drawPoint(80, 75, paint);
			canvas.drawPoint(90, 50, paint);
			canvas.drawPoint(100, 50, paint);
			canvas.drawPoint(110, 50, paint);
			break;
		case 6:
			paint.setColor(Color.rgb(208,135,68));
			paint.setAntiAlias(true);
			float scale = 1.8f;
			Path path1 = new Path();
			path1.moveTo(120*scale, 30*scale);
			path1.lineTo(40*scale, 22*scale);
			path1.lineTo(30*scale, 30*scale);
			path1.lineTo(40*scale, 38*scale);
			path1.close();
			canvas.drawPath(path1, paint);
			Path path2 = new Path();
			path2.moveTo(120*scale, 55*scale);
			path2.lineTo(40*scale, 47*scale);
			path2.lineTo(30*scale, 55*scale);
			path2.lineTo(40*scale, 63*scale);
			path2.close();
			canvas.drawPath(path2, paint);
			Path path3 = new Path();
			path3.moveTo(120*scale, 80*scale);
			path3.lineTo(40*scale, 72*scale);
			path3.lineTo(30*scale, 80*scale);
			path3.lineTo(40*scale, 88*scale);
			path3.close();
			canvas.drawPath(path3, paint);
			Path path4 = new Path();
			path4.moveTo(35*scale, 20*scale);
			path4.lineTo(35*scale, 90*scale);
			path4.lineTo(20*scale, 85*scale);
			path4.lineTo(20*scale, 25*scale);
			path4.close();
			canvas.drawPath(path4, paint);
			break;
		case 7:
			paint.setColor(Color.rgb(88, 210, 64));
			paint.setTextSize(40);
			canvas.drawText("天天开心", 40, width/2, paint);
			break;
		}
	}
}

 

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearLayout_main"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.lujie.canvasdemo.MainActivity" >

	<LinearLayout 
	    android:orientation="horizontal"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    >
	    <Button
	        android:id="@+id/button_drawLine"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	       	android:layout_weight="1"
	       	android:background="#AF6"
	        android:text="直线" />

	    <Button
	        android:id="@+id/button_drawCircle"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:background="#DFC"
	        android:text="圆形" />

	    <Button
	        android:id="@+id/button_drawRect"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:background="#AF6"
	        android:text="矩形" />

	    <Button
	        android:id="@+id/button_dark"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:background="#DFC"
	        android:text="底色加深" />

	</LinearLayout>
	
	<LinearLayout
	   	android:orientation="horizontal"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    >
		<Button
		    android:id="@+id/button_drawPoint"
		    android:layout_width="0dp"
		    android:layout_height="wrap_content"
		    android:layout_weight="1"
		    android:background="#DFC"
		    android:text="点" />

		<Button
	        android:id="@+id/button_drawLogo"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:background="#AF6"
	        android:text="图案" />
	
	    <Button
	        android:id="@+id/button_drawText"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:background="#DFC"
	        android:text="文字" />
	
	    <Button
	        android:id="@+id/button_autoDraw"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:background="#AF6"
	        android:text="自动播放" />
	</LinearLayout>

</LinearLayout>

 

参考文档

http://www.android-doc.com/reference/android/graphics/Canvas.html

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值