Android Canvas : 2 基础绘制

最新推荐文章于 2023-09-05 18:19:25 发布

flycatdeng

最新推荐文章于 2023-09-05 18:19:25 发布

阅读量572

点赞数

分类专栏： android Android Canvas 文章标签： Android Canvas 基础绘制

本文链接：https://blog.youkuaiyun.com/flycatdeng/article/details/103097301

版权

android 同时被 2 个专栏收录

47 篇文章

订阅专栏

Android Canvas

2 篇文章

订阅专栏

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