观心静

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

版权声明

本文来自博客园,作者:观心静 ,转载请注明原文链接: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

posted on 2024-05-06 09:35  观心静  阅读(272)  评论(0编辑  收藏  举报