It’s the Year of the Rabbit, let’s use Compose to draw rabbits

I am participating in the "Rabbit, a Rabbit" Creative Contribution Contest. For details, please see: "Rabbit, a Rabbit" Creative Contribution Contest . This year has come to the Year of the Rabbit. I remember seeing many developers draw with Compose last year. Tiger, there are all kinds of tigers. Now that it is the year of the rabbit, I suddenly want to use Compose to draw a rabbit and try it out. By the way, I have not touched Compose for a long time.

Preparation

The rabbit is mainly drawn on the canvas, so we first have to generate a Canvas, and then determine the width, height and brush color of the Canvas

val drawColor = colorResource(id = R.color.color_EC4126)
Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) {

}
复制代码

Width and height are just hard-coded two values. We can also use the system api to obtain the real screen width and height. The brush color is reddish.

head

The head is actually an ellipse. We use the drawPath method of canvas to draw. What we need to do is to determine the coordinates of the center point of the ellipse, and the upper left and lower right coordinates of the ellipse.

val startX = screenWidth() / 4
val startY = screenHeight() / 3
val headPath = Path()
headPath.moveTo(screenWidth() / 2, screenHeight() / 2)
headPath.addOval(Rect(startX, startY, screenWidth() - startX, screenHeight() - startY))
headPath.close()
Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) {
    drawPath(path = headPath, color = drawColor, style = Stroke(width = 12f))
}

复制代码

The x-axis and y-axis coordinates of the center point of the head are half of the width and height of the canvas, the x coordinate on the upper left is a quarter of the canvas width, the y coordinate is one third of the canvas height, and the x coordinate on the lower right is the canvas width Subtract the x coordinate of the upper left, and the y coordinate of the lower right is to subtract the y coordinate of the upper left, and finally draw the path of this ellipse in the Canvas, let's see the rendering

ear

After drawing the head, let's draw the ears. The two ears are actually two ellipses, which are symmetrical about the center line. The drawing idea is the same as that of drawing the head. Determine the coordinates of the center points of the two paths, and the xy coordinates of the upper left and lower right of each

val leftEarPath = Path()
val leftEarPathX = screenWidth() * 3 / 8
val leftEarPathY = screenHeight() / 6
leftEarPath.moveTo(leftEarPathX, leftEarPathY)
leftEarPath.addOval(
    Rect(
        leftEarPathX - 60f,
        leftEarPathY / 2,
        leftEarPathX + 60f,
        startY + 30f
    )
)
leftEarPath.close()

val rightEarPath = Path()
val rightEarPathX = screenWidth() * 5 / 8
val rightEarPathY = screenHeight() / 6
rightEarPath.moveTo(rightEarPathX, rightEarPathY)
rightEarPath.addOval(
    Rect(
        rightEarPathX - 60f,
        rightEarPathY / 2,
        rightEarPathX + 60f,
        startY + 30f
    )
)
rightEarPath.close()
Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) {
    drawPath(path = leftEarPath, color = drawColor, style = Stroke(width = 10f))
    drawPath(path = rightEarPath, color = drawColor, style = Stroke(width = 10f))
}
复制代码

Look at the renderings

inner ear

In this way, the ears are not very three-dimensional, and they look a bit flat. After all, rabbit ears will feel a little sunken, so we add an inner ear to this pair of ears to increase the three-dimensional effect. The inner ear is actually very simple, and the reason is the same as the outer ear. The xy coordinates of the center point and the upper left point and the lower right point will be smaller. We can change the path of the outer ear a little bit.

val leftEarSubPath = Path()
val leftEarSubPathX = screenWidth() * 3 / 8
val leftEarSubPathY = screenHeight() / 4
leftEarSubPath.moveTo(leftEarSubPathX, leftEarSubPathY)
leftEarSubPath.addOval(
    Rect(
        leftEarSubPathX - 30f,
        screenHeight() / 6,
        leftEarSubPathX + 30f,
        startY + 30f
    )
)
leftEarSubPath.close()

