canvas教程

Canvas的常见用法

字号+ 作者:H5之家 来源:H5之家 2017-08-28 15:00 我要评论( )

作者:彩笔学长 原文地址: Canvas Canvas是一种抽象概念,是2D图形系统中的重要部分,canvas一系列函数最终都是Android 2D图形库Skia的一些列封装,对应在SKCanvas.cpp。canvas在系统中的位置如下图所示: 可以将canvas看成一个透明的图层,使用canvas之后

作者:彩笔学长
原文地址:

Canvas

Canvas是一种抽象概念,是2D图形系统中的重要部分,canvas一系列函数最终都是Android 2D图形库Skia的一些列封装,对应在SKCanvas.cpp。canvas在系统中的位置如下图所示:


可以将canvas看成一个透明的图层,使用canvas之后会产生一个透明图层,然后在这个新图层上画图,画完之后覆盖在屏幕上显示,叠加。 比较经典的例子就是:

protected void onDraw(Canvas canvas) { super.onDraw(canvas); //构造一个矩形 Rect rect1 = new Rect(0, 0, 400, 220); //在平移画布前用绿色画下边框 canvas.drawRect(rect1, paint_green); //平移画布后,再用红色边框重新画下这个矩形 canvas.translate(100, 100); canvas.drawRect(rect1, paint_red); }

我们首先画了一个绿色矩形框,然后将canvas平移了,接着画了一个红色的矩形框,结果如下:


这里我们会发现,平移了canvas之后绿色矩形框没发生变化!拉近镜头我们仔细看看究竟发生了什么,如何印证canvas每次会产生一个透明图层?

调用canvas.drawRect(rect1, paint_green);时,产生一个Canvas透明图层,由于当时还没有对坐标系平移,所以坐标原点是(0,0);再在系统在Canvas上画好之后,覆盖到屏幕上显示出来,过程如下图(图片来自网络,链接在文后):


然后再第二次调用canvas.drawRect(rect1, paint_red);时,又会重新产生一个全新的Canvas画布,此时由于使用tranlate移动了画布 因而在画图时是以新原点来产生视图的,然后合成到屏幕上,超出部分不显示,最后就是我们看到结果了。

Canvas常用方法


下面来清点一下重要的API,绘制颜色就不赘述了。

绘制基本形状

drawRoundRecf画圆角矩形

// 第一种 RectF rectF = new RectF(100,100,400,400); canvas.drawRoundRect(rectF,30,30,paint_red); // 第二种 需要api21,一般常用第一种 // canvas.drawRoundRect(100,100,800,400,30,30,paint_red);



这里是采用第一种方法画出来的,参数30(rx),30(ry)是椭圆的两个半径,用来确定圆角的弧度。

drawOval画椭圆

// 第一种 RectF rectF = new RectF(100,100,500,400); canvas.drawOval(rectF,paint_red); // 第二种 canvas.drawOval(100,100,800,400,paint_red);

通常也是使用第一种,画椭圆只需要一个矩形即可,椭圆是改矩形的内切。


drawArc画圆弧

// 第一种 public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint){} // 第二种 public void drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, @NonNull Paint paint) {}

可以看出这里使用了椭圆的形状,除此之外加上了三个参数:

startAngle // 开始角度 sweepAngle // 扫过角度 useCenter // 是否和中心点连成一个封闭的图形 RectF rectF = new RectF(100, 100, 400, 400); RectF rectF1 = new RectF(200, 200, 500, 500); canvas.drawArc(rectF, 0, 40, true, paint_green); canvas.drawArc(rectF1, 0, 40, false, paint_green);


画圆弧要清楚,0-40画弧,首先水平那根线是起点,按顺时针40度停止。

drawPath

这个结合path一起使用会非常强大!(path用法也是内涵满满,这里就不展开叙述了)

这里看下canvas中的用法:

public void drawPath(@NonNull Path path, @NonNull Paint paint){}

传入路径,和对应的画笔即可:

Path path = new Path(); path.moveTo(50,50); path.quadTo(30,220,320,450); canvas.drawPath(path,paint_green);

这里使用path画了一条贝塞尔曲线。

 

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

相关文章
  • HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例

    HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例

    2017-08-28 15:02

  • 属性、定义及方法(学习笔记)

    属性、定义及方法(学习笔记)

    2017-08-28 14:03

  • (89)Canvas(续) · Qt 学习之路 2 · 看云

    (89)Canvas(续) · Qt 学习之路 2 · 看云

    2017-08-28 14:03

  • html5 canvas掷骰子(简单,学习基础canvas)

    html5 canvas掷骰子(简单,学习基础canvas)

    2017-08-28 14:03

网友点评