在jetpack compose中制作自定义形状时如何使用size.width和size.height参数？

Question

我不知道如何在jetpack compose中创建具有可调整尺寸的自定义形状。我只能创建一个固定大小的。

这是具有固定大小的自定义形状的代码。

class CustomShape2: Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
   ): Outline.Generic {
        return Outline.Generic(
            path = drawShapePath(size = size))
    }
}

private fun drawShapePath(size: Size): Path {
    return Path().apply {
        moveTo(0f, 0f)
        lineTo(x = 400f, y = 0f)
        lineTo(x = 400f, y = 400f)
        lineTo(x = 0f, y = 400f)
        lineTo(x = 0f, y = 0f)
    }
}

@Composable
fun Button2() {
    Button(onClick = {},
        shape = CustomShape2(),
        modifier = Modifier
            .width(500.dp)
            .height(500.dp)
            .offset(120.dp, 200.dp)
            .drawBehind {
                drawPath(
                    path = drawShapePath(size = size),
                    color = Color.Red,
                    style = Stroke(width = 10f)
                )
            }) {

    }
}

此代码生成一个形状像正方形的按钮。问题是尺寸固定为drawShapePath 函数状态中的任何坐标。无论我如何调整按钮上的宽度和高度修饰符，大小都保持不变。

这是我从其他地方获取的代码。

class CustomShape1: Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline.Generic {
        return Outline.Generic(
            path = drawShapePath(size = size))
    }
}

private fun drawShapePath(size: Size): Path {
    return Path().apply {
        moveTo(0f, 0f)
        lineTo(x = size.width * 2, y = 0f)
        lineTo(x = size.width * 2, y = size.height * 2)
        lineTo(x = 0f, y = size.height * 2)
        lineTo(x = 0f, y = 0f)
    }
}

@Composable
fun Button1() {
    Button(onClick = {},
        shape = CustomShape1(),
        modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .offset(50.dp, 20.dp)
        .drawBehind {
            drawPath(
                path = drawShapePath(size = size),
                color = Color.Red,
                style = Stroke(width = 10f)
            )
        }) {

    }
}

此代码还生成一个方形按钮。该按钮与上面的按钮的区别在于，该按钮的大小可以通过按钮修饰符进行调整。

形状不是由直接偏移坐标形成的，而是由其他东西形成的。我不知道该怎么称呼它。

我不明白如何使用 size.width 和 size.height 参数。单独使用它们意味着什么？

我尝试过不同的数学运算符（+、-、*、/）和不同的数字，它们都会产生不同的结果，但我不明白它们的含义或如何使用它们产生所需的形状。

Answer 1

您的两个

drawShapePath

函数都有一个

size

参数。它包含绘图区域的大小。该对象属于

Size

类型，具有

width

和

height

属性，指定......宽度和高度。

在您的

drawShapePath

版本中，您忽略

size

参数并使用固定值来绘制尺寸始终为 400x400 的矩形。

另一方面，

drawShapePath

的另一个版本将其绘制的矩形调整为依赖于

size

参数：它将具有可用绘图区域宽度（

size.width * 2

）两倍的宽度，并且高度将为可用高度的两倍 (

size.height * 2

)。我不知道为什么这里的大小加倍，这没有任何意义，但重点是它是动态的：矩形的大小直接取决于可用绘图区域的大小。

现在，当您设置按钮的宽度和高度时，您就定义了可用的绘图区域。您的版本会忽略这一点，但其他版本总是会将矩形的形状调整为两倍大小。

只需使用

size

参数的

width

和

height

属性来计算所需的形状，就可以开始了。