Android Gauge动画问题

Mar*_*raj 11 animation android bitmap gauge porter-duff

好的,所以我一直试图这样做几天,我没有在哪里.所以我有以下两个图像:

第一个是RPM Gauge

RPM Gauge

第二幅图像是一个全白图形,表示rpm规格已满:

全量表

我想做以下事情:

  1. 要求用户输入RPM输入,如果他们输入1.2,则测量仪将填满如下:

产量

我有用户输入工作,我需要动画的帮助.这是我尝试过的:

  1. 我尝试过使用PorterDuff,但它也会在背景中剪切仪表,而不仅仅是白条
  2. 我已经尝试将图像分成小位图并将它们存储到数组中以便我可以回忆零件,但这很慢但经常崩溃
  3. 我首先将Gauge应用于画布然后保存画布,我取得了一些进展:canvas.save(); 然后剪切白色图像上的路径,然后恢复画布.但是我不知道如何以圆形方式从左下角开始剪辑到180度到右下角(CW).这是最好的方法吗?

我知道可能有一种更简单或更有效的方法,我只是没有线索.任何有好主意的人?

*注意所有图像都是PNG

提前致谢!

Lud*_*vik 9

正如你已经发现的,我会使用剪辑:

  • 画背景图像
  • 设置剪辑
  • 画前景图像

我会用

Canvas.clipPath()
Run Code Online (Sandbox Code Playgroud)

路径看起来像在圆心开始的馅饼切片,像这样:

剪辑路径

要创建剪辑路径,请使用以下内容:

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);
    }
}
Run Code Online (Sandbox Code Playgroud)

  • 实现一些循环并相应地更改剪辑 (2认同)