val rightEarSubPath = Path()
val rightEarSubPathX = screenWidth() * 5 / 8
val rightEarSubPathY = screenHeight() / 4
rightEarSubPath.moveTo(rightEarSubPathX, rightEarSubPathY)
rightEarSubPath.addOval(
    Rect(
        rightEarSubPathX - 30f,
        screenHeight() / 6,
        rightEarSubPathX + 30f,
        startY + 30f
    )
)
rightEarSubPath.close()
Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) {
    drawPath(path = leftEarSubPath, color = drawColor, style = Stroke(width = 6f))
    drawPath(path = rightEarSubPath, color = drawColor, style = Stroke(width = 6f))
}
复制代码

Look at the renderings

There is an inner taste, and the brush thickness of the inner ear is slightly reduced. In order to highlight the near big far small hahaha, let’s go to the next step

Eye

After drawing the ears, we start to draw the eyes. The eyes are also very easy to draw. The main thing is to find the position of the center point. The x coordinate of the center point is actually the same as the x coordinate of the ear, and the y coordinate is slightly closer to the y coordinate of the center point of the head. previous position

val leftEyePath = Path()
val leftEyePathX = screenWidth() * 3 / 8
val leftEyePathY = screenHeight() * 11 / 24
leftEyePath.moveTo(leftEyePathX, leftEyePathY)
leftEyePath.addOval(
    Rect(
        leftEyePathX - 35f,
        leftEyePathY - 35f,
        leftEyePathX + 35f,
        leftEyePathY + 35f
    )
)
leftEyePath.close()

val rightEyePath = Path()
val rightEyePathX = screenWidth() * 5 / 8
val rightEyePathY = screenHeight() * 11 / 24
rightEyePath.moveTo(rightEyePathX, rightEyePathY)
rightEyePath.addOval(
    Rect(
        rightEyePathX - 35f,
        rightEyePathY - 35f,
        rightEyePathX + 35f,
        rightEyePathY + 35f
    )
)
rightEyePath.close()
Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) {
    drawPath(path = leftEyePath, color = drawColor, style = Stroke(width = 10f))
    drawPath(path = rightEyePath, color = drawColor, style = Stroke(width = 10f))
}

复制代码

The renderings are as follows

眼神有点空洞，无神是不，缺个眼珠子，那我们再给小兔子画上眼珠吧，眼珠就在眼睛的中心点位置，画一个圆点，圆点就要用到drawCircle，它有这些属性

fun drawCircle(
    color: Color,
    radius: Float = size.minDimension / 2.0f,
    center: Offset = this.center,
    /*@FloatRange(from = 0.0, to = 1.0)*/
    alpha: Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
)
复制代码

我们不需要用到全部，只需要用到颜色color，也就是红色，圆点半径radius，肯定要比眼睛的半径要小一点，我们就设置为10f,圆点中心坐标center,就是眼睛的中心点坐标，知道了以后我们开始绘制眼珠

Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) { 
    drawCircle(color = drawColor, radius = 10f, center = Offset(leftEyePathX,leftEyePathY))
    drawCircle(color = drawColor, radius = 10f, center = Offset(rightEyePathX,rightEyePathY))
}
复制代码

我们再看下效果图

鼻子

接下去我们画鼻子，鼻子肯定在脑袋的中间，所以中心点x坐标就是脑袋中心点的x坐标，那鼻子的y坐标就设置成比中心点y坐标稍微高一点的位置，代码如下

val nosePath = Path()
val nosePathX = screenWidth() / 2
val nosePathY = screenHeight() * 13 / 24
nosePath.moveTo(nosePathX, nosePathY)
nosePath.addOval(Rect(nosePathX - 15f, nosePathY - 15f, nosePathX + 15f, nosePathY + 15f))
nosePath.close()
Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) { 
    drawPath(path = nosePath, color = drawColor, style = Stroke(width = 10f))
}

复制代码

我们看下效果图

兔唇

兔子的样子逐渐出来了，画完鼻子我们接着画啥呢？没错，兔子最有特点的位置也就是兔唇，我们脑补下兔唇长啥样子，首先位置肯定是在鼻子的下面，然后从鼻子开始往两边分叉，也就是两个扇形，扇形怎么画呢，我们也有现成的api，drawArc,我们看下drawArc都提供了哪些属性

