Android利用canvas画各种图形

标签: android 利用 canvas | 发表时间:2014-05-26 01:06 | 作者:tsdfk1455
出处:http://blog.csdn.net

canvas通俗的说就是一张画布,我们可以使用画笔paint,在其上面画任意的图形。


原理:

可以把canvas视为Surface的替身或者接口,图形便是绘制在Surface上的。Canvas封装了所有的绘制调用。通过Canvas,

绘制到Surface上的内容首先存储到一个内存区域(也就是对应的Bitmapz中),该Bitmap最终会呈现到窗口上。


使用:

1、Canvas可以直接new Canvas();

2、在View中重写OnDraw()方法,里面有一个Canvas,今天讨论的内容。


方法:

//绘制区域,参数一为RectF一个区域 

drawRect(RectF rect, Paint paint) 

//绘制一个路径,参数一为Path路径对象

drawPath(Path path, Paint paint) 

 //贴图,参数一就是我们常规的Bitmap对象,参数二是源区域(这里是bitmap),参数三是目标区域

(应该在canvas的位置和大小),参数四是Paint画刷对象,因为用到了缩放和拉伸的可能,当原始

Rect不等于目标Rect时性能将会有大幅损失。

drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) 

//画线,参数一起始点的x轴位置,参数二起始点的y轴位置,参数三终点的x轴水平位置,

参数四y轴垂直位置,最后一个参数为Paint 画刷对象。

drawLine(float startX, float startY, float stopX, float stopY, Paintpaint) 

//画点,参数一水平x轴,参数二垂直y轴,第三个参数为Paint对象。

drawPoint(float x, float y, Paint paint) 

  //渲染文本,Canvas类除了上面的还可以描绘文字,参数一是String类型的文本,参数二x轴,

参数三y轴,参数四是Paint对象。

drawText(String text, float x, floaty, Paint paint)

//画椭圆,参数一是扫描区域,参数二为paint对象;

drawOval(RectF oval, Paint paint)

// 绘制圆,参数一是中心点的x轴,参数二是中心点的y轴,参数三是半径,参数四是paint对象;

drawCircle(float cx, float cy, float radius,Paint paint)

//画弧,参数一是RectF对象,一个矩形区域椭圆形的界限用于定义在形状、大小、电弧,参数二是

起始角(度)在电弧的开始,参数三扫描角(度)开始顺时针测量的,参数四是如果这是真的话,包括

椭圆中心的电弧,并关闭它,如果它是假这将是一个弧线,参数五是Paint对象;

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)


接下来就要开始画了。还需要工具Paint,path

Paint ,就是画笔,我们new paint();等到一只画笔,然后设置它的一些属性。

Paint类常用方法:

setARGB(int a, int r, int g, int b) // 设置 Paint对象颜色,参数一为alpha透明值

setAlpha(int a) // 设置alpha不透明度,范围为0~255

setAntiAlias(boolean aa) // 是否抗锯齿

setColor(int color)  // 设置颜色,这里Android内部定义的有Color类包含了一些常见颜色定义

setTextScaleX(float scaleX)  // 设置文本缩放倍数,1.0f为原始

setTextSize(float textSize)  // 设置字体大小

setUnderlineText(booleanunderlineText)  // 设置下划线

setStyle(Style.STROKE)//设置画笔空心


直接上例子:

public class DrawviewActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// set DrawView's width and height
		Display d = getWindowManager().getDefaultDisplay();
		DrawView dv = new DrawView(this);
		dv.width = d.getWidth();
		dv.height = d.getHeight();
		setContentView(dv);
	}
	class DrawView extends View {

		public float width;
		public float height;
		private Paint mpaint;

		public DrawView(Context context) {
			super(context);
			mpaint = new Paint();
			mpaint.setColor(Color.RED);
			mpaint.setAntiAlias(true);

		}

		@Override
		protected void onDraw(Canvas canvas) {
			// TODO Auto-generated method stub
			super.onDraw(canvas);

			// drawtext
			canvas.save();
			mpaint.setTextSize(30);
			canvas.drawText("hello honjane", 20, 20, mpaint);
			canvas.restore();

			// drawRect
			canvas.save();
			RectF r = new RectF(40, 40, 60, 60);
			mpaint.setColor(Color.BLUE);
			canvas.drawRect(r, mpaint);
			canvas.restore();

			canvas.save();
			mpaint.setColor(Color.BLUE);
			canvas.drawRect(65, 40, 85, 60, mpaint);
			canvas.restore();

			// drawCircle
			canvas.save();
			mpaint.setStyle(Style.STROKE);
			canvas.drawCircle(width / 2, height / 2, 100, mpaint);
			canvas.restore();

			// drawArc
			canvas.save();
			RectF oval1 = new RectF(150, 300, 180, 400);
			canvas.drawArc(oval1, 180, 250, false, mpaint);// 小弧形
			oval1.set(300, 300, 600, 780);
			canvas.drawArc(oval1, 230, 170, false, mpaint);
			oval1.set(200, 300, 500, 780);
			canvas.drawArc(oval1, 230, 170, true, mpaint);

			canvas.restore();

			// 三角形

			canvas.save();
			mpaint.setStyle(Style.FILL);
			Path p = new Path();
			p.moveTo(80, 100);
			p.lineTo(140, 300);
			p.lineTo(20, 300);
			p.close();
			canvas.drawPath(p, mpaint);
			canvas.restore();

			canvas.save();
			mpaint.setStyle(Paint.Style.FILL);// 充满
			mpaint.setColor(Color.LTGRAY);
			mpaint.setAntiAlias(true);// 设置画笔的锯齿效果
			canvas.drawText("画圆角矩形:", 10, 260, mpaint);
			RectF oval3 = new RectF(80, 260, 200, 300);// 设置个新的长方形
			canvas.drawRoundRect(oval3, 20, 15, mpaint);// 第二个参数是x半径,第三个参数是y半径
			canvas.restore();

			// 可变色的
			canvas.save();
			Shader shader = new LinearGradient(0, 0, 100, 100, new int[] {
					Color.BLACK, Color.CYAN, Color.DKGRAY, Color.GRAY }, null,
					Shader.TileMode.MIRROR);
			mpaint.setShader(shader);
			RectF oval2 = new RectF(250, 100, 450, 300);
			canvas.drawArc(oval2, 200, 130, true, mpaint);
			canvas.restore();

			//画图片
			canvas.save();
			Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);  
		    canvas.drawBitmap(bitmap, 250,360, mpaint);  
		    canvas.restore();
		}
	}
}





