闲聊自定义控件之基础――Canvas

前面介绍过了有关绘制的基础知识，包括Color、坐标、Path、Paint等，今天主要梳理下Canvas的相关知识点。Canvas一般称为画布，但其实它只是一套画图的API，使用这些API可以对内存进行操作，进而画出想要的图形。

打开android.graphics包下的Canvas类，可以看到其内部提供的方法还是比较多的，为了便于理解，对方法进行分类总结。

绘制的主要方法如下图

正如这些的方法名一样，它们的功能非常的明确，也非常容易理解。

drawArc：画扇形或者将弧两端连接形成的图形
drawARGB：绘制ARGB，用于颜色
drawBitmap：绘制bitmap
drawBitmapMesh：用于图像扭曲
drawCircle：绘制圆
drawColor：绘制颜色
drawLine：绘制线段
drawLines：绘制多个线段
drawOval：绘制椭圆
drawPaint：将画笔绘制到画布上
drawPatch：绘制NinePatch
drawPath：将路径绘制到画布上
drawPicture：绘制图片
drawPoint：绘制点
drawPoints：绘制多个点
drawRect：绘制矩形
drawRGB：绘制颜色
drawRoundRect：绘制圆角矩形
drawText：绘制文字
drawTextOnPath：将文字按照某个路径绘制

平移变化：调用translate方法实现，传入对应的x,y坐标平移距离

 /**      * Preconcat the current matrix with the specified translation      *      * @param dx The distance to translate in X      * @param dy The distance to translate in Y     */     public void translate(float dx, float dy) {         if (dx == 0.0f && dy == 0.0f) return;         nTranslate(mNativeCanvasWrapper, dx, dy);     }

缩放变化：调用scale函数实现，根据需要传入缩放比例和参考点

 /**      * Preconcat the current matrix with the specified scale.      *      * @param sx The amount to scale in X      * @param sy The amount to scale in Y      */     public void scale(float sx, float sy) {         if (sx == 1.0f && sy == 1.0f) return;         nScale(mNativeCanvasWrapper, sx, sy);     }      /**      * Preconcat the current matrix with the specified scale.      *      * @param sx The amount to scale in X      * @param sy The amount to scale in Y      * @param px The x-coord for the pivot point (unchanged by the scale)      * @param py The y-coord for the pivot point (unchanged by the scale)      */     public final void scale(float sx, float sy, float px, float py) {         if (sx == 1.0f && sy == 1.0f) return;         translate(px, py);         scale(sx, sy);         translate(-px, -py);     }

旋转变化：调用rotate方法实现，需要传入旋转度数

  /**      * Preconcat the current matrix with the specified rotation.      *      * @param degrees The amount to rotate, in degrees      */     public void rotate(float degrees) {         if (degrees == 0.0f) return;         nRotate(mNativeCanvasWrapper, degrees);     }

倾斜变化：调用skew，传入每个方向的倾斜度

  /**      * Preconcat the current matrix with the specified skew.      *      * @param sx The amount to skew in X      * @param sy The amount to skew in Y      */     public void skew(float sx, float sy) {         if (sx == 0.0f && sy == 0.0f) return;         nSkew(mNativeCanvasWrapper, sx, sy);     }

综合变化：调用matrix 实现，用于实现平移缩放旋转动画

 /**      * Completely replace the current matrix with the specified matrix. If the      * matrix parameter is null, then the current matrix is reset to identity.      *      * <strong>Note:</strong> it is recommended to use {@link #concat(Matrix)},      * {@link #scale(float, float)}, {@link #translate(float, float)} and      * {@link #rotate(float)} instead of this method.      *      * @param matrix The matrix to replace the current matrix with. If it is      *               null, set the current matrix to identity.      *      * @see #concat(Matrix)      */     public void setMatrix(@Nullable Matrix matrix) {         nSetMatrix(mNativeCanvasWrapper,                          matrix == null ? 0 : matrix.native_instance);     }

快照是通过一定的方法，对画布或图层进行保存和恢复，方法及含义如下：

save：保存画布当前状态
saveLayer：保存图层当前状态
restore：恢复到上次保存的状态
restoreToCount：恢复到指定的状态
getSaveCount：返回canvas占里保存的状态数量

所谓的裁剪，也就是控制画布的显示区域，其方法如下图：

画布的裁剪在自定义控件的应用也比较常见，如文字的部分显示。在自定义View上draw上所有文字，然后通过控制显示区域达到显示部分文字的效果，通过实时改变裁剪区域，可以实现一定的动画效果。另外可以综合画布的快照功能，实现图片拼接，进而实现动画（后面实战部分会有demo讲解）。

文章来源: 闲聊自定义控件之基础――Canvas

标签

param

matrix