fun drawArc(
    color: Color,
    startAngle: Float,
    sweepAngle: Float,
    useCenter: Boolean,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    /*@FloatRange(from = 0.0, to = 1.0)*/
    alpha: Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
)
复制代码

我们需要用到的就是颜色color,这个扇形起始角度startAngle,扇形终止的角度sweepAngle,是否扇形两端跟中心点连接起来的布尔值useCenter,扇形的左上位置topLeft以及扇形的大小size也就是设置半径，知道这些以后我们开始逐个代入参数吧

Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) { 
    drawArc(
        color = drawColor,
        0f,
        120f,
        style = Stroke(width = 10f),
        useCenter = false,
        size = Size(120f, 120f),
        topLeft = Offset(nosePathX - 120f, nosePathY)
    )

    drawArc(
        color = drawColor,
        180f,
        -120f,
        style = Stroke(width = 10f),
        useCenter = false,
        size = Size(120f, 120f),
        topLeft = Offset(nosePathX + 10f, nosePathY)
    )
}
复制代码

画兔唇的时候其实就是在鼻子的两端各画一个坐标轴，左边的兔唇起始角度就是从x轴开始也就是0度，顺时针旋转120度，左上位置的x坐标刚好离开鼻子一个半径的位置，右边的兔唇刚好相反，逆时针旋转120度，起始角度是180度，左上位置的x坐标刚好在鼻子的位置那里，稍微加个10f让兔唇可以对称一些，我们看下效果图

胡须

脸上好像空了点，兔子的胡须还没有呢，胡须其实就是两边各画三条线，用drawLine这个api,起始位置的x坐标跟眼睛中心点的x坐标一样，中间胡须起始位置的y坐标跟鼻子的y坐标一样，上下胡须的y坐标各减去一定的数值

Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) { 
    drawLine(
        color = drawColor,
        start = Offset(leftEyePathX, nosePathY - 60f),
        end = Offset(leftEyePathX - 250f, nosePathY - 90f),
        strokeWidth = 5f,
        cap = StrokeCap.Round
    )
    drawLine(
        color = drawColor,
        start = Offset(leftEyePathX, nosePathY),
        end = Offset(leftEyePathX - 250f, nosePathY),
        strokeWidth = 5f,
        cap = StrokeCap.Round
    )
    drawLine(
        color = drawColor,
        start = Offset(leftEyePathX, nosePathY + 60f),
        end = Offset(leftEyePathX - 250f, nosePathY + 90f),
        strokeWidth = 5f,
        cap = StrokeCap.Round
    )

    drawLine(
        color = drawColor,
        start = Offset(rightEyePathX, nosePathY - 60f),
        end = Offset(rightEyePathX + 250f, nosePathY - 90f),
        strokeWidth = 5f,
        cap = StrokeCap.Round
    )
    drawLine(
        color = drawColor,
        start = Offset(rightEyePathX, nosePathY),
        end = Offset(rightEyePathX + 250f, nosePathY),
        strokeWidth = 5f,
        cap = StrokeCap.Round
    )
    drawLine(
        color = drawColor,
        start = Offset(rightEyePathX, nosePathY + 60f),
        end = Offset(rightEyePathX + 250f, nosePathY + 90f),
        strokeWidth = 5f,
        cap = StrokeCap.Round
    )
}
复制代码

很简单的画了六条线，线的粗细也稍微设置的小一点，毕竟胡须还是比较细的，我们看下效果图

就这样兔子脑袋部分所有元素都画完了，我们接着给兔子画身体

Body

The body is actually an ellipse, its position is just one-third of the bottom of the canvas, the x-coordinate of the upper left is a little larger than the x-coordinate of the upper-left of the head, the y-coordinate is two-thirds of the canvas, and the x-coordinate of the lower right is lower than the x-coordinate of the head The coordinates are slightly smaller, and the y coordinate is the bottom of the canvas. After knowing it, we will draw the body like the head

