自定义VIEW③Canvas

所有的绘画都需要笔和画布,android上也不例外,android就为我们提供了功能非常强大的画布功能,也就是今天要学习的Canvas.它是一个Android基础类,几乎所有的View都依靠它来进行2D图像绘制,功能非常强大.

在本文中,就让我们管中窥豹,一睹真容

---

Canvas绘制

---

画笔

Android中的画笔为Paint类,凡是与画笔相关的,比如说画笔的各种设置等都在Paint类中,而与绘画过程,结果有关的函数等都在Canvas类中.

Paint类中有一系列方法用于初始化画笔,具体到API文档中查看(Paint类API文档(需翻墙))

我们应该在View类中定义画笔,并在使用它之前赋予各项属性.常用的初始化方法有:

Paint.setAntiAlias(true);//抗锯齿
Paint.setColor();//画笔颜色
Paint.setStyle();//填充样式
Paint.setStroke();//画笔宽度
//具体的参数请参照开发文档

定义之后,我们就可以在重写的onDraw方法中通过调用Canvas中的一系列方法完成图像的绘制.

测试用代码如下:

• myView.java:

class myView extends View
{
    public myView(Context context)
    {
       this(context,null);
    }
    public myView(Context context, AttributeSet attrs)
    {
        this(context,attrs,0);
    }
    public myView(Context context, AttributeSet attrs, int defStyleAttr)
    {
        super(context, attrs, defStyleAttr);
    }
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public myView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
            super(context, attrs, defStyleAttr, defStyleRes);
    }
    @Override
    public void onDraw(Canvas canvas){
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setColor(getResources().getColor(R.color.colorAccent));
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        paint.setStrokeWidth(3);
        canvas.drawRGB(255,255,255);
        canvas.drawLine(10,50,600,90,paint);

        canvas.drawRect(10,100,600,200,paint);

        RectF rectF = new RectF(100,300,600,500);
        canvas.drawRoundRect(rectF,10,30,paint);

        canvas.drawCircle(350,700,60,paint);
    }
}

mainActivity:

public class MainActivity extends AppCompatActivity {


    myView view;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        view = (myView) findViewById(R.id.myview);
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.cramile.myownviewtest.MainActivity">


    <com.example.cramile.myownviewtest.myView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/myview"
        android:layout_alignParentBottom="true"
        />
</RelativeLayout>

运行代码后屏幕显示为：

画布

Canvas的英文释义即为”画布”,通过API中包含的各种方法,我们可以更方便的去绘制各种精彩的效果.

Canvas类中有一系列的API操作来对画布本身进行操作,并不影响之前已经绘制的各种图形.如果了解一些Photoshop的话就可以明白:所谓的对画布本身进行操作,就是在原有图层上拷贝了一个新的图层,后续绘画都会在这个新的图层上,最终呈现的效果是将所有图层合并之后的效果.

至于说画布操作可以让绘制更加便捷,可能会有人不太明白,在这里我们假想一个情景:假如我们需要绘制一个等待界面,就像这样:,如果只考虑转动的部分,那就可以当做一个点周而复始的旋转.如果不使用画布旋转的方法的话,我们需要通过三角函数计算出每一个落点的坐标值,非常麻烦,但如果用上画布旋转的话,那么每次只需要将画布旋转一个固定角度,然后在原绘制点再重新绘制一个点即可,相比前一个方法可谓是方便不少.

PS:另一个简单的解释是画布操作是坐标轴操作,即将坐标轴进行平移,旋转等.

另附上常用的Convas指令：（感谢@GcsSloop的相关教程http://www.gcssloop.com）
画布绘制API&画布操作API(后三):

操作类型	相关API	备注
绘制颜色	drawColor, drawRGB, drawARGB	使用单一颜色填充整个画布
绘制基本形状	drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc	依次为 点、线、矩形、圆角矩形、椭圆、圆、圆弧
绘制图片	drawBitmap, drawPicture	绘制位图和图片
绘制文本	drawText, drawPosText, drawTextOnPath	依次为 绘制文字、绘制文字时指定每个文字位置、根据路径绘制文字
绘制路径	drawPath	绘制路径，绘制贝塞尔曲线时也需要用到该函数
顶点操作	drawVertices, drawBitmapMesh	通过对顶点操作可以使图像形变，drawVertices直接对画布作用、 drawBitmapMesh只对绘制的Bitmap作用
画布剪裁	clipPath, clipRect	设置画布的显示区域
画布快照	save, restore, saveLayerXxx, restoreToCount, getSaveCount	依次为 保存当前状态、 回滚到上一次保存的状态、 保存图层状态、 回滚到指定状态、 获取保存次数
画布变换	translate, scale, rotate, skew	依次为 位移、缩放、 旋转、错切
Matrix(矩阵)	getMatrix, setMatrix, concat	实际上画布的位移，缩放等操作的都是图像矩阵Matrix， 只不过Matrix比较难以理解和使用，故封装了一些常用的方法。

具体操作可以看google官方文档:https://developer.android.com/reference/android/graphics/Canvas.html
PS:后续可能会将谷歌官方API放至我的私人服务器上