android Canvas的简单用法

最新推荐文章于 2024-05-25 23:25:25 发布

恋恋追风

最新推荐文章于 2024-05-25 23:25:25 发布

阅读量958

点赞数

分类专栏： android实战篇文章标签： Canvas android画图

本文链接：https://blog.csdn.net/lianlianzhuifeng/article/details/38032715

版权

android实战篇专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Canvas在安卓的实际开发还是经常用到的，它能够画出各种各样的图像，比较常见的就是饼状图，柱状图的运用，还有其他更复杂应用，等待我们去学习。本篇博客记录下我在开发过程中遇到的一些需求，就是用到了Canvas。

一、旋转的饼状图

先看如下效果图，本界面包含三个部分，上中下，其中中间部分就是显示旋转的饼状图，下面图片不是gif看不到旋转效果。

其中布局代码是

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:id="@+id/title"
    android:background="#0066FF"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical"
    >
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="大转盘展示"
        />
</LinearLayout>
    
<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:id="@+id/show"
    android:layout_weight="3"
    android:orientation="vertical"
    >
</LinearLayout>

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:background="#0066FF"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    >
        <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/sogou"
        android:text="这是尾部"
        />
        <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/piez"
        android:text="饼状图/柱状图"
        />
</LinearLayout>

</LinearLayout>

最主要的Activity的代码是：

public class MainActivity extends Activity {

	private View view;
	private int width; // 屏幕宽度
	private int height; // 屏幕高度
	private int offset;  
	
	private LinearLayout show; //展示大转盘区域
	private LinearLayout title; //展示大转盘头部
	
	private RotateAnimation animation;

	private Button soghou;
	private Button piez;
	@SuppressWarnings("deprecation")
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		show = (LinearLayout) this.findViewById(R.id.show);
		title = (LinearLayout) this.findViewById(R.id.title);
		soghou = (Button) this.findViewById(R.id.sogou);
		piez = (Button) this.findViewById(R.id.piez);
		soghou.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				Intent intent = new Intent(MainActivity.this,SogouActivity.class);
				startActivity(intent);
			}
		});
		piez.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				Intent intent = new Intent(MainActivity.this, PieZActivity.class);
				startActivity(intent);
				
			}
		});
		
		
	    view =  new MyView(this);
		
		Display display = getWindowManager().getDefaultDisplay();
		width = display.getWidth();
		height = display.getHeight();
		offset = height / 5;
		animation = new RotateAnimation(0f, 359f,Animation.ABSOLUTE,
				width / 2, Animation.ABSOLUTE, height/2 - offset);
		animation.setDuration(3000);//没转一圈所需时间  单位毫秒
		animation.setRepeatCount(-1);//不停旋转
		animation.setInterpolator(new LinearInterpolator()); //使得旋转效果变的是匀速  不设置的话  转一圈  会有停顿
		makeViewRotate();
		show.addView(view);
	}

	/**
	 * 使画出的效果图旋转
	 */
	private void makeViewRotate() {
		view.setAnimation(animation);
		view.startAnimation(animation);

	}
	
	
	/**
	 * 自定义布局
	 * 
	 * @author c_fei
	 * 
	 */
	class MyView extends View {

		Paint paint;

		public MyView(Context context) {
			super(context);
			paint = new Paint();// 设置一个笔刷大小是3的黄色的画笔
			paint.setColor(Color.YELLOW);
			paint.setStrokeJoin(Paint.Join.ROUND);
			paint.setStrokeCap(Paint.Cap.ROUND);
			paint.setStrokeWidth(3);
			paint.setStyle(Style.FILL); //画出来的是实心的
		}

		@Override
		protected void onDraw(Canvas canvas) {
			//画出一个圆  并能旋转  半径是300
			paint.setColor(Color.YELLOW);
			canvas.drawCircle(width / 2, height/2 -offset, 300, paint);
			paint.setColor(Color.RED);
			paint.setTextSize(40);
			paint.setColor(Color.GRAY);
			//画出圆心
			canvas.drawPoint(width / 2, height/2 -offset, paint);
			canvas.drawText("旋转的内容", width / 2, height/2 -offset - 100, paint);
			Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
			int bitmapWidthOffset = bitmap.getWidth()/2; 
			int bitmapHeightOffset = bitmap.getHeight()/2; 
			canvas.drawBitmap(bitmap,width / 2 - bitmapWidthOffset, height/2 - offset - bitmapHeightOffset, paint);
			
			
			//画出一个矩形   充满了这个屏幕
//			paint.setColor(Color.BLUE);
//			RectF rectF = new RectF(0f, 0f, width, height);
//			canvas.drawRect(rectF, paint);
			//画出一个圆角矩形    第二个和第三个参数表示圆角x y轴的半径
//			canvas.drawRoundRect(rectF, 40f, 40f, paint);  
			
			//path的用法
//			Path path = new Path();
//			path.moveTo(10, 10); //移动到 坐标10,10    
//            path.lineTo(50, 60);    
//            path.lineTo(200,80);    
//            path.lineTo(10, 10); 
//			paint.setTextSize(20f);
//			canvas.drawTextOnPath("我喜欢android", path,10f,10f, paint);
			
			//画出弧形
//			RectF oval = new RectF(100f, 100f, 900f, 900f);
//			canvas.drawRect(oval, paint);
//			paint.setColor(Color.DKGRAY);
//			canvas.drawArc(oval, 0, 90, true, paint);
//			paint.setColor(Color.GRAY);
//			canvas.drawArc(oval, 90, 90, true, paint);
//			paint.setColor(Color.CYAN);
//			canvas.drawArc(oval, 180, 90, true, paint);
//			paint.setColor(Color.LTGRAY);
//			canvas.drawArc(oval, 270, 90, true, paint);
			
			
			
			
		}

	}

}

