Android Gauge 动画问题 [英] Android Gauge Animation Question
问题描述
好的,所以我已经尝试这样做了几天,但无济于事.所以我有以下两张图片:
Okay so i've been trying to do this for a couple of days and i am getting no where. So i have the following two images:
第一个是转速表
第二张图片是一个全白色的图形,表示转速表已满:
The Second image is a full white graphic representing rpm gauge being full:
我想做以下事情:
- 要求用户输入 RPM,例如,如果他们输入 1.2,仪表将按如下方式填充:
我有用户输入,我需要动画方面的帮助.这是我尝试过的:
I have the user input working i need help with the animation. Here is what i have tried:
- 我曾尝试使用 PorterDuff,但它还会在背景中剪切仪表,而不仅仅是白条
- 我尝试将图像拆分为小位图并将它们存储到数组中,以便我可以回忆起部分,但这很慢并且经常崩溃
- 我通过先将仪表应用到画布然后保存画布取得了一些进展:canvas.save();然后在白色图像上剪切路径,然后恢复画布.但是我不知道如何以圆形方式从左下角开始剪辑到右下角(CW)180度.这是最好的方法吗?
我知道可能有更简单或更有效的方法来做到这一点,我只是不知道.有人有什么好的想法吗?
I know there is probably an easier or more efficient way of doing this i just don't have a clue. Anyone with any good ideas?
*注意所有图片都是 PNG 格式
*Note all images are PNG's
提前致谢!
推荐答案
正如你已经发现的,我会使用剪辑:
As you already found, i would use clip:
- 绘制背景图像
- 设置剪辑
- 绘制前景图像
我会用
Canvas.clipPath()
路径看起来像从圆心开始的饼图,像这样:
with path looking like pie slice starting in the center of circle, like this:
要创建剪辑路径,请使用以下内容:
To create clip path use something like:
public class PieView extends View {
private int width = 200;
private int angleStart = 135;
private int sweep = 270;
private Path p;
private Paint paint = new Paint();
public PieView(Context context, AttributeSet attrs) {
super(context, attrs);
p = new Path();
//move into center of the circle
p.setLastPoint(width/2, width/2);
//add line from the center to arc at specified angle
p.lineTo(width/2+(float)Math.cos(Math.toRadians(angleStart))*(width/2),
width/2+(float)Math.sin(Math.toRadians(angleStart))*(width/2));
//add arc from start angle with specified sweep
p.addArc(new RectF(0, 0, width, width), angleStart, sweep);
//from end of arc return to the center of circle
p.lineTo(width/2, width/2);
paint.setColor(Color.RED);
paint.setStrokeWidth(1);
paint.setStyle(Style.STROKE);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRect(0,0,width,width, paint);
canvas.drawPath(p,paint);
}
}
这篇关于Android Gauge 动画问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!