如何在 Android 自定义视图中用线性渐变填充路径
How to fill a Path with linear gradient in an Android custom view
我已经使用 Kotlin 创建了一个 Android 自定义视图来绘制一个星星,将来会用它来创建一个自定义 RatingBar;所以我扩展了 View class 并覆盖了它的 draw()
方法来绘制一颗星,考虑到来自 Google 的指南:
https://developer.android.com/training/custom-views/custom-drawing
之后,我尝试用线性渐变填充星轨,实现星空填充效果如下Post:
How to fill a Path in Android with a linear gradient?
class CustomStar constructor(context: Context, attr: AttributeSet) : View(context, attr) {
private var paint: Paint = Paint(Paint.FILTER_BITMAP_FLAG)
private var path: Path = Path()
init {
paint.shader = LinearGradient(0f, 0f, 0f, height.toFloat(), Color.YELLOW, Color.WHITE, Shader.TileMode.MIRROR)
}
override fun draw(canvas: Canvas?) {
super.draw(canvas)
// draw the star.
val min = Math.min(width, height).toFloat()
// top left
path.moveTo(0f, min * 0.3819901313f)
// top right
path.lineTo(min, min * 0.3819901313f)
// bottom left
path.lineTo(min * 0.1910982479f, min)
// top tip
path.lineTo(min * 0.5f, 0f)
// bottom right
path.lineTo(min*0.8089799735f, min)
// top left
path.lineTo(0f, min * 0.3819901313f)
path.close()
canvas?.drawPath(path, paint)
}
}
正如您在 init
中看到的那样,绘画对象的 shader
属性设置为 LinearGradient(0f, 0f, 0f, height.toFloat(), Color.YELLOW, Color.WHITE, Shader.TileMode.MIRROR)
所以我应该期望形状被渐变填充。
但问题是我只得到实心填充星而不是渐变,如图所示:
现在的问题是,为什么我在星星中得到的是纯色而不是渐变色?
感谢您的关注。
此时视图的高度未知:
init {
paint.shader = LinearGradient(0f, 0f, 0f, height.toFloat(), Color.YELLOW, Color.WHITE, Shader.TileMode.MIRROR)
}
而是覆盖 onSizeChanged 并在那里创建 LinearGradient:
override fun onSizeChanged(w: Int, h: Int, oldW: Int, oldH: Int) {
paint.shader = LinearGradient(0f, 0f, 0f, h.toFloat(), Color.YELLOW, Color.WHITE, Shader.TileMode.MIRROR)
}
我已经使用 Kotlin 创建了一个 Android 自定义视图来绘制一个星星,将来会用它来创建一个自定义 RatingBar;所以我扩展了 View class 并覆盖了它的 draw()
方法来绘制一颗星,考虑到来自 Google 的指南:
https://developer.android.com/training/custom-views/custom-drawing
之后,我尝试用线性渐变填充星轨,实现星空填充效果如下Post: How to fill a Path in Android with a linear gradient?
class CustomStar constructor(context: Context, attr: AttributeSet) : View(context, attr) {
private var paint: Paint = Paint(Paint.FILTER_BITMAP_FLAG)
private var path: Path = Path()
init {
paint.shader = LinearGradient(0f, 0f, 0f, height.toFloat(), Color.YELLOW, Color.WHITE, Shader.TileMode.MIRROR)
}
override fun draw(canvas: Canvas?) {
super.draw(canvas)
// draw the star.
val min = Math.min(width, height).toFloat()
// top left
path.moveTo(0f, min * 0.3819901313f)
// top right
path.lineTo(min, min * 0.3819901313f)
// bottom left
path.lineTo(min * 0.1910982479f, min)
// top tip
path.lineTo(min * 0.5f, 0f)
// bottom right
path.lineTo(min*0.8089799735f, min)
// top left
path.lineTo(0f, min * 0.3819901313f)
path.close()
canvas?.drawPath(path, paint)
}
}
正如您在 init
中看到的那样,绘画对象的 shader
属性设置为 LinearGradient(0f, 0f, 0f, height.toFloat(), Color.YELLOW, Color.WHITE, Shader.TileMode.MIRROR)
所以我应该期望形状被渐变填充。
但问题是我只得到实心填充星而不是渐变,如图所示:
现在的问题是,为什么我在星星中得到的是纯色而不是渐变色?
感谢您的关注。
此时视图的高度未知:
init {
paint.shader = LinearGradient(0f, 0f, 0f, height.toFloat(), Color.YELLOW, Color.WHITE, Shader.TileMode.MIRROR)
}
而是覆盖 onSizeChanged 并在那里创建 LinearGradient:
override fun onSizeChanged(w: Int, h: Int, oldW: Int, oldH: Int) {
paint.shader = LinearGradient(0f, 0f, 0f, h.toFloat(), Color.YELLOW, Color.WHITE, Shader.TileMode.MIRROR)
}