android-canvas - 在jetpack compose中绘制钟形曲线

Question

我需要帮助来创建以下可组合

选项

我所知道的是形状是钟形曲线，但我不知道如何使用画布实现这一点。提前致谢

Answer 1

编辑：

当我 2 个月前第一次回答这个问题时，我不知道我最终需要做这件事。我当时的建议是使用正规方程来绘制点。这就是它的样子。我正在对浮点数和 dp 进行硬编码，因为人们定制低级逻辑比将高级逻辑重写到他们的用例更容易。

首先，正态分布的概率密度函数是 $\frac{1}{\sigma\sqrt{2\pi}}e^{-.5(frac{x-\mu}{sigma})^{2 }}$。

因为我们只需要一个图形而不需要实际概率，所以我将丢弃 $\frac{1}{\sigma\sqrt{2\pi}}$。原因是改变 sigma 是调整钟形曲线中心峰宽度的最简单方法（66% 的情况落在 -sigma 和 sigma 之间）。所以通过扔掉$\frac{1}{\sigma\sqrt{2\pi}}$，我们可以在保持固定高度的同时自由发挥曲线的宽度。

在我看来，左右 4 个标准差对于钟形曲线来说是一个很好的范围，因为它可以捕获 99.99% 的情况并且不会浪费太多的屏幕宽度。如果这是您想要的，请设置 sigma=width/4。对于 5 个标准差，使用 sigma=width/5，依此类推。

总的来说，这个概念的最小演示如下所示：

@Composable
fun BellCurveDemo(){
    fun normalValueY(mu:Float,sigma:Float,x:Float):Float{
        return (Math.pow(2.718,-.5*Math.pow(((x-mu).toDouble()/sigma.toDouble()),2.0))).toFloat()
    }
    val height=200f
    val width=400f
    val heightdp= with(LocalDensity.current){height.toDp()}
    val widthdp=with(LocalDensity.current){width.toDp()}

    Canvas(Modifier.height(heightdp).width(widthdp)){
    val path= Path()
    path.moveTo(0f,height-height*normalValueY(width/2,width/4,0f))
    for (i in 1 .. 20){
        path.lineTo(i*width/20,height-height*normalValueY(width/2,width/4,i*width/20))
        }
    drawPath(path,color=Color.Blue,style= Stroke(3f,pathEffect= PathEffect.cornerPathEffect(1f)))
    }
}