How to achieve the folding effect

How to achieve range cropping and rotation effects.

daily

I still hope that my blog can have some warmth, rather than cold technical sharing. I hope to leave my own personality, just like the public accounts of Hongyang and Guo Lin. They will casually write about the latest news and so on at the top of their blogs, but I am different. Although I am also more interested in current affairs, I am more inclined to write about random things, such as my hobbies, animation and so on.

Preface

The specific implementation result is the above effect, so how should we achieve the above effect? As always, how to install the refrigerator in three steps? Just divide and conquer.

1. Get pictures

2. Draw the upper part

3. Draw the lower half

text

Get pictures

The acquisition of images has actually been mentioned many times before, so I won’t go into details here.

Before continuing with the subsequent operations, we need to clarify some details. First of all, we need to center our picture in the center of the entire view. At this time, we need to make it clear that we cannot draw from the top of the view mindlessly, but we need to draw dynamically based on the position of the center of the view and the height of the picture. Calculate the starting position to start drawing the view, since in our case the height of the image is not determined.

//存储裁剪的范围
private val rect: Rect = Rect()
override fun onDraw(canvas: Canvas) {
    
    
    super.onDraw(canvas)
	//获取头像图片
    val bitmap = R.drawable.avatar.getBitmap(context, width / 2)
    canvas.save()
    //根据图片的获取结果来动态地设置裁剪范围
    rect.apply {
    
    
        left = 0
		//裁剪的顶部位置是：视图的正中央的高度-图片高度/2
        top = height / 2 - bitmap.height / 2
        //因为我们这里的用例比较简单，所以可以粗略地直接根据width进行裁剪
        right = width
		//裁剪的底部位置是：视图的正中央高度+图片高度/2
        bottom = height / 2 + bitmap.height / 2
    }

Draw the upper half of the image

As we have mentioned before, we have obtained the area position of the upper half of the picture. Now, we crop the drawing position based on the area position of the upper half, and then draw the view of the upper half.

canvas.save()
rect.apply {
    
    
    left = -width / 2
    top = -height / 2
    right = width / 2
    bottom = 0
}
canvas.clipRect(rect)
canvas.translate(-width / 2f, -height / 2f)
canvas.drawBitmap(bitmap, width / 4f, height / 2f - bitmap.height / 2, paint)
canvas.restore()

Draw the lower half of the image

Previously, we have completed the drawing of the upper half of the picture area, and now we will draw the lower half of the picture area.
We have mentioned before that the drawing of the lower half of the image is to add a layer of canvas translation and rotation effects based on the upper half of the image.
Here we need to reset the cropping area.

In the same way, we first still need to complete the setting of the cropping area for the lower half of the picture based on the position of the center of the view and the height of the picture.

Then we need to define a Camera class here. The function of this class is to simulate the rotation effect of the canvas, and set a camera point as a "light source" to project the image on the rotated canvas onto the x0y plane. What needs to be noted here is that canvas.translate() moves the canvas, not the picture in the canvas; and the picture is not drawn based on the x0y coordinate axis, but based on the coordinate axis of the canvas. Okay, after explaining this, let's continue with our follow-up operations. Our Camera has a default coordinate axis (0,0,-8), and the projection direction of the Camera defaults to the positive z-axis direction.

In this way, because the center of our picture is not (0,0,0), the projection will not conform to our wishes.

At this time, before applying the rotation effect of the camera, you need to move the canvas first so that the center of the picture is just at the far point of the coordinate axis, then apply the camera to flip the canvas, and then move the canvas before actually drawing the picture. Go back to your original position and you're done. as follows:

canvas.save()
rect.apply {
    
    
    left = -width / 2
    top = 0
    right = width / 2
    bottom = height / 2
}
canvas.translate(width / 2f, height / 2f)
camera.applyToCanvas(canvas)
canvas.clipRect(rect)
canvas.translate(-width / 2f, -height / 2f)
canvas.drawBitmap(bitmap, width / 4f, height / 2f - bitmap.height / 2, paint)
canvas.restore()

itmap(bitmap, width / 4f, height / 2f - bitmap.height / 2, paint)
canvas.restore()