canvas教程

Android 自定义View学习(七)(3)

字号+ 作者:H5之家 来源:H5之家 2017-01-20 18:09 我要评论( )

quadTo()可以用来绘制二阶贝塞尔曲线,也就是3个点确定一个曲线 private void init() {mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mPaint.setColor(Color.parseColor("#FF4081"));mPaint.setStyle(Paint.Style.STR

quadTo()可以用来绘制二阶贝塞尔曲线,也就是3个点确定一个曲线

private void init() { mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(Color.parseColor("#FF4081")); mPaint.setStyle(Paint.Style.STROKE);//设置风格为空心 mPaint.setStrokeWidth(10f); path = new Path(); path.moveTo(100f,100f); floats = new float[]{200f,200f,900f,100f}; path.quadTo(200f,200f,900f,100f); } protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawPath(path, mPaint); canvas.drawPoints(floats,mPaint); }


二阶贝塞尔曲线

图中的曲线,是由(100,100),(900,100),(200,200)三个点来确定。

cubicTo方法使用和quadTo用法类似,只是多了一组参数,多了一个点而已

path.cubicTo(200f,200f,400f,100f,900f,200f);

测试效果和quadTo很容易就分区

依稀记得高三的数学考试最后一道大题往往就是要求绘制会一个点的运动轨迹,大部分都是一段曲线或者一个椭圆之类的,和这里有些类似。

这两方法重要的是理解其中的原理,贝尔塞尔曲线等到Matrix学习结束后再进行学习

1.3.2 addTo方法

先来看简单用法

private void init() { mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(Color.parseColor("#FF4081")); mPaint.setStyle(Paint.Style.STROKE);//设置风格为空心 mPaint.setStrokeWidth(10f); path = new Path(); path.moveTo(100f,100f); rectF = new RectF(100, 100, 400, 400); path.arcTo(rectF,0,90); } protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawPath(path, mPaint); }


addTo方法

这个方法就是画出一段弧线后,将弧线的起始点和moveTo确定的path的起始点进行连接起来。弧线截取圆的一部分。圆的直径为300,经过很简单分析,圆心在(250,250)的点

1.3.3 rLineTo方法

r就是relative,相对的缩写

简单使用

private void init() { mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(Color.parseColor("#FF4081")); mPaint.setStyle(Paint.Style.STROKE);//设置风格为空心 mPaint.setStrokeWidth(10f); path = new Path(); path.moveTo(100f,100f); path.rLineTo(300,200f); } protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawPath(path, mPaint); canvas.drawPoint(300,200,mPaint); }


rLineTo方法

rLineTo方法确定的坐标是相对于moveTo来说的,实际最终的画出的直线的结束点的坐标为(400,300)

1.3.4 addArc方法

简单使用

private void init() { mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(Color.parseColor("#FF4081")); mPaint.setStyle(Paint.Style.STROKE);//设置风格为空心 mPaint.setStrokeWidth(10f); path = new Path(); path.moveTo(100f,100f); path.lineTo(300,200f); //添加弧形 rectF = new RectF(100, 100, 400, 400); path.addArc(rectF,0,90); } protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawPath(path, mPaint); canvas.drawPoint(300,200,mPaint); }


addArc方法

addArc方法和addTo方法却别是,addArc是添加一段弧形,并不将绘制的图形连接起来

1.4 canvas.drawTextOnPath 方法

在绘制的路径上,绘制文字

private void init() { //路径画笔 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(Color.parseColor("#FF4081")); mPaint.setStyle(Paint.Style.STROKE);//设置风格为空心 mPaint.setStrokeWidth(10f); //文字画笔 textPaint = new Paint(Paint.ANTI_ALIAS_FLAG); textPaint.setTextSize(60f); //路径 path = new Path(); rectF = new RectF(100, 100, 300, 400); path.addOval(rectF, Path.Direction.CW); chars = new char[]{'a','b','c','d','e'}; } protected void onDraw(Canvas canvas) { super.onDraw(canvas); //绘制路径 canvas.drawPath(path, mPaint); //绘制路径上的文字 canvas.drawTextOnPath(chars,0,chars.length,path,0f,chars.length,textPaint); }


在路径上绘制文字

在addOval方法中,可以改变路径闭合的方向,简单修改代码

path.addOval(rectF, Path.Direction.CCW);

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Android开发之50个常见实用技巧——添加悦目的动画效果

    Android开发之50个常见实用技巧——添加悦目的动画效果

    2017-01-15 08:02

  • 用Shader实现特殊效果

    用Shader实现特殊效果

    2017-01-14 17:00

  • 8.1.2 setAlpha方法:设置透明度

    8.1.2 setAlpha方法:设置透明度

    2017-01-11 12:03

  • Android使用ImageView制作透明圆弧实例代码

    Android使用ImageView制作透明圆弧实例代码

    2017-01-10 09:00

网友点评
a