Android Canvas : 2 基础绘制

目录

2.1 基础图元绘制

2.2 Paint设置

2.3 Bitmap

2.4 旋转/平移/缩放/斜切

2.4.1 旋转(rotate)

2.4.2 平移(translate)

2.4.3 缩放(scale)

2.4.4 斜切（skew）

2.1 基础图元绘制

由Canvas的draw相关的API可以看到其可以绘制一些基础图元如点、线、圆、矩形、圆角矩形、弧形、文字、Bitmap，当然也能绘制某一颜色。由方法名即可知道其绘制的内容。参见Demo BaseDrawAty.

2.2 Paint设置

若将Canvas比作画家的画布，那么Paint就是画笔，可以用来设置所需要常见的颜色、透明度、抗锯齿、混合模式、画笔宽等属性。

2.3 Bitmap

在2.1中我们已经看到有绘制Bitmap了，然后Android还提供其他几种API以供不同场景使用。Demo DrawBitmapAty

        private var mTempBmp: Bitmap? = null
        private var mBitmapRect = Rect()
        private val rectF = RectF(0f, 600f, 400f, 800f)
        private var mMatrix = Matrix()

        init {
            mTempBmp = BitmapFactory.decodeResource(resources, R.drawable.karen).apply {
                mBitmapRect = Rect(0, 0, width, height)
            }
            mMatrix.postScale(1.2f, 1.4f)
            mMatrix.postTranslate(0f, 1100f)
        }

        override fun onDetachedFromWindow() {
            mTempBmp?.apply {
                if (!isRecycled) recycle()
            }
            super.onDetachedFromWindow()
        }

        override fun onDraw(canvas: Canvas?) {
            mTempBmp?.let {
                canvas?.apply {
                    //1.绘制bitmap原图
                    drawBitmap(it, mBitmapRect.left.toFloat(), mBitmapRect.top.toFloat(), null)
                    //2.1 将bitmap映射到某个区域
                    drawBitmap(it, mBitmapRect, rectF, null)
                    //2.2 选取bitmap中的某一部分映射到某个区域
                    mBitmapRect.inset(100, 100)//原Bitmap中的一部分区域（左右上下全部向内缩小100像素后的区域）
                    rectF.offset(0f, 250f)
                    drawBitmap(it, mBitmapRect, rectF, null)
                    //2.3使用Matrix对图片实现形变后再进行显示
                    drawBitmap(it, mMatrix, null)
                }
            }
        }//end of onDraw

2.4 旋转/平移/缩放/斜切

此处的变换主要指Canvas的旋转、平移、缩放、斜切

首先需要指出的是，Canvas的坐标原点在View的左上方（不是手机屏幕），以上变换操作的对象是Canvas的坐标系。如下图，红色部分是手机屏幕绘制图标坐标系，而绿色是则是Canvas的坐标系。

2.4.1 旋转(rotate)

Canvas的旋转以顺时针为正角，默认绕原点旋转，也可以设置绕某一点旋转。详见Demo CanvasRotateAty. 

2.4.2 平移(translate)

Canvas进行平移后，整个坐标系都会做平移运动，平移后其坐标原点不一定在View的左上角。Demo CanvasTranslateAty

2.4.3 缩放(scale)

Canvas缩放默认以原点为中心进行缩放，当然也可以像旋转一样，一某点为中心进行缩放。Demo CanvasScaleAty

我们可以从源码看到，以某点为中心的缩放会经过一下步骤：将Canvas坐标系平移至中心点（坐标原点变换了）；以中心点进行缩放；在将坐标系平移至左上角（坐标原点又回到了View的左上角）

2.4.4 斜切（skew）

斜切，有些地方叫错切，是一种特殊类型的线性变换。Demo CanvasSkewAty

Android之玩转View（七）：Canvas的坐标变换