使用 Android 创建带有自定义视图和 ImageView 的蒙版

问题描述

我有这张图片：

我想用带有渐变和波浪效果的画布填充这些条形以获得类似效果（在条形下方填充 70%）

我已经成功地创建了带有波浪动画的视图，但我无法在两个元素之间创建一种蒙版。我找到了很多方法来在图像上创建带有画布的蒙版，但在我的情况下则相反。我可以将图像重新创建为画布，但我仍然不知道如何在它们之间创建遮罩。我试图将视图转换为位图并将其指定为 imageView 的背景，也使用 clipToPath() 方法，但什么也没有。 那么，我如何才能达到这个结果？

这里是我的自定义视图的波形视图代码：

class WaveView @JvmOverloads constructor(
context: Context,attrs: AttributeSet? = null,defStyleAttr: Int = 0) : View(context,attrs,defStyleAttr) {

private var amplitude = 30f.toDp() // scale
private var speed = 0f
private val path = Path()
private var paint = Paint(Paint.ANTI_ALIAS_FLAG)
private var animator: ValueAnimator? = null

override fun onSizeChanged(w: Int,h: Int,oldw: Int,oldh: Int) {
    super.onSizeChanged(w,h,oldw,oldh)
    animator?.cancel()
    animator = createAnimator().apply { start() }
}

override fun onDraw(c: Canvas) {
    c.drawPath(path,paint)
    this.clipToOutline = true
}

private fun createAnimator(): ValueAnimator {
    return ValueAnimator.ofFloat(0f,Float.MAX_VALUE).apply {
        repeatCount = ValueAnimator.INFINITE
        addUpdateListener {
            speed -= WAVE_SPEED
            createPath()
            invalidate()
        }
    }
}

private fun createPath() {
    path.reset()
    paint.color = Color.parseColor("#1da6f9")
    paint.style = Paint.Style.FILL_AND_stroke
    paint.strokeWidth = 10f
    path.moveto(0f,height.toFloat())
    path.lineto(0f,amplitude)
    var i = 0
    while (i < width + 10) {
        val wx = i.toFloat()
        val wy = amplitude * 2 + amplitude * sin((i + 10) * Math.PI / WAVE_AMOUNT_ON_SCREEN + speed).toFloat()
        path.lineto(wx,wy)
        i += 10
    }
    path.lineto(width.toFloat(),height.toFloat())
    path.close()


}

override fun onDetachedFromWindow() {
    animator?.cancel()
    super.onDetachedFromWindow()
}

companion object {
    const val WAVE_SPEED = 0.05f
    const val WAVE_AMOUNT_ON_SCREEN = 2500
}

private fun Float.toDp() = this * context.resources.displayMetrics.density

}

结果（动画作品）：

还会有另一个画布，但它与第一​​个画布相同，不同之处在于将使用 cos 而不是 sin 并且方向相反

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）