`

canvas 绘制各种简单图形

 
阅读更多
public class MyView extends View {

	private Paint paint1 = new Paint();
	private Paint paint2 = new Paint();
	private Paint paint3 = new Paint();
	private boolean useCenter = true;
	private float[] textSizeArray = new float[] {15,18,21,24,27};
	public MyView(Context context) {
		super(context);
		setBackgroundColor(Color.WHITE);
		paint1.setColor(Color.BLACK);
		paint2.setStrokeWidth(2);
		
		paint2.setColor(Color.RED);
		paint2.setStrokeWidth(4);
		
		paint3.setColor(Color.BLUE);
		paint3.setStrokeWidth(6);
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		// 像素点
		canvas.drawPoint(60, 120, paint3);
		canvas.drawPoint(70, 130, paint3);
		canvas.drawPoints(new float[] {70,140,75,145,75,160}, paint2);
		
		// 直线
		canvas.drawLine(10, 10, 300, 10, paint1);
		canvas.drawLine(10, 30, 300, 30, paint2);
		canvas.drawLine(10, 50, 300, 50, paint3);
		
		// 正方形
		drawLinesExt(canvas, new float[] { 10, 70,120,70,120,170,10,170 },paint2);
		drawLinesExt(canvas, new float[] {25,85,105,85,105,155,25,155 },paint3);
		
		//三角形
		drawLinesExt(canvas, new float[] {160,70,230,150,170,155}, paint2);
		// 设置非填充状态
		paint2.setStyle(Style.STROKE);
		// 画实心圆
		canvas.drawCircle(260,110, 30, paint2);
		RectF rectF = new RectF();
		rectF.left = 30;
		rectF.top = 190;
		rectF.right = 120;
		rectF.bottom = 280;
		// 画弧
		canvas.drawArc(rectF, 0, 200, useCenter, paint2);
		rectF.left = 140;
		rectF.top = 190;
		rectF.right = 280;
		rectF.bottom = 290;
		paint2.setStyle(Style.STROKE);
		
		// 画空心椭圆
		canvas.drawArc(rectF, 0, 360, useCenter, paint2);
		rectF.left = 160;
		rectF.top = 190;
		rectF.right = 280;
		rectF.bottom = 280;
		paint3.setStyle(Style.STROKE);
		// 画空心圆
		canvas.drawArc(rectF, 0, 360, useCenter, paint3);
		float y = 0;
		 // 绘制文本
		for (int i = 0; i < textSizeArray.length; i++) {
			paint1.setTextSize(textSizeArray[i]);
			paint1.setColor(Color.BLUE);
			canvas.drawText("android(宽度: "+paint1.measureText("Android")+")", 20, 315+y, paint1);
			y += paint1.getTextSize()+5;
		}
		paint1.setTextSize(22);
		// 绘制文本,单独设置每一个字符的坐标。第一个坐标(180,230)是"圆"的坐标,(210,250)是“形”的坐标
		canvas.drawPosText("圆形",new float[] {180,230,210,250}, paint1);
	}
       // 触摸事件改变
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		if (useCenter) {
			useCenter = false;
			paint1.setColor(Color.RED);
			paint2.setColor(Color.BLACK);
			paint3.setColor(Color.GREEN);
		}
		else {
			useCenter = true;
			paint1.setColor(Color.BLACK);
			paint2.setColor(Color.RED);
			paint3.setColor(Color.BLUE);
		}
		for (int i = 0; i < textSizeArray.length/2; i++) {
			float textSize = textSizeArray[i];
			textSizeArray[i] = textSizeArray[textSizeArray.length-i-1];
			textSizeArray[textSizeArray.length-i-1] = textSize;
		}
		invalidate(); // 重绘
		return super.onTouchEvent(event);
	}

	private void drawLinesExt(Canvas canvas, float[] pts, Paint paint) {
		for (int i = 0; i < pts.length; i +=2) {
			int stopxIndex = i+2;
			int stopyIndex =i+3;
			// 设置最后一个点的横坐标索引为起始点的横坐标索引
			if (stopxIndex >pts.length-1) {
				stopxIndex = 0;
			}
			// 设置最后一个点的纵坐标索引为起始点的纵坐标索引
			if (stopyIndex > pts.length-1) {
				stopyIndex = 1;
			}
			canvas.drawLine(pts[i], pts[i+1], pts[stopxIndex], pts[stopyIndex], paint);
		}
	}

}

 

 

  • 大小: 7.1 KB
分享到:
评论

相关推荐

    vue+canvas绘制图形

    首先,我们来看"vue+canvas绘制图形"这个主题。Vue组件是Vue.js的核心特性之一,它允许我们将UI拆分成独立、可复用的部分。在这个项目中,我们可以创建一个名为`Canvas.vue`的Vue组件,专门负责处理Canvas元素。在`...

    html5 canvas绘制几何图形动画特效

    以下是对HTML5 Canvas绘制几何图形动画特效的详细讲解。 1. **Canvas API基础** HTML5 Canvas是一个基于矢量图形的画布,通过JavaScript进行编程操作。它提供了`&lt;canvas&gt;`标签,该标签在页面上创建一个矩形区域,...

    html5 canvas绘制七巧板图形代码

    总结来说,HTML5 Canvas绘制七巧板图形涉及到HTML和JavaScript的基本语法,Canvas API的使用,以及一些基本的几何和数学知识。通过这样的项目,你可以深入理解Canvas绘图原理,同时锻炼到编程逻辑和问题解决能力。

    2.22 用canvas绘制一角弯月|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、游戏开发从入门到精通全系列课程

    2.22_用canvas绘制一角弯月|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、游戏开发从入门到精通全

    canvas绘制动态心电图

    在IT行业中,Canvas是HTML5的一个重要特性...总的来说,使用Canvas绘制动态心电图涉及HTML5、JavaScript、数据处理和图形渲染等多个技术领域,需要结合理论知识与实践操作,才能创建出真实感强、性能良好的心电图展示。

    html5利用canvas绘制各种基本图形工具.rar

    用html5实现的简单在线画图工具,包括以下几个部分: 图像 单独的按钮组 保存图片、清除画布 操作组(所有按钮中只能选取一个) 工具(画笔、橡皮、油漆桶、吸管、文字、放大) 形状(画线、画圆圈、画方框、画三角形、画...

    使用Canvas类绘制android机器人

    在Android开发中,Canvas是图形绘制的核心类,它允许开发者在Bitmap或者其他可绘图对象上进行画图操作。本文将深入探讨如何利用...在实践中不断探索和学习,你将能够熟练地运用Canvas绘制出更多富有创意的图形和动画。

    html5 canvas自定义绘制多边图形代码

    Canvas 提供了一个二维绘图环境,可以用来绘制图形、动画,甚至处理图像。在Canvas上绘制多边形是常见的需求,尤其在创建自定义图形、游戏或者数据可视化时。本篇文章将深入探讨如何使用HTML5 Canvas自定义绘制多边...

    Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

    在Android开发中,Canvas是用于在屏幕上绘制2D图形的核心组件。它允许开发者直接在Bitmap上进行绘制操作,实现各种视觉效果。以下是对标题和描述中提到的各种图形绘制方法的详细说明: 1. **点(Point)**:使用`...

    HTML5 canvas绘制流程图

    综上所述,HTML5 canvas绘制流程图涉及的技术包括canvas基本绘图方法、事件监听与处理、图形交互逻辑以及可能的第三方库的使用。通过这些技术,我们可以创建出一个无需Flash且功能丰富的类似Visio的流程图工具,支持...

    html5 canvas绘制管道里跳动小球动画特效

    "html5 canvas绘制管道里跳动小球动画特效"是一个利用Canvas API实现的典型应用场景,旨在创建一个游戏或者可视化效果,其中一个小球在两个移动的管道之间上下跳跃。 在Canvas上绘制任何图形或动画,首先需要获取...

    使用canvas绘制钟表

    在HTML5中,Canvas元素提供了一个可编程的2D绘图环境,允许开发者直接在网页上绘制图形。本教程将详细介绍如何使用canvas绘制一个动态的钟表,这涉及到JavaScript和Canvas API的基础知识。 首先,我们需要在HTML...

    canvas绘制的流程图

    HTML5的Canvas是一个强大的绘图工具,允许...综上所述,掌握canvas绘制流程图不仅涉及基本的图形绘制技巧,还需要理解HTML5的事件处理和用户交互设计。通过实践和学习,你可以创建出功能丰富、交互性强的流程图应用。

    Canvas绘制心电图

    Canvas是HTML5的一个核心特性,它提供了一个二维绘图环境,允许开发者通过JavaScript代码动态地绘制图形。要绘制心电图,我们需要理解几个关键概念: 1. **坐标系统**:Canvas是一个像素网格,它的左上角为(0, 0)...

    canvas绘制文本内容自动换行的实现代码

    在HTML5的Canvas API中,`canvas`元素提供了丰富的图形绘制功能,包括文本绘制。然而,Canvas API本身并不支持文本的自动换行,这意味着开发者需要自己编写代码来实现这一功能。本文将详细介绍如何使用JavaScript...

    基于C#开发的图像绘制、Canvas绘图及图片处理应用开发

    本教程主要聚焦于使用C#进行图像绘制与处理,利用Canvas这一强大的绘图工具,实现多种图形操作和效果。 首先,我们要了解Canvas是WPF(Windows Presentation Foundation)框架中的一个关键元素,它提供了一个二维...

    html5结构图canvas绘制组织结构图框架代码

    Canvas通过JavaScript API提供了丰富的图形绘制功能,使得开发者无需依赖Flash或其他插件就能创建复杂的2D图形,包括组织结构图。本框架代码就是利用HTML5的Canvas元素来绘制组织结构图。 组织结构图是一种展示公司...

    canvas绘制音频波形-纯js自写

    Canvas作为Web开发中的一个强大工具,允许我们进行动态图形绘制,非常适合用来展示音频文件的波形。让我们一起了解这个过程。 首先,我们需要获取音频数据。这通常涉及到使用Web Audio API,它为Web应用提供了丰富...

    基于openlayers和canvas绘制海量数据的实现

    总之,"基于openlayers和canvas绘制海量数据的实现"是一个高效处理和展示地理信息的技术方案,它结合了OpenLayers的灵活性和Canvas的高性能渲染能力,为开发者提供了强大的工具来应对大数据挑战。通过理解和掌握这些...

    一个基于html5与canvas绘制的弹幕播放器.zip

    这个"一个基于html5与canvas绘制的弹幕播放器.zip"项目,显然就是利用HTML5的Canvas API来实现弹幕播放器的功能。 弹幕播放器,常见于视频网站,允许用户发送文字信息,这些信息会以滚动、飞过或其它动画形式在屏幕...

Global site tag (gtag.js) - Google Analytics