android 范围裁切，几何变换

以下为几何变换学习笔记，知识点都在注释里

/**
 * 该事例主要用来学习范围裁切跟几何变换
 * canvas的范围裁切 clipRectf
 *
 */
private val IMAGE_WIDTH = 180f.dp
private val IMAGE_PADDING = 100f.dp

class CameraView(context: Context, attr: AttributeSet) : View(context, attr) {
    private var paint = Paint(Paint.ANTI_ALIAS_FLAG)
    private var path = Path().apply {
        addOval(
            IMAGE_PADDING,
            IMAGE_PADDING,
            IMAGE_PADDING + IMAGE_WIDTH,
            IMAGE_PADDING + IMAGE_WIDTH, Path.Direction.CCW
        )
    }
    private var camera = Camera()

    init {
        //直接旋转是行不通的，因为此时默认的轴心是在左上角0，0处
        camera.rotateX(60f)
    }

    @RequiresApi(Build.VERSION_CODES.O)
    override fun onDraw(canvas: Canvas) {

        //定义切割矩形的坐标范围
//        canvas.clipRect(
//            IMAGE_PADDING,
//            IMAGE_PADDING,
//            IMAGE_PADDING + IMAGE_WIDTH / 3,
//            IMAGE_PADDING + IMAGE_WIDTH / 3
//        )
//        //反向切割显示，跟canvas.clipRect刚好相反
//        canvas.clipOutRect( IMAGE_PADDING,
//            IMAGE_PADDING,
//            IMAGE_PADDING + IMAGE_WIDTH / 3,
//            IMAGE_PADDING + IMAGE_WIDTH / 3)
        //这种方式可以切圆形，或者别的图形，但是会有毛边，也就是所谓的锯齿，使用Xfermode是没有毛边的
//        canvas.clipPath(path)
//        canvas.drawBitmap(getAvatar(IMAGE_WIDTH.toInt()), IMAGE_PADDING, IMAGE_PADDING, paint)

        //canvas的几何变换，api本身很简单，但是如果多个变换组合情况下，坐标系一直在变动，容易混乱
        //这里总结一个规律，如果是先变换后Draw的情况下，可以倒着写，这样不需要考虑坐标的问题
        //需要牢记的是，几何变换变换的是canvas，也就是画布，而不是要画的图形在变换

//        canvas.translate(100f, 100f)
//        canvas.rotate(45f, IMAGE_PADDING + IMAGE_WIDTH / 2, IMAGE_PADDING + IMAGE_WIDTH / 2)
//        canvas.drawBitmap(getAvatar(IMAGE_WIDTH.toInt()), IMAGE_PADDING, IMAGE_PADDING, paint)

//        val matrix = Matrix()
        //Matrix的几何变换，如果不想考虑几何变换中的坐标变换，可以用Matrix.post**对应的api
        //        matrix.postRotate()
        //        matrix.postTranslate()
        //当然也支持canvas的规则，可以使用pre**对应的api
//        matrix.preRotate()
//        matrix.preTranslate()

        //camera 观察点是在屏幕左上角（或者父view的坐标原点，但是会有一个z轴的高度，屏幕往里为正，靠近人眼为负），类比灯光照射物品的投影，观察点离物品越近，投影越大，并且不同像素手机上这个投影效果不太一样
        //为了适配，使用setLocation 最后一个参数Z来设置这个观察点的距离，并且使用 resources.displayMetrics.density来适配这个Z的值
        canvas.save()
        camera.setLocation(0f, 0f, -8 * resources.displayMetrics.density)
        //如果观察点在左边原点，会使view的轮廓拉伸，并且view离观察点的x y做标越远，拉伸越严重，所以需要把观察点的xy坐标设置为view的正中央，这样可以避免拉伸问题
        //但是又因为观察点本身是没有api来设置坐标的，所以只能通过移动canvas来移动观察点
        canvas.translate(IMAGE_PADDING + IMAGE_WIDTH / 2, IMAGE_PADDING + IMAGE_WIDTH / 2)
        //camera.applyToCanvas(canvas)
        canvas.rotate(-30f)
        canvas.clipRect(
            -IMAGE_WIDTH ,
            -IMAGE_WIDTH ,
            IMAGE_WIDTH,
            0f
        )
        canvas.rotate(30f)
        canvas.translate(-IMAGE_PADDING - IMAGE_WIDTH / 2, -IMAGE_PADDING - IMAGE_WIDTH / 2)
        canvas.drawBitmap(getAvatar(IMAGE_WIDTH.toInt()), IMAGE_PADDING, IMAGE_PADDING, paint)
        canvas.restore()

        canvas.save()
        camera.setLocation(0f, 0f, -8 * resources.displayMetrics.density)
        canvas.translate(IMAGE_PADDING + IMAGE_WIDTH / 2, IMAGE_PADDING + IMAGE_WIDTH / 2)
        canvas.rotate(-30f)
        camera.applyToCanvas(canvas)
        canvas.clipRect(
            -IMAGE_WIDTH ,
            0f,
            IMAGE_WIDTH ,
            IMAGE_WIDTH
        )
        canvas.rotate(30f)
        canvas.translate(-IMAGE_PADDING - IMAGE_WIDTH / 2, -IMAGE_PADDING - IMAGE_WIDTH / 2)
        canvas.drawBitmap(getAvatar(IMAGE_WIDTH.toInt()), IMAGE_PADDING, IMAGE_PADDING, paint)
        canvas.restore()
    }

    fun getAvatar(width: Int): Bitmap {
        val options = BitmapFactory.Options()
        options.inJustDecodeBounds = true
        BitmapFactory.decodeResource(resources, R.drawable.image_header, options)
        options.inJustDecodeBounds = false
        options.inDensity = options.outWidth
        options.inTargetDensity = width
        return BitmapFactory.decodeResource(resources, R.drawable.image_header, options)
    }

以上最终实现为一个简单的折纸效果，从右上到左下折一半，效果如下：

Snipaste_2022-05-12_23-26-43.png

另外一个事例关键代码为：

 canvas.save()
        camera.setLocation(0f, 0f, -8 * resources.displayMetrics.density)
        canvas.translate(IMAGE_PADDING + IMAGE_WIDTH / 2, IMAGE_PADDING + IMAGE_WIDTH / 2)
        canvas.clipRect(
            -IMAGE_WIDTH ,
            -IMAGE_WIDTH ,
            IMAGE_WIDTH,
            0f
        )
        canvas.translate(-IMAGE_PADDING - IMAGE_WIDTH / 2, -IMAGE_PADDING - IMAGE_WIDTH / 2)
        canvas.drawBitmap(getAvatar(IMAGE_WIDTH.toInt()), IMAGE_PADDING, IMAGE_PADDING, paint)
        canvas.restore()

        canvas.save()
        camera.setLocation(0f, 0f, -8 * resources.displayMetrics.density)
        canvas.translate(IMAGE_PADDING + IMAGE_WIDTH / 2, IMAGE_PADDING + IMAGE_WIDTH / 2)
        camera.applyToCanvas(canvas)
        canvas.clipRect(
            -IMAGE_WIDTH ,
            0f,
            IMAGE_WIDTH ,
            IMAGE_WIDTH
        )
        canvas.translate(-IMAGE_PADDING - IMAGE_WIDTH / 2, -IMAGE_PADDING - IMAGE_WIDTH / 2)
        canvas.drawBitmap(getAvatar(IMAGE_WIDTH.toInt()), IMAGE_PADDING, IMAGE_PADDING, paint)
        canvas.restore()

实现效果如下：

Snipaste_2022-05-12_23-30-36.png