View的绘制 之 clip、translate、rotate、Camera

Canvas

       canvas.drawBitmap(bitmap, 0f, 0f, paint)

原图

clip

        canvas.clipRect(0.25f * bitmap.width, 0f, 0.75f * bitmap.width, bitmap.height.toFloat())
        canvas.drawBitmap(bitmap, 0f, 0f, paint)

拆切后

translate, rotate

        canvas.translate(300f, 0f)
        canvas.rotate(30f)

image.png

rotate clip

        canvas.rotate(degree, centerX, centerY)  //旋转canvas
        canvas.clipRect(0f, 0f, centerX, vHeight)  // clip，获得一个斜切的绘制区域
        canvas.rotate(-degree, centerX, centerY)  // 旋转会画布，一遍后面水品绘制bitmap
        canvas.drawBitmap(bitmap, centerX - bWidth / 2, centerY - bHeight / 2, paint)

rotate clip

scale

        canvas.scale(1f, 2f, centerX, centerY)
        canvas.drawBitmap(bitmap, centerX - bWidth / 2, centerY - bHeight / 2, paint)

scale y 2x

skew

image.png

Camera rotate

        canvas.translate(centerX, centerY)
        camera.rotateX(60f)
        camera.applyToCanvas(canvas)
        canvas.translate(-centerX, -centerY)
        canvas.drawBitmap(bitmap, centerX - bWidth / 2, centerY - bHeight / 2, paint)

image.png

综合应用

核心代码

        canvas.save()
        canvas.save()
        camera.save()

        canvas.translate(centerX, centerY)
        canvas.rotate(degreeZ)
        canvas.clipRect(-centerX, centerY, 0f, -centerY)    // 旋转之后 clip 得到一个 斜切的可绘制区域
        camera.rotateY((leftDegreeY))
        camera.applyToCanvas(canvas)
        canvas.rotate(-degreeZ)     // 反方向旋转回来，以便bitmap能够水品绘制
        canvas.translate(-centerX, -centerY)
        canvas.drawBitmap(bitmap, x, y, paint);

        canvas.restore()
        camera.restore()

ezgif.com-gif-maker (2).gif