[英]Android: draw arc within canvas api with a gradient fill color
I want to draw an arc using canvas using a gradient fill. 我想使用渐变填充使用画布绘制弧。 How can achieve this? 怎么能实现这个?
Hey I stole this from here: Draw an arc with a SweepGradient in Android 嘿,我从这里偷走了这个: 在Android中用SweepGradient画一个圆弧
but it works fine, I used a LinearGradient instead. 但它工作正常,我使用的是LinearGradient。
Shader gradient = new SweepGradient (0,getMeasuredHeight()/2, Color.RED, Color.WHITE);
lightRed.setShader(gradient);
canvas.drawArc(rectf, -90, 360, false, lightRed);
In my cause i I had to draw someone like this: 在我的事业中,我不得不画这样的人:
Maybe you too. 也许你也是。
So, let's think! 所以,让我们想一想! How does Sweep Gradient works? Sweep Gradient如何工作? If you draw rect via this: 如果您通过此绘制rect:
private val colors = intArrayOf(ContextCompat.getColor(context, R.color.progress_from_color),
ContextCompat.getColor(context, R.color.progress_to_color))
private var positions = floatArrayOf(0.0f, 1.0f)
private var sweepGradient : SweepGradient? = null
sweepGradient = SweepGradient(w / 2F,h / 2F,colors, positions)
will be: 将会:
So the idea is to rotate it! 所以想法是旋转它!
sweepGradient.apply {
val rotate = 270f
val gradientMatrix = Matrix()
gradientMatrix.preRotate(rotate, mWidth / 2F, mHeight / 2F)
setLocalMatrix(gradientMatrix)
}
Finally we can draw our arc: 最后我们可以画出我们的弧线:
mPaint.shader = gradient
canvas.drawArc(rectF, startAngle, finishedSweepAngle, false, mPaint)
See my full custom view source code on github repository . 在github 存储库中查看我的完整自定义视图源代码 。
You can also use an array of colors and variable positions. 您还可以使用颜色数组和可变位置。 For example, define 10 colors, one each 10% progress: 例如,定义10种颜色,每种颜色增加10%:
<color name="color_0">#3C3C3F41</color>
<color name="color_10">#1AFF2323</color>
<color name="color_20">#33FF2323</color>
<color name="color_30">#4DFF2323</color>
<color name="color_40">#66FF2323</color>
<color name="color_50">#80FF2323</color>
<color name="color_60">#99FF2323</color>
<color name="color_70">#B3FF2323</color>
<color name="color_80">#CCFF2323</color>
<color name="color_90">#E6FF2323</color>
<color name="color_100">#FFFF2323</color>
Put all of these colors inside a colors intArray like this: 将所有这些颜色放在颜色intArray中,如下所示:
var colors = intArrayOf(
ContextCompat.getColor(context, R.color.color_0),
ContextCompat.getColor(context, R.color.color_10),
ContextCompat.getColor(context, R.color.color_20),
ContextCompat.getColor(context, R.color.color_30),
ContextCompat.getColor(context, R.color.color_40),
ContextCompat.getColor(context, R.color.color_50),
ContextCompat.getColor(context, R.color.color_60),
ContextCompat.getColor(context, R.color.color_70),
ContextCompat.getColor(context, R.color.color_80),
ContextCompat.getColor(context, R.color.color_90),
ContextCompat.getColor(context, R.color.color_100)
)
Then, define positions. 然后,定义位置。 Positions sweep from 0.0 to 1.0 (positions 0.1 corresponds to color_10, position 0.2 to color_20 etc.) 位置从0.0扫描到1.0(位置0.1对应于color_10,位置0.2对应于color_20等)
var positions = floatArrayOf(0.0f, 0.1f, 0.2f, 0.3f, 0.4f, 0.5f, 0.6f, 0.7f, 0.8f, 0.9f, 1.0f)
Once we've defined positions, we can set the SweepGradient to our paint 一旦我们定义了位置,我们就可以将SweepGradient设置为我们的颜色
Shader gradient = new SweepGradient (0,getMeasuredHeight()/2, colors, positions);
lightRed.setShader(gradient);
Finally we can draw our arc with our shader paint: 最后,我们可以使用着色器绘制我们的弧:
canvas.drawArc(rectf, -90, 360, false, lightRed);
Final effect in my custom view: 我的自定义视图中的最终效果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.