要使饼状图旋转，我们可以使用RotateAnimation,这里面有几个最重要的参数，就是以谁为标准，以哪个坐标为中间旋转，这里我选用的是绝对位置，旋转的坐标就是圆的中心。

二、仿搜狗圆的相连

看下运行后的效果

这是主布局，代码如下：

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

   
</LinearLayout>

Activity的代码是

public class SogouActivity extends Activity {

	private int width; // 屏幕宽度
	private int height; // 屏幕高度
	private View view;
	private LinearLayout layout;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_sogou);
		layout =(LinearLayout) this.findViewById(R.id.showsogou);
		
		Display display = getWindowManager().getDefaultDisplay();
		width = display.getWidth();
		height = display.getHeight();
		
		view = new MySogou(SogouActivity.this);
		layout.addView(view);
	}

	
	/**
	 * 模仿搜狗画圆
	 * @author c_fei
	 *
	 */
	@SuppressLint("ResourceAsColor")
	class MySogou extends View{
		
		Paint paint;
		
		public MySogou(Context context) {
			super(context);
			paint = new Paint();// 设置一个笔刷大小是3的黄色的画笔
			paint.setColor(Color.YELLOW);
			paint.setStrokeJoin(Paint.Join.ROUND);
			paint.setStrokeCap(Paint.Cap.ROUND);
			paint.setStrokeWidth(3);
		}
		
		@Override
		protected void onDraw(Canvas canvas) {
			//第一个圆
			paint.setColor(getResources().getColor(R.color.bigCircle));
			canvas.drawCircle(width/5, height/6, 100, paint);
			paint.setColor(getResources().getColor(R.color.smallCircle));
			canvas.drawCircle(width/5, height/6, 30, paint);
			
			//第一个圆 下面写的字
			paint.setTextSize(30f);
			canvas.drawText("山水之间  许嵩", width/5-120, height/6+100+50, paint);
			
			//第二个圆
			paint.setColor(getResources().getColor(R.color.bigCircle));
			canvas.drawCircle(width-300, height/6-20, 100, paint);
			paint.setColor(getResources().getColor(R.color.smallCircle));
			canvas.drawCircle(width-300, height/6-20, 30, paint);
			
			//第一个圆于第二个圆  圆心相连
			paint.setStrokeWidth(5);
			canvas.drawLine(width/5, height/6,width-300, height/6-20, paint);
			
			//第三个圆
			paint.setColor(getResources().getColor(R.color.bigCircle));
			canvas.drawCircle(width-500, height/6+250, 100, paint);
			paint.setColor(getResources().getColor(R.color.smallCircle));
			canvas.drawCircle(width-500, height/6+250, 30, paint);
			
			//第二个圆于第三个圆  圆心相连
			canvas.drawLine(width-300, height/6-20,width-500, height/6+250, paint);
		}
		
	}
	
}

这里只是简单模仿一下，真正在开发过程中，可能需求比这要复杂的多，有待我们细细研究。

下载源码