Android開發 Jetpack Compose Canvas

版權聲明

本文來自博客園，作者：觀心靜 ，轉載請註明原文鏈接：https://www.cnblogs.com/guanxinjing/p/17657716.html

本文版權歸作者和博客園共有，歡迎轉載，但必須給出原文鏈接，並保留此段聲明，否則保留追究法律責任的權利。

前言

  此篇博客講解Canvas的使用

 

畫線

正常的線條

效果圖

代碼

strokeWidth 是線條的寬度

color 爲線條的顏色

@Preview
@Composable
fun Line() {
    Canvas(
        modifier = Modifier
            .fillMaxSize()
    ) {
        drawLine(strokeWidth = 10f, color = Color.Red, start = Offset(0f,size.height/2), end = Offset(size.width,size.height/2))
    }
}

漸變線條

效果圖

 

代碼

通過brush設置漸變顏色效果

@Preview
@Composable
fun Line() {
    Canvas(
        modifier = Modifier
            .fillMaxSize()
    ) {
        val brush = Brush.linearGradient(listOf(Color.Green,Color.Red), start = Offset(0f,size.height/2), end = Offset(size.width,size.height/2))
        drawLine(strokeWidth = 10f, brush = brush, start = Offset(0f,size.height/2), end = Offset(size.width,size.height/2))
    }
}

線頭形狀

一共有3種StrokeCap.Butt、StrokeCap.Round、StrokeCap.Square，分別是平頭、圓頭、方頭， StrokeCap.Butt與StrokeCap.Square效果接近，但是StrokeCap.Square會讓線條更長一些。

效果圖 

代碼

@Preview
@Composable
fun Line() {
    Canvas(
        modifier = Modifier
            .fillMaxSize()
    ) {
        /**
         * StrokeCap.Butt
         */
        drawLine(
            strokeWidth = 30f,
            color = Color.Red,
            start = Offset(0f, center.y),
            end = Offset(center.x, center.y),
            cap = StrokeCap.Butt
        )

        /**
         * StrokeCap.Round
         */
        drawLine(
            strokeWidth = 30f,
            color = Color.Red,
            start = Offset(0f, center.y + 100),
            end = Offset(center.x, center.y + 100),
            cap = StrokeCap.Round
        )

        /**
         * StrokeCap.Square
         */
        drawLine(
            strokeWidth = 30f,
            color = Color.Red,
            start = Offset(0f, center.y + 200),
            end = Offset(center.x, center.y + 200),
            cap = StrokeCap.Square
        )
    }
}

虛線

效果圖

代碼

@Preview
@Composable
fun Line() {
    Canvas(
        modifier = Modifier
            .fillMaxSize()
    ) {
        drawLine(
            strokeWidth = 15f,
            color = Color.Red,
            start = Offset(0f, center.y),
            end = Offset(size.width, center.y),
            //floatArrayOf 第一個參數是每個線段的長度  第二個參數是空行間隔的長度
            //phase這個參數是設置線頭截取的長度
            pathEffect = PathEffect.dashPathEffect(floatArrayOf(50f, 50f), phase = 5f)
        )
    }
}

畫圓

實心圓

效果圖

代碼

Canvas(modifier = Modifier.align(Alignment.Center).size(150.dp)) {
    drawCircle(color = Color.Gray, radius = 50.dp.toPx())
}

空心圓

效果圖

代碼

Canvas(
    modifier = Modifier
        .align(Alignment.Center)
        .size(150.dp)
) {
    drawCircle(
        color = Color.Gray,
        radius = 50.dp.toPx(),
        style = Stroke(15.dp.toPx())
    )
}

畫半圓

實心半圓

效果圖

代碼

Canvas(modifier = Modifier.align(Alignment.BottomCenter).size(150.dp)) {
    drawArc(
        color = Color.Gray,
        startAngle = -180f,
        sweepAngle = 180f,
        useCenter = true,
    )
}

空心半圓

效果圖

代碼

Canvas(modifier = Modifier.align(Alignment.BottomCenter).size(150.dp)) {
    drawArc(
        color = Color.Gray,
        startAngle = -180f,
        sweepAngle = 180f,
        useCenter = true,
        style = Stroke(15.dp.toPx(), cap = StrokeCap.Round)
    )
}

