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就是画笔，可以用来设置所需要常见的颜色、透明度、抗锯齿、混合模式、画笔宽等属性。

颜色	setColor setARGB
透明度	setAlpha
抗锯齿	setAntiAlias
混合模式	setBlendMode
画笔宽	setStrokeWidth
填充模式	setStyle

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. 

public void rotate(float degrees) public final void rotate(float degrees, float px, float py)

2.4.2 平移(translate)

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

public void translate(float dx, float dy)

2.4.3 缩放(scale)

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

public void scale(float sx, float sy) public final void scale(float sx, float sy, float px, float py)

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

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); }

2.4.4 斜切（skew）

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

public void skew(float sx, float sy) 参数含义： float sx:将画布在x方向上倾斜相应的角度，sx倾斜角度的tan值， float sy:将画布在y轴方向上倾斜相应的角度，sy为倾斜角度的tan值.

新X = x + sx * y 新Y = sy * x + y

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