val bodyPath = Path()
val bodyPathX = screenWidth() / 2
val bodyPathY = screenHeight() * 5 / 6
bodyPath.moveTo(bodyPathX, bodyPathY)
bodyPath.addOval(
    Rect(
        startX + 50f,
        screenHeight() * 2 / 3,
        screenWidth() - startX - 50f,
        screenHeight()
    )
)
bodyPath.close()
Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) {
    drawPath(path = bodyPath, color = drawColor, style = Stroke(width = 10f))
}
复制代码

The renderings are as follows

two claws

After drawing the body, let’s draw the rabbit’s claws. The claws are actually two ellipses. The x-coordinate of the center of the ellipse is the same as the x-coordinate of the two eyes, and the y-coordinate is at five-sixths of the canvas.

val leftHandPath = Path()
val leftHandPathX = screenWidth() * 3 / 8
val leftHandPathY = screenHeight() * 5 / 6
leftHandPath.moveTo(leftHandPathX, leftHandPathY)
leftHandPath.addOval(
    Rect(
        leftHandPathX - 35f,
        leftHandPathY - 90f,
        leftHandPathX + 35f,
        leftHandPathY + 90f
    )
)
leftHandPath.close()

val rightHandPath = Path()
val rightHandPathX = screenWidth() * 5 / 8
val rightHandPathY = screenHeight() * 5 / 6
rightHandPath.moveTo(rightHandPathX, rightHandPathY)
rightHandPath.addOval(
    Rect(
        rightHandPathX - 35f,
        rightHandPathY - 90f,
        rightHandPathX + 35f,
        rightHandPathY + 90f
    )
)
rightHandPath.close()
Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) {
    drawPath(path = leftHandPath, color = drawColor, style = Stroke(width = 10f))
    drawPath(path = rightHandPath, color = drawColor, style = Stroke(width = 10f))
}
复制代码

Let's see the rendering

Tail

It is still the last step. Let’s draw a tail for the rabbit. The x-coordinate of the center point of the tail is the width of the canvas minus the x-axis coordinate on the right side of the head. The y-coordinate of the center point of the tail is the height of the canvas minus a certain value. Let’s look at the code

val tailPath = Path()
val tailPathX = screenWidth() - startX
val tailPathY = screenHeight() - 200f
tailPath.moveTo(tailPathX, tailPathY)
tailPath.addOval(Rect(tailPathX - 60f, tailPathY - 90f, tailPathX + 60f, tailPathY + 90f))
tailPath.close()
Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) {
    drawPath(path = tailPath, color = drawColor, style = Stroke(width = 10f))
}
复制代码

Just finished drawing a rabbit like this, let's see the final rendering

It looks like that, let’s embellish it a little bit. We found the background is a bit monotonous. After all, it’s Chinese New Year. Although fireworks are not allowed in many places, we can still take a look. Find a picture of fireworks on the Internet and give it to Rabbit Let’s use it as the background. There is also an api like drawImage that can draw pictures on the canvas. The code is as follows

val bgBitmap = ImageBitmap.imageResource(id = R.drawable.firework_night)
Canvas(
    modifier = Modifier
        .size(screenWidth().dp, screenHeight().dp)
        .background(color = Color.White)
) {
    drawImage(image = bgBitmap,
        srcOffset = IntOffset(0,0),
        srcSize = IntSize(bgBitmap.width,bgBitmap.height),
        dstSize = IntSize(screenWidth().toInt()*5/4,screenHeight().toInt()*5/4),
        dstOffset = IntOffset(0,0)
    )
}
复制代码

Let's see how it works

Hmm~~ You're done~~ It doesn't seem very good-looking hahaha, but the point is not for the aesthetics, but for a Chinese New Year picture, and the other is to use the Canvas APIs in Compose. After all, as kotlin gradually matures, I personally I feel that Compose is likely to become the mainstream UI development mode after Android

Finally, I would like to wish everyone a happy new year. I wish you all the best in the Year of the Rabbit, and the "rabbit" will make great progress~~