kotlin 如何在Android Jetpack Compose中在画布上绘制单面加厚斯托克?

jhdbpxl9  于 2023-03-13  发布在  Kotlin
关注(0)|答案(3)|浏览(143)

这是我的代码;

Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ){
        Canvas(
            modifier = Modifier
                .fillMaxSize(0.5f)
                .border(1.dp, Color.Red)
        ){
            drawRect(
                color =Color.Black,
                size = size,
                style = Stroke(
                    width = 100f
                )
            )
        }
    }
}

结果;

我希望厚度从红线的内侧或外侧增加,而不是两边。我怎样才能做到呢?

kmbjn2e3

kmbjn2e31#

你必须考虑矩形的偏移量和宽度。
要在外部绘制,可以用途:

val width = 100f
        drawRect(
            topLeft = Offset(-width/2, -width/2),
            color =Color.Black,
            size = Size(size.width + width, size.height + width),
            style = Stroke(
                width = width
            )
        )

往里画:

val width = 100f
        drawRect(
            topLeft = Offset(+ width/2, + width/2),
            color =Color.Black,
            size = Size(size.width - width, size.height - width),
            style = Stroke(
                width = width
            )
        )

第一节第一节第一节第一节第一次

hfwmuf9z

hfwmuf9z2#

我无法找到任何直接的解决方案来修改笔划放置与内部或外部。但这里有一个方法来实现它,通过增加/减少大小和偏移。
这里的大小(宽度和高度)增加了矩形的(stroke value+size)。而顶部偏移将保持(-0.5*stroke value)。这里它将增加矩形的大小,并从顶部稍微向左上方移动。

drawRect(
                color = Color.Black,
                size = Size(size.width+100f,size.height+100f),
                style = Stroke(
                    width = 100f
                ),
                topLeft = Offset(-50f,-50f),
            )

这里的大小(宽度和高度)是增加了(size-stroke value)的矩形。和顶部偏移将保持(0.5*stroke value)。这里它会减少大小的矩形和移动稍微右下角从顶部。

drawRect(
        color = Color.Black,
        size = Size(size.width-100f,size.height-100f),
        style = Stroke(
            width = 100f
        ),
        topLeft = Offset(50f,50f),
    )

dgiusagp

dgiusagp3#

您需要偏移绘制位置。在画布中,边框是从中心位置向两侧绘制的,因此将其偏移笔划宽度的一半,并根据笔划宽度减小大小。此外,使用20.dp.px而不是100f将确保您的borderSroke在每个设备上看起来都相似。

@Composable
fun BorderCanvasSample() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Canvas(
            modifier = Modifier
                .fillMaxSize(0.5f)
                .border(1.dp, Color.Red)
        ) {

            val borderStroke = 100f
            val halfStore = borderStroke / 2
            drawRect(
                color = Color.Black,
                topLeft = Offset(halfStore, halfStore),
                size = Size(
                    width = size.width - borderStroke,
                    height = size.height - borderStroke
                ),
                style = Stroke(
                    width = borderStroke
                )
            )
        }
    }
}

相关问题