Android-анимированный вопрос

Хорошо, поэтому я пытался сделать это в течение нескольких дней, и я не знаю, где. Итак, у меня есть следующие два изображения:

Первый - это показатель числа оборотов в минуту [/p >

RPM Gauge

Второе изображение представляет собой полную белую графику, представляющую полный диапазон оборотов:

Full Gauge

Я хочу сделать следующее:

  • спросите пользователя о входе RPM, если, например, они входят в 1.2, датчик заполнит следующим образом:

output

У меня есть работа с пользователем, мне нужна помощь в анимации. Вот что я пробовал:

  • Я попытался использовать PorterDuff, но он также закрепил датчик на фоне не только белой полосы
  • Я пробовал разбивать изображение на маленькие растровые изображения и хранить их в массивах, чтобы я мог вспоминать части, но это было медленным и часто разбивались.
  • Я сделал некоторый прогресс, применив калибровку сначала к холсту, а затем сохранил холст: canvas.save(); затем обрезание пути на белом изображении, а затем восстановление холста. Однако я не знаю, как клипа круговым способом, начиная с нижнего левого угла до 180 градусов вправо справа (CW). Это лучший способ?

Я знаю, что есть, вероятно, более простой или эффективный способ сделать это, я просто не знаю. Кто-нибудь с хорошими идеями?

* Обратите внимание, что все изображения являются PNG

Спасибо заранее!

Ответы

Ответ 1

Как вы уже нашли, я бы использовал клип:

  • рисовать фоновое изображение
  • установить клип
  • рисовать изображение переднего плана

Я бы использовал

Canvas.clipPath()

с курсором, похожим на кусочек пирога, начинающимся в центре круга, например:

Clip path

Чтобы создать путь клипа, используйте что-то вроде:

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);
    }
}

Ответ 2

Вот как рисовать дуги с Android ApiDemos: http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/Arcs.html

Затем вам нужно использовать xfermode, чтобы удалить часть верхнего изображения, используя холст, полученный из растрового изображения. Здесь вы можете увидеть один из примеров этого подхода: Сделать определенную область растрового изображения прозрачным на ощупь