作者:tsdfk1455 发表于2014-5-25 17:06:23 原文链接
阅读:77 评论:0 查看评论

相关 [android 利用 canvas] 推荐:

Android利用canvas画各种图形

- - CSDN博客移动开发推荐文章
canvas通俗的说就是一张画布,我们可以使用画笔paint,在其上面画任意的图形. 可以把canvas视为Surface的替身或者接口,图形便是绘制在Surface上的. Canvas封装了所有的绘制调用. 绘制到Surface上的内容首先存储到一个内存区域(也就是对应的Bitmapz中),该Bitmap最终会呈现到窗口上.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

html5 canvas 图像处理

- - HTML5研究小组
前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理,在此稍稍交代一下. 与matlab处理图像类似的是,这里也是采用图像矩阵的形式. 下面就介绍一个简单的例子:. context1.drawImage(image,0,0);//绘制原始图像,(0,0)表示图像的左上角位与canvas画布的位置.

备份:html5 canvas cheat sheet

- - 膘叔
纯备份资料,HTML5的canvas资料.

HTML5 Canvas双缓存实例

- - Web前端 - ITeye博客
转自:http://www.108js.com/article/article3/30046.html?id=255. 下面是用HTML5的标签写的一个视差滚动动画的示例. 采用了制作动画或者游戏编程中常用的双缓冲技术:获取到页面中的Canvas对象之后,创建了一个与页面Canvas同样大小的Canvas对象.

使用 Fabric.js 玩转 H5 Canvas

- - V2EX - 技术
之前使用这个框架写过一个卡片 DIY 的项目,中间遇到很多问题都只能通过 google 或 github issues 才能解决,国内资料较少,所以才想写这篇文章来简单的做下总结,希望可以帮到其他人哈. 附上个人项目地址: vue-card-diy 欢迎 star~ ✨. 什么是 Fabric.js?.

HTML5 Canvas: 测试浏览器是否支持Canvas

- - CSDN博客Web前端推荐文章
本文翻译自Steve Fulton & Jeff Fulton. 在获取HTML页面上Canvas元素的引用后,我们需要测试一下该元素是否包含“上下文”(context). Canvas的上下文指的是由浏览器定义的用于绘画的平面. 简单地说,如果上下文不存在的话,Canvas也就名存实亡了. 测试浏览器是否支持Canvas有好几种方法.

使用JavaScript和Canvas开发游戏(一)

- iVane - 为之漫笔
原文作者:Matthew Casperson • 编辑:Michele McDonough. 原文链接: Game Development with JavaScript and the Canvas element. 3、通过Canvas元素实现高级图像操作. 4、通过Canvas实现视差滚动. 8、JavaScript键盘输入.

HTML5 Canvas开发框架:CasualJS Framework

- Jimmy - ITeye论坛最新讨论
CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架. 虽然Canvas提供了强大的绘图功能,但满足不了高级开发的需要. 利用CasualJS的显示对象架构及渲染机制,你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象.

25 超棒的 HTML5 Canvas 游戏

- 迎客松 - LinuxEden开源社区-Linux伊甸园
Canvas 元素作为HTML5标准的一部分,允许你通过脚本动态渲染点阵图像. 这是为了基于浏览器的矢量图形而设计. HTML Canvas 把一个绘图 API 展现给 JS 客户端,使得脚本能够把想绘制的东西都绘制到一块画布上. 阅读全文 | 邮件推荐 | 评论回复.