中心不封口的空心半圓

效果圖

代碼

Canvas(modifier = Modifier.align(Alignment.BottomCenter).size(150.dp)) {
    drawArc(
        color = Color.Gray,
        startAngle = -180f,
        sweepAngle = 180f,
        useCenter = false,//關鍵是這裏設置爲false
        style = Stroke(15.dp.toPx(), cap = StrokeCap.Round)
    )
}

橢圓

實心橢圓

效果圖

代碼

Canvas(
    modifier = Modifier
        .align(Alignment.Center)
        .size(150.dp)
) {
    drawOval(
        color = Color.Gray,
        topLeft = Offset(100f,20f), //繪製圖形的位置偏移量
        size = Size(100.dp.toPx(),50.dp.toPx()), //大小
    )
}

空心橢圓

效果圖

代碼

Canvas(
    modifier = Modifier
        .align(Alignment.Center)
        .size(150.dp)
) {
    drawOval(
        color = Color.Gray,
        size = Size(150.dp.toPx(),100.dp.toPx()),
        style = Stroke(15.dp.toPx())
    )
}

Path

二階貝塞爾曲線

效果圖

代碼

@Preview(widthDp = 713, heightDp = 265, backgroundColor = 0xFFFFFFFF)
@Composable
fun quadraticBezierTo() {
    Canvas(
        modifier = Modifier
            .padding(horizontal = 20.dp, vertical = 7.dp)
            .width(713.dp)
            .height(265.dp)
    ) {
        val startX = 200f //起始位置X
        val startY = 200f //起始位置Y
        val controlX = 300f //控制點位置X
        val controlY = 100f   //控制點位置Y
        val endX = 400f     //結束位置X
        val endY = 200f     //結束位置Y

        val path = Path()
        //移動起始位置
        path.moveTo(startX,startY)
        //繪製貝塞爾曲線
        path.quadraticBezierTo(controlX, controlY , endX, endY)
        drawPath(path = path, color = Color.Green)
        //繪製輔助點，幫助理解
        drawCircle(color = Color.White, center = Offset(startX,startY), radius = 5f) //白色是起始點
        drawCircle(color = Color.Red, center = Offset(controlX,controlY), radius = 5f) //紅色是控制點
        drawCircle(color = Color.Yellow, center = Offset(endX,endY), radius = 5f)   //黃色是結束點
    }
}

三階貝塞爾曲線

效果圖

代碼

@Preview(widthDp = 713, heightDp = 265, backgroundColor = 0xFFFFFFFF)
@Composable
fun cubicTo() {
    Canvas(
        modifier = Modifier
            .padding(horizontal = 20.dp, vertical = 7.dp)
            .width(713.dp)
            .height(265.dp)
    ) {
        val startX = 200f //起始位置X
        val startY = 200f //起始位置Y
        val control1X = 300f //控制點1位置X
        val control1Y = 100f   //控制點1位置Y
        val control2X = 400f //控制點2位置X
        val control2Y = 100f   //控制2點位置Y
        val endX = 500f     //結束位置X
        val endY = 200f     //結束位置Y

        val path = Path()
        //移動起始位置
        path.moveTo(startX, startY)
        //繪製貝塞爾曲線
        path.cubicTo(control1X, control1Y, control2X, control2Y, endX, endY)
        drawPath(path = path, color = Color.Green)
        //繪製輔助點，幫助理解
        drawCircle(color = Color.White, center = Offset(startX, startY), radius = 5f) //白色是起始點
        drawCircle(color = Color.Red, center = Offset(control1X, control1Y), radius = 5f) //紅色是控制點
        drawCircle(color = Color.Red, center = Offset(control2X, control2Y), radius = 5f) //紅色是控制點
        drawCircle(color = Color.Yellow, center = Offset(endX, endY), radius = 5f)   //黃色是結束點
    }
}

drawIntoCanvas

 

 

https://blog.csdn.net/m0_37508087/article/details/120243810 參考
https://zhuanlan.zhihu.com/p/459427529?utm_id=0
https://www.6hu.cc/archives/45182.html  